Welcome to React, Firebase & Bacon!

Hi there! 👋

Welcome to React, Firebase & Bacon — thank you so much for joining in!

My name is James and throughout this course I’m going to be your guide as we build a bacon-making app together. Yep, I’m using bacon as a metaphor for money. I’m only kinda sorry.

#Use the source.

Throughout this course, I’ll be walking you through the process of building Vouch — a subscription-supported social network built with React, Firebase and Stripe. So without further ado, here’s the complete source:

Vouch is a real, live app; it’s a large codebase undergoing constant updates. If you wanted to build something like this from scratch, it would take quite a bit of time. Luckily, Vouch is designed to be easily cloned and extended — so that you can use it as a base for your own bacon-making adventure. Naturally, it’s built from the ground up with modern tech, including:

  • React Hooks
  • Styled Components
  • Create React App
  • Firebase Functions
  • a whole lot more

Of course, if building Vouch takes time, then writing the articles, videos and exercises that explain it will take even longer. That’s why this course is a living document — and as a member, you’ll be receiving frequent updates with new material. If you’d like to help set the direction around new content, or just want to kick about with fellow travellers — grab an invite to the member-exclusive Slack community and say hi!

#Start small.

Okay, so you want to build a bacon-making app. The thing is, before even thinking about payments, you’re first going to need:

  • A build system
  • Form handling
  • A way to privately communicate with 3rd party APIs
  • Routing
  • Authentication
  • Some sort of styles
  • A way to store your application’s data
  • And then payments

If you try and tackle all this in one go, you’re gonna get pummeled. So instead, we’re going to start small —  and have some fun in the process! In fact, I have a nice little project to start you off:

import React from 'react'
import ReactDOM from 'react-dom'
import App from './App'

ReactDOM.render(<App />, document.getElementById('root'))
Build In Progress

This little landing page is the first thing that we’ll be building and launching together. It uses Create React App, Firebase, Styled Components and the free Mailchimp API to collect emails from potential customers. In fact, the above demo actually works — you can enter in your email and submit it to see the thank you page (although you won’t actually be subscribed to the newsletter unless you use the live version).

#Start even smaller

Of course, even this little landing page has a lot going on. So before we dive in, I’ve got an even simpler task for you: let’s actually create a React app and deploy it. As in, a real app that’s deployed to the internet so that you can show your friends. It’ll only take 20 minutes, and I’ll walk you through the whole process — so click through to the next step and let’s get started!