React, Firebase & Bacon

Do you just want to launch a modern monetized web app? Or do you actually want to understand how the darn thing works?

In this course, you'll become a master of both the how and the why, as you build a bacon-making app from the ground up — with React, Firebase & Stripe.

Get started

#A Means To Bacon

So Bacon, of course, is a metaphor for money. But what does Bacon (money) have to do with React and Firebase? Why React, Firebase and Bacon?


You know, I like that you’re asking that question. It’s a good question. And my answer is going to make an assumption:

You’ve got better things to do than sit there writing code.

Now don’t get me wrong. I love writing code. I wouldn’t be writing this unless I did. But if you’re anything like me, you’ve got other things that you love doing, too. And while writing code can be its own reward, it can also be a means to an end. A means to improving your finances and opening up time to do other things that you love. A means to bacon, if you will.

I’m assuming that you want to use React to make more money.

Maybe you want to level up your Frontend game to land that raise. Maybe you’ve just graduated, and you want to build a portfolio to help you land your first job. Or maybe you can’t stand jobs and you want to build your own app and take over the world. Regardless of your situation, there’s one thing that stays constant: if your app is making money, you will make money.

And if you want your app to make money, it better bloody well sell something.

#Real world code, real world payments

So you’re gonna make some bacon. You know a little JavaScript. You’ve figured out React’s fundamentals. You’re on your way to conquering the world! All that’s left is to figure out forms and APIs and theming and routing and authentication and structure and server-side rendering and did I mention payments? 💵

As you’ve probably experienced, learning React is only half the battle. There’s a whole lot more that goes into building real world apps — and what better way to learn it all than with real world code? Speaking of which…

Upon joining this course, you’ll immediately receive access to the full source code for Vouch.

But what is Vouch? It’s is a subscription-supported social network built with React, Firebase and Stripe. It has server rendering, authentication, multiple payment plans — the works. It’s in beta right now — and you’ll receive full access to the source the moment you join.

The source you’ll receive is packed with features, including:

  • Authentication with both social and email login
  • Server rendering with Firebase functions
  • Profiles and usernames
  • Responsive layout
  • Settings panels for account, billing and passwords
  • Animated modals and popups
  • An onboarding process for new users
  • Integration with stripe webhooks

And to top it all off, the code is licensed under the MIT license — so you can share it, redistribute it, or even build your own business on it! 🏦

Okay, but say that you’ve joined, and now have a whole bunch of new code. No really, there’s a lot of code. So how are you going to get your head around it all?

#Coursework & Community

Along with the source for Vouch, you’ll also receive access to two invaluable extras:

#1. Loads of content

First, you’ll get access to all of the exclusive content on Frontend Armory — including the complete React fundamentals and Async JavaScript courses. You’ll receive immediate access to articles and exercises introducing Create React App, Firebase and Styled Components. And what’s more, you’ll get regular updates, with each one expanding on a single step in the journey from npm init to receiving real payments.

#2. Access the exclusive community

Along with the coursework, you’ll also receive an invitation to the Frontend Armory Pro community — where you can discuss the source, the coursework, and the tastiest bacon recipes with like-minded developers. I’ll also be actively participating in this community and taking feedback on what content to expand on next — so do say hi once you join! 👋

#Are you ready to level up your Frontend game?

Okay, so say you want complete access to:

  • The source
  • The content
  • The community, and
  • The members-only updates…

How do you get it? Just join Frontend Armory Pro! It’s only $18/month, it gives you immediate access to everything, and you can still cancel at any time!

And honestly, this is a bargain for what you get — it’s less than the cost of a latte a week. Imagine how much time you’ll save on your next project, or how much you’ll get from a good raise? Hell, even $180 is too cheap for what you get here, but that’s all you’ll pay for an entire year of access — a saving of 2 months free over the monthly price.

Are you ready to level up your bacon making skills? Then what are you waiting for‽ Click the button below and join Frontend Armory Pro now!

Try the first lesson

#What will you learn?

Vouch is built from the ground up with modern tech, including:

  • React, with hooks
  • Create React App
  • Firebase authentication, functions, firestore, hosting and cloud storage
  • Payments with Stripe
  • CSS-in-JS and Styled Components
  • Routing with Navi
  • Code splitting and dynamic import
  • React context
  • React suspense
  • Error boundaries
  • Server rendering
  • Responsive layouts

#Is this course for me?

If you want to gain a deeper understanding of how to design and build modern React apps, and enjoy learning through practical exercises, then this course is for you.

The course assumes that you’re already familiar with JavaScript and React’s basics, including async/await, elements, components, state, event handlers. If you’ve built a few things in React, then you’ll be ready to go. And if you need to do some revision, my React fundamentals and Mastering Async JavaScript courses are included with your subscription.

Before starting, you should also be familiar with simple command line utilities like ls and cd, and have node.js installed and ready to go. The course will take you from there - it covers everything from installing and using create-react-app to deploying your app to the web.

The course is perfect for:

  • Anyone wanting to understand the whys and hows of modern Frontend development
  • Teams who’ll benefit financially from improved speed and SEO
  • Web developers who want to transition their sites to React
  • Backend developers who want an introduction to Frontend development
  • Bootcamp graduates looking to build confidence with real world code
  • Anyone who wants to improve their JavaScript knowledge, and enjoys learning by doing.

Try the first lesson