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
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.
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.
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.
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.
Bulletproof Authorization and Authentication
Learn how to handle user signups, login, and access permissions using Auth0 to build a professional-grade website.
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.
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.
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 AllRecipes.com. 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
Use Apollo Hooks for fetching lists of recipes that we can create into a responsive layout of recipe cards.
Recipe Detail List
Dive deeper on a recipe page by pulling all of the recipe information for a single item.
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
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
Build a my recipes page that only logged in users can see which fetches only the current user’s courses.
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
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
See all of the recipes that you’ve liked in one place with a responsive layout.
What people are saying about the Next Chop
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."