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

## 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](https://supa-vacation.vercel.app/) 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.

[![SupaVacation - Homepage](https://res.cloudinary.com/alterclass/image/upload/v1645205079/courses/322389284337222224/SupaVacation_-_Homepage_w7fbvl.png)](https://supa-vacation.vercel.app/)

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 😉

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

Project overview and prerequisites

Getting help

Development environment

Before you start...

Getting started

Create a PostgreSQL database

Initialize Prisma in your project

Setting up the database

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

Creating our first schema

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

Interacting with our data from Next.js

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)

Adding authentication to a Next.js app

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

Modelling relations and performing CRUD operations

Deploying Next.js on Vercel

Deployment

Thank you!

Wrapping Up

All courses