Frontend Serverless with React and GraphQL— A Masterclass

Eliminate errors, sidestep delays, and create a better designed, fully functional website with a course built for you. Stop piecing together tutorials. Get all the details and tools you need in one spot.

Whether you’re fresh out of a dev bootcamp and need a new website to showcase your skills or if you want to dive deeper than your previous training, our course prepares you for more complex development.

What you’ll learn in our course

GraphQL Logo

Get exactly the data you need with GraphQL

GraphQL provides an expressive way to fetch data and eliminates timewasting one-off data requests. Get the data you need, no more, no less.

React Hooks

Painless Data Fetching

We’ll show you how to painlessly fetch data with Apollo Hooks. This single line of code fetches all the data you need for a React component and manages it effortlessly behind the scenes.

Vercel Logo

Automated Code Building & Deployment

With each new code change, automated code building and deployment using Vercel is included. As you check in new changes to Github, we create a pipeline to sprint to life and build and deploy the code automatically. So instead of worrying about DevOps, you can focus on what matters most—writing code.

GraphCMS Logo

Frustration-Proof Backend

We believe in the power of a set it and forget it backend. That’s why we set up our data structures using GraphCMS, and 10 minutes later you are ready to handle all the traffic that comes your way. Data is then visualized via a user-friendly interface, providing you with total transparency about how your app is being used, with no need to code it yourself.

Auth0 Logo

Bulletproof Authorization and Authentication

Learn how to handle user signups, login, and access permissions using Auth0 to build a professional-grade website.

Next.js Logo

Fully Optimized

Enjoy full-optimized pages out of the box, with our course. We use Next.js. to Search Engine Optimize your website pages automatically.

Typescript Logo

Live Error-Proofing

We use Typescript with GraphQL to ensure our code editor flags any time you make references to fields that don’t exist or misspell code. Make fewer errors as you work on your project, with this added feature.

GraphQL Code Generator Logo

Eliminates Boilerplate Code Errors

Automatic code generation takes boring boilerplate code off your plate and regularly updates as your app evolves, reducing bugs in the process.

Meet Stephen

Hi I’m Stephen! I'm a Senior Fullstack Developer and Software Architect from Chicago. I've designed and built a number of professional webapps and I run the Codemochi blog and YouTube channel where I've helped over 50,000 students on their coding journey.

I built this course as a complete working example of a fully featured web application that someone with a basic to intermediate knowledge of React should be able to follow.

What we are building

We will learn all of these best practices by creating a production grade recipe sharing application called Next Chop that’s inspired by sites like Here are the main features of what we will create and what you’ll learn from building each piece of this web app. After building it here, you’ll be fully armed to take these skills to all of your future creations.

Recipe List Photo

Recipe List

Use Apollo Hooks for fetching lists of recipes that we can create into a responsive layout of recipe cards.

Recipe Detail List Photo

Recipe Detail List

Dive deeper on a recipe page by pulling all of the recipe information for a single item.

OAuth User Login / Signup Photo

OAuth User Login / Signup

Authentication is notoriously tricky- learn how to set it up the right way and use it both for controlling the UI and making secure backend requests.

New Recipe Page with Image Upload Photo

New Recipe Page with Image Upload

Learn how to build complex forms with local state and picture upload ability that make requests using graphQL mutations.

My Recipes Page for user generated recipes Photo

My Recipes Page for user generated recipes

Build a my recipes page that only logged in users can see which fetches only the current user’s courses.

Users can only update and delete their own recipes Photo

Users can only change their own recipes

Lock down the backend using a Next.js api so that users can only edit their own recipes.

Like your Favorite Recipes Photo

Like your Favorite Recipes

See the number of likes for a recipe and like one to see the heart get filled and the count incremented.

View all of your Liked Recipes Photo

View all of your Liked Recipes

See all of the recipes that you’ve liked in one place with a responsive layout.

What people are saying about the Next Chop

Svitlana Shepitsena

Svitlana Shepitsena
Web Developer

"These tutorials are a great piece of art- really nice to watch and easy to follow. I learned a ton of useful stuff including how to set up Next.js projects and how to use layouts, global styles and themes with Styled Components. It’s a perfect course- thank you!"

Tim Birkmire

Tim Birkmire
Software Developer

"I had already taken several tutorials on topics covered in this course (React, Typescript, GraphQL w/Apollo, Authentication, etc), but I was struggling with how everything ties together in an actual web application. After taking this course, everything became crystal clear and I learned so much more than I bargained for."

Frequently Asked Questions

Am I ready for this course?

Can I put this app in my portfolio?

What if I'm unhappy?

I have a different question.