Spend your time writing your business logic, not boilerplate code.

Learn how to build end-to-end strongly-typed React apps that enable you to focus less on writing fragile, single purpose data fetching code and more on functionality that your users care about.

Building a frontend React application is complex. You have to not only control how your various UI elements will appear on a page, but you need to make sure that it will look great across a variety of different screen types and you also need to manage fetching the wide variety of data needed to feed all these individual components. You also need to manage user login, SEO optimization, and on top of all that deploy your site in a way so that it will effortlessly scale when your site gets featured on Ellen.

Luckily, there have been some amazing tools and services that has been developed over the past few years that will allow you to abstract away much of this fragile code writing process. In this course, I will show you how to rely on battle-tested libraries and set up code that will update automatically as your project grows and evolves.

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

Meet Stephen

Hi I’m Stephen! I wrote this tutorial because it is the one that I wish that I had when I was building my first React Application.


GraphQL Logo

Strong Typing with GraphQL

Learn how to use GraphQL to specify how your data is related to each other in an expressive manner without code.

React Hooks

Expressive Data Fetching with Apollo Hooks

Use Apollo Hooks on your client for manage all of your data fetching and for storing and aggregating all of your data.

GraphCMS Logo

Set it and Forget it Serverless Backend

Graphical CMS as a backend for storing data and images.

Zeit Now Logo

Effortless Production Grade Frontend Deployment with Code Pipeline

Forget about managing infrastructure with automated serverless frontend deployment to staging and production environments.

Auth0 Logo

Effortless Auth with Auth0

Tried and tested user signup, login, and access rules with Auth0.

Next.js Logo

SEO Optimized from the Ground Up

Dynamic server side rendered pages that are optimized for SEO with Next.js

Typescript Logo

Eliminate type errors with Typescript

Code with confidence- static typing immediately verifies that variables, functions, and properties are used as they should be.

GraphQL Code Generator Logo

Generate Schema Code Automatically

Use GraphQL Code Generation to build all your data types with one command.

What we are building

We will learn all of these best practices by creating a Recipe Sharing application called Next Chop.

Recipe List Photo

Recipe List

Recipe Detail List Photo

Recipe Detail List

OAuth User Login / Signup Photo

OAuth User Login / Signup

New Recipe Page with Image Upload Photo

New Recipe Page with Image Upload

My Recipes Page for user generated recipes Photo

My Recipes Page for user generated recipes

Users can only update and delete their own recipes Photo

Users can only update and delete their own recipes

Like your Favorite Recipes Photo

Like your Favorite Recipes

View all of your Liked Recipes Photo

View all of your Liked Recipes

In this Course you will learn to:

  • Create the Next.js typescript base

  • Add Styled Components and Ant Design

  • Create the Layout, Header and Footer Templates

  • Add Apollo GraphQL and GraphCMS Backend 🚀

  • Add GraphQLCodeGen for strongly typeset models

  • Create Recipes List 🍛 🥘 🍝

  • Create Custom Alerts ⛔

  • Auth0 and React Hooks for user state management 🙋‍♀️

  • Add User Like Button 👍

  • Create My Recipes and Favorites Page ❤️

  • Add a Create and Update Recipes Page

  • Add a Delete Recipe Button with confirmation modal

  • Secure the backend with a GraphQL Proxy 🙅🏾

  • Automated serverless deployment with Zeit Now 🤖

Course Package

We will learn all of these best practices by creating a Recipe Sharing application called Next Chop.

  • Access to all 10+ hours of content in 48 videos that show how to build Next Chop from scratch.
  • Text and code explanations for each video to explain in each step what we are doing and why.
  • All the source code for each step so that you can see exactly how each video should look once we are finished.
  • Unlimited updates- get access to all improvements that are made in the future for no additional cost.
  • Stream course videos from your computer or device anywhere there is internet access.
Next Chop Logo

Get the Starter Package | $120 $50