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
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
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.
Project overview and prerequisites
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
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.