The Full-Stack Developer in 2022 (w/ Next.js, GraphQL, and Prisma)
Build a complete e-commerce app with React, Next.js, GraphQL, Yoga, Prisma, & Stripe.
Created by Grégory D'Angelo
Last updated 11 Dec 2022
This project-based course will teach you everything you need to build a custom full-stack web application. Indeed, you'll learn about all the modern technologies of a full-stack developer in 2022. But, most importantly, after finishing this hands-on course, you'll feel confident building production-ready full-stack applications on your own and applying for your dream job at any tech company.
You will build a massive e-commerce application using React (with hooks), Next.js, GraphQL, Yoga, Prisma, Stripe, and more. Again, this course is very hands-on. We'll take you step-by-step from start to finish to become a professional full-stack developer.
We'll start from the very beginning and take it one step at a time to build both the front and backend. And unlike most React courses, we don't only teach you the fundamentals (by the way, I ask you to have some experience with React already). Still, we'll dive into advanced topics, and you'll get a ton of practice so you'll be job-ready.
We'll explore server-side rendering, GraphQL, authentication, accepting payments, relational databases, testing, and automatic deployment.
Moreover, this course is not your usual code-along video course. So, you'll be disappointed if you think you'll be at your desk watching me coding like you could watch a Netflix TV show. Instead, I do believe that for you to get the best learning experience and really learn something from this course, you need the right balance between teaching and building, with a heavier focus on building.
I'm sure you'll find this approach more engaging and effective.
If you're still not convinced, let me give you three reasons why this course is different and better than any other React course you can find online:
- You'll learn by building a scalable, production-ready real-world application.
- You'll learn from a senior full-stack developer with several years of experience and get support from our growing community along the way.
- You'll go beyond the basics and learn all the technologies you need to become a full-stack developer in 2022.
Some of the topics you'll learn in this course:
- Database setup
- Database migrations
- User management
- GraphQL API
- GraphQL queries and mutations
- Client-side routing and dynamic pages
- Client-side fetching
- State management
- Server-side rendering
- Stripe integration
- Sending emails
- Styling with Tailwind
- ...and more!
This course is beginner-friendly. We'll start from scratch, learn the theory together, and practice building the application step-by-step. However, I strongly recommend at least some experience building apps using React since we will be using Next.js, a React framework.
Also, you don't need to be a CSS Wizard, but you need to understand the basic principles of CSS. Plus, we'll use Tailwind CSS to make our life easier and build a modern web app without ever leaving our JSX.
Finally, this course doesn't require any prior knowledge of backend development, GraphQL, or database management. I've got you covered.
Let's get started 🚀
Who is this course for?
- People who want to build a web application from scratch.
- People curious about what a large and scalable application might look like.
- Students and bootcamp graduates that want to go beyond the basics.
- People who want to learn the most in-demand skills in web development.
- Front-end developers who want to become full-stack and gain practical experience.
- Startup founders who want to know how to build a future-proof web app for their business in no time.
- Freelancers who want to stay up to date on the latest web development technologies.
Project overview and prerequisites
Leave a review
Create a Next.js app with TypeScript
Clean up the default template
Install and set up Tailwind CSS
Set up unit testing with Jest and React Testing Library
Build the main layout component
Challenge: Build the main layout component (1)
Challenge: Build the main layout component (2)
Challenge: Build the homepage
Create and set up the database
Set up an S3-compatible blob store
Set up Prisma and connection pooling
Define the data model (1)
Define the data model (2)
Generate the Prisma Client
Create the tables with Prisma Migrate
Seed the database with initial data
Create a GraphQL server with GraphQL Yoga
Set up the schema builder with Pothos
🔒 Set up GraphQL Codegen and TanStack Query
🔒 Write a simple GraphQL Query
🔒 Query the data in your Next.js app
🔒 Build the shopping cart page
🔒 Manage shopping cart items
🔒 Add authentication with Auth0
🔒 Persist carts in the database
🔒 Set up and connect Stripe to the application
🔒 Create Stripe Checkout sessions
🔒 Handle Stripe webhooks
🔒 Send order confirmations by email
🔒 Define authorization rules
🔒 Restrict access to admin only
🔒 Build the dashboard layout
🔒 Query and render data into tables
🔒 Perform CRUD operations
🔒 Set up the app and database for production
🔒 Deploy the Next.js app and GraphQL API to Vercel
🔒 Thank you!
CEO & Founder, AlterClass
Greg D'Angelo is a lead instructor and the founder of AlterClass.
He has worked as a Senior Software Engineer and spent most of his career developing large-scale web applications in different industries. He now focuses on bringing his expertise online to teach programming skills and help everyone master modern software development. He is the creator of the AlterClass React program and many other online courses.