Build a Full-Stack App with Next.js, Supabase & Prisma

Learn to build a full-stack application from scratch using some of the best modern web technologies: React / Next.js, Prisma, and Supabase.

Created by Grégory D'Angelo

Free

6425 students

Last updated 23 Nov 2022

What you will learn

The app that we'll work on in this course is called SupaVacation. It is an online marketplace for vacation rentals where users can browse through all the properties for rent, bookmark their favorite ones, and even rent their own properties.

Here's a live demo of the app's final version. It is what your app should look likes after completing this course. Feel free to play with it to get an overview of all the features you'll be working on.

So, in this course, you'll learn how to build this full-stack app using the following technologies:

Next.js - The React framework for building the UI of the app and the REST API
NextAuth.js - For implementing passwordless and OAuth authentication
Supabase - For persisting the app data into a PostgreSQL database and storing media files
Prisma - For making it easy to read and write data from our app from and to the database

What the course will cover

Even if this app is a simplified version of a more advanced rental marketplace such as Airbnb, this course covers many topics and technical concepts necessary to build a modern full-stack app.

At the end of this course, you should know how to use all the technologies mentioned above, but most importantly, you will know how to build any full-stack app using those technologies. You will progress at your own pace, and I'll guide you along the way. My goal is to give you the tools and techniques you'll need to build a similar app by yourself after the course.

In other words, this course will not only teach you how to use those technologies, but it will give you the right balance between theory and practice to help you understand all the essential concepts so you can later build your own apps from scratch with confidence.

So, here are all the topics we'll cover:

Building a React app and a REST API using Next.js
Passwordless and OAuth authentication using NextAuth.js
Securing pages and API routes
Modeling data using Prisma
Persisting data into a relational database and storing media files using Supabase
Going to production and deploying to Vercel

Prerequisites

This course is beginner-friendly, but I strongly recommend at least some experience with building apps using React with hooks, since we will be using Next.js which is a React framework.

Besides that, I assume you have a basic knowledge of Node.js for the API implementation part but also a basic understanding of relational databases as we will use Supabase, which comes with PostgreSQL as the database.

Of course, I assume you already have some JavaScript experience. Otherwise, it will be like learning to run before you can walk 😉

Course content

Project overview and prerequisites

Getting help

Development environment

Before you start...

Create a PostgreSQL database

Initialize Prisma in your project

Define a data model in the Prisma Schema

Generate the Prisma Client

Create a table in Supabase with Prisma Migrate

Use Prisma Studio to explore your data

Query data in Next.js with Server-Side Rendering (SSR)

Create data from Next.js using Prisma Client

Query data in Next.js with Static Generation (SSG)

Enable Incremental Static Generation

Store and serve files from Supabase Storage

Add magic link authentication using NextAuth.js

Check the current session and sign out from the app

Use a custom React component to sign in

Customize the sign-in email and send a welcome email to new users

Authenticate users with an OAuth provider (Google)

Define a One-to-Many relation in the Prisma Schema

Create a related record using Prisma Client

Query for data with relations with SSR

Update and delete records with Prisma Client

Instantiate a global Prisma Client instance

Challenge: Like your favorite homes

Deploying Next.js on Vercel

Thank you!

Your instructor

Grégory D'Angelo

CEO & Founder, AlterClass

Greg D'Angelo is a lead instructor and the founder of AlterClass.