Learn how spend your time writing business logic, not boilerplate code in your React apps.
This course teaches you how to build React apps that are both quick to get off the ground for an MVP and flexible enough to grow with your changing business needs.
We cover everything that you will need to build your own end-to-end strongly-typed React apps that enable you to focus less on writing fragile, single purpose data fetching code and more on creating features that your users care about.
Learn by doing: build a Recipe Sharing App
We will learn all of these best practices by creating a Recipe Sharing application called Next Chop. Here is some of what you will be learning:
Use libraries and Styled Components for a lovely UI
Site-wide templates for a consistent layout
Apollo and GraphCMS for a flexible GraphQL backend
Eliminate type errors with GraphQLCodeGen
Custom alerts and modals for helpful user feedback
Manage user state with Auth0 and React Hooks
Fetch exactly the data you need for individual 'favorites', 'all', and 'my' recipe pages
Keep track of user likes for a particular recipe
Learn mutations with 'create' and 'update' recipe pages
Image uploads to share your most delicous recipes
Secure backend with a proxy service to verify all requests
Automated serverless deployment with Vercel
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
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."
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.
Benefits of this stack
Strong Typing with GraphQL
Use GraphQL to expressively describe how your data models are related to each other without code.
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.
Set it and Forget it Serverless Backend
Graphical CMS as a backend for storing data and images.
Effortless Production Grade Frontend Deployment with Code Pipeline
Forget about managing infrastructure with automated serverless frontend deployments.
Effortless Auth with Auth0
Tried and tested user signup, login, and access rules with Auth0.
SEO Optimized from the Ground Up
Dynamic server side rendered pages that are optimized for SEO with Next.js
Eliminate type errors with Typescript
Code with confidence- static typing immediately verifies that variables, functions, and properties are used as they should be.
Generate Schema Code Automatically
Use GraphQL Code Generation to build all your data types with one command.
