Learn GraphQL,
In One Week

Build a fullstack eCommerce application with GraphQL Yoga, Prisma, Planetscale, Next.js, Tailwind CSS, & Stripe Checkout.

Intro to GraphQL

Learn the basic concepts of GraphQL by building a full stack app. Learn how to work with queries, variables, mutations, fragments, and more.

GraphQL on the backend

Build a backend API with GraphQL Yoga. Learn how to query, and mutate data from a database with Prisma, MySQL, and Planetscale.

GraphQL on the client

Work with GraphQL on the client using Apollo Client. Generate queries, and mutation React hooks using the GraphQL Code Generator.

What we will build

Take a quick look at what we will build during this course in the video below.

Demo

What we will learn

Take a few hours a day over the next week to build a full stack application with GraphQL. Go from the basics and level up to become a GraphQL expert!

Backend

GraphQL Yoga

Build a production scale GraphQL API with a batteries included framework.

Prisma

Talk to the database using a type safe ORM, with world class developer experience.

Server Side Rendering

Learn how to handle requests on the server to serve dynamic content from the database.

Docker

Learn how to setup, and use Docker Compose to run a local MySQL database.

MySQL

Learn how to connect Prisma with MySQL to store our database, and deploy it.

Serverless Functions

Learn how to use Next.js API routes to host our GraphQL endpoint using GraphQL Yoga.

Webhooks

Learn how to use Next.js API routes to handle incoming webhook payloads from Stripe.

Frontend

Tailwind CSS

Learn how to add class to your storefront using the popular utility CSS framework: Tailwind CSS

Apollo Client 3

Learn how to send GraphQL queries, and mutations on the frontend with Apollo, and manage client-side caching.

React

Learn the basics of React by following along building a storefront with Next.js

GraphQL

GraphQL Code Generator

Generate types automatically for the backend, and frontend for end to end type safety.

GraphQL Schema Definition

Learn how to define a schema, add descriptions, and more using the SDL-first approach.

GraphQL Queries

Learn how to perform, and name query operations within GraphiQL, and Apollo Client.

GraphQL Mutations

Learn how to perform, and name mutation operations within GraphiQL, and Apollo Client.

GraphQL Fragments

Learn how to reduce boilerplate by writing fragments to spread into queries, and mutations.

GraphQL Resolvers

Learn how to use context to pass around the Prisma instance, and handle requests to our server inside resolver functions.

FullStack

Next.js

Build a storefront using React, and the popular framework for managing static & server side rendering.

NPM

Learn how to use NPM to install all of the dependencies needed for our backend, and frontend.

TypeScript

Learn the basics of TypeScript by following along building a server. GraphQL Code Generator makes this all too easy!

Stripe Checkout

Learn how to create checkouts, and accept payments with Stripe.

Deployment

Deploying to Vercel

Finally put all of this course together to deploy to your own domain name!

Hear from your teachers,
Jamie & Julian

Get started today for free, learn GraphQL,
and build your own app in one week!

I'm a full stack developer who loves building, and teaching. This course brings together years of experience building with GraphQL, and shows how you can build your own full stack application with some of the best tools & services out there.

I'm also a full stack developer, and I've been building stuff with GraphQL since like 2018. I'm always hunting for the most productive GraphQL Developer Experience, and this course will fill your toolbelt with the best instruments the ecosystem offers

Project Setup

Creating a new Next.js app

Episode #1

Creating a new Next.js app

Watch now
Install and configure Tailwind CSS

Episode #2

Install and configure Tailwind CSS

Watch now
Install GraphQL Yoga, and configure API route

Episode #3

Install GraphQL Yoga, and configure API route

Watch now
Install and configure GraphQL Code Generator

Episode #4

Install and configure GraphQL Code Generator

Watch now
Install and configure Docker Compose

Episode #5

Install and configure Docker Compose

Watch now
Install and configure Prisma

Episode #6

Install and configure Prisma

Watch now

Backend

Create schema and resolver for fetching a cart by ID

Episode #7

Create schema and resolver for fetching a cart by ID

Watch now
Create schema and resolver for adding new item

Episode #8

Create schema and resolver for adding new item

Watch now
Create schema and resolver for removing cart items

Episode #9

Create schema and resolver for removing cart items

Watch now
Create schema and resolver for increasing item quantity

Episode #10

Create schema and resolver for increasing item quantity

Watch now
Create schema and resolver for decreasing item quantity

Episode #11

Create schema and resolver for decreasing item quantity

Watch now
Create schema and resolver for creating a new Stripe checkout session

Episode #12

Create schema and resolver for creating a new Stripe checkout session

Watch now
Validate and fulfill orders

Episode #13

Validate and fulfill orders

Watch now

Frontend

GetCart query and set cart id cookie

Episode #14

GetCart query and set cart id cookie

Watch now
Setup Apollo Provider and display total items in header

Episode #15

Setup Apollo Provider and display total items in header

Watch now
Create product grid

Episode #16

Create product grid

Watch now
Product detail page

Episode #17

Product detail page

Watch now
Add products to cart

Episode #18

Add products to cart

Watch now
Cart summary page

Episode #19

Cart summary page

Watch now
Update cart items quantity

Episode #20

Update cart items quantity

Watch now
Remove items from cart

Episode #21

Remove items from cart

Watch now
Checkout page

Episode #22

Checkout page

Watch now
Order confirmation page

Episode #23

Order confirmation page

Watch now

Deployment

Deploy to Vercel

Episode #24

Deploy to Vercel

Watch now