Hi there! 👋

#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
• Some sort of styles
• Routing
• Authentication
• A backend
• 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 { createBrowserHistory } from 'history'
import React, { useEffect, useState } from 'react'

import { NarrowCardLayout, StyledHaiku } from './components'
import Landing from './landing'

const history = createBrowserHistory()
const navigate = path => history.push(path)

function getRoute(location) {
  switch (normalizePathname(location.pathname)) {
    case '/':
      return <Landing navigate={navigate} />

    case '/privacy':
      return <Privacy navigate={navigate} />

    case '/thanks':
      return <Thanks navigate={navigate} />

    default:
      return <NotFound navigate={navigate} />
  }
}

export default function App() {
  const [location, setLocation] = useState(history.location)

  useEffect(() => history.listen(setLocation), [])

  return getRoute(location)
}

function NotFound({ navigate }) {
  return (
    <NarrowCardLayout navigate={navigate}>
      <StyledHaiku>
        I couldn't find it
        <br />
        The page probably hates me
        <br />
        I'm really depressed
      </StyledHaiku>
    </NarrowCardLayout>
  )
}

function Privacy({ navigate }) {
  return (
    <NarrowCardLayout navigate={navigate}>
      <StyledHaiku>
        Your privacy is
        <br />
        Very important to us
        <br />I wrote a poem
      </StyledHaiku>
    </NarrowCardLayout>
  )
}

function Thanks({ navigate }) {
  return (
    <NarrowCardLayout navigate={navigate}>
      <StyledHaiku>
        Thanks for joining in!
        <br />
        When we're ready to wow you,
        <br />
        You'll get an email.
      </StyledHaiku>
    </NarrowCardLayout>
  )
}

function normalizePathname(pathname) {
  if (pathname === '/' || pathname === '') {
    return '/'
  }

  // Add leading slash
  pathname = pathname[0] !== '/' ? '/' + pathname : pathname

  // Strip trailing slash
  pathname =
    pathname[pathname.length - 1] === '/' ? pathname.slice(0, -1) : pathname

  return pathname
}

This little landing page is the first thing that you’ll be building and launching. It uses Create React App, Firebase and Styled Components 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.

#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!