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

Explore our courses and get started today.

Ready to build modern web apps?

The Modern Dev

Build a complete e-commerce app with React, Next.js, GraphQL, Yoga, Prisma, & Stripe.

## Course overview

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.

This course will give you everything you need to **succeed as a modern
JavaScript/React developer** and level up your career.

**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:

1. **You'll learn by building a scalable, production-ready real-world
   application.**
2. **You'll learn from a senior full-stack developer with several years of experience and get support from our growing community along the
   way.**
3. **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:

- Type-safety
- Database setup
- Database migrations
- User management
- Authentication
- 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
- Testing JavaScript applications
- Deployment
- ...and more!

## Prerequisites

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.

Of course, I also assume you already have **some JavaScript experience**.
Otherwise, it will be like learning to run before you can walk 😉. But, you
don't need to be a JavaScript expert and don't need any prior TypeScript
experience, as I'll explain every single piece of code.

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.
- Anyone who wants to improve their JavaScript skills and learns both
  fundamental and advanced concepts in practice.

The Full-Stack Developer in 2022 (w/ Next.js, GraphQL, and Prisma)

50% off the original value of $189. With this reward, you are saving $100 | Lifetime and full access to the course | Access to our Discord channel | Complete source code | Priority access to all future courses

Early bird

Exclusive 1-on-1 coding session with the instructor (30min) | Lifetime and full access to the course | Access to our Discord channel | Complete source code | Priority access to all future courses

Exclusive coding session (30min)

2x Exclusive 1-on-1 coding session with the instructor (30min) | Lifetime and full access to the course | Access to our Discord channel | Complete source code | Priority access to all future courses

All courses