The complete guide to building a full-stack app with Next.js

Course Curriculum

Chapter 1: Introduction

Lecture 1: Introduction to the course

Lecture 2: Setting up the developer environment

Lecture 3: Course assets and source code

Lecture 4: Getting help

Lecture 5: Where to start – 2 Options

Chapter 2: NextJS Introduction and basics

Lecture 1: Introduction to Section 2

Lecture 2: Creating the NextJS project

Lecture 3: What is in the project

Lecture 4: Installing NextUI and React icons

Lecture 5: Routing in NextJS

Lecture 6: Adding a Nav bar to the app

Lecture 7: Creating additional routes

Lecture 8: Making the links active

Lecture 9: Saving our code into source control

Lecture 10: Summary of Section 2

Chapter 3: Authentication Part One

Lecture 1: Introduction to Section 3

Lecture 2: Creating a login form

Lecture 3: React hook form introduction

Lecture 4: Validation with Zod

Lecture 5: Creating the register form

Lecture 6: What is NextAuth?

Lecture 7: What is Prisma?

Lecture 8: Setting up NextAuth and Prisma ORM

Lecture 9: Creating the Database

Lecture 10: Configuring Prisma in our app

Lecture 11: Registering a new user

Lecture 12: Handling errors in the form

Lecture 13: Handling errors in the form Part 2

Lecture 14: Signing in users

Lecture 15: Signing in users Part 2

Lecture 16: Adding notification toasts to the app

Lecture 17: Getting the session data

Lecture 18: Using NextAuth callbacks

Lecture 19: Adding a dropdown menu to the Nav bar

Lecture 20: Adding a dropdown menu to the Nav bar Part 2

Lecture 21: Protecting routes using Middleware

Lecture 22: Optional: Using Docker for Postgres

Lecture 23: Summary of Section 3

Chapter 4: Building the UI

Lecture 1: Introduction to Section 4

Lecture 2: Updating the Prisma schema

Lecture 3: Seeding data into the Database

Lecture 4: Fetching data from the Database using server actions

Lecture 5: Creating cards for the members

Lecture 6: Styling the member cards

Lecture 7: Using dynamic routes in NextJS

Lecture 8: Adding a Sidebar for the Member detailed page

Lecture 9: Using NextJS Layout pages

Lecture 10: Creating the Member detailed content

Lecture 11: Adding loading indicators

Lecture 12: Adding a custom error page

Lecture 13: Summary of Section 4

Chapter 5: Adding a new feature – likes

Lecture 1: Introduction to Section 5

Lecture 2: Updating the Primsa schema for a many to many relationship

Lecture 3: Adding the like toggle function

Lecture 4: Creating a like button

Lecture 5: Fetching the likes

Lecture 6: Addling the list actions

Lecture 7: Adding the list tabs

Lecture 8: Using the useTransition hook for subtle loading

Lecture 9: Summary of Section 5

Chapter 6: Updating resources and image upload

Lecture 1: Introduction to Section 6

Lecture 2: Adding the edit member route

Lecture 3: Adding the edit member form

Lecture 4: Adding the edit member form Part 2

Lecture 5: Adding the server action to update the member

Lecture 6: Displaying the images in the member edit component

Lecture 7: Adding the buttons for the image actions

Lecture 8: Where to store the images?

Lecture 9: Setting up Cloudinary

Lecture 10: Adding an image upload button

Lecture 11: Adding the image upload server actions

Lecture 12: Using the Cloudinary image component

Lecture 13: Setting the main image

Lecture 14: Challenge – setting the main image

Lecture 15: Challenge solution

Lecture 16: Deleting an image

Lecture 17: Tidying up the images

Lecture 18: Summary of Section 6

Chapter 7: Adding the Messages feature

Lecture 1: Introduction to Section 7

Lecture 2: Setting up Prisma for messages

Lecture 3: Creating a chat form

Lecture 4: Creating the send message action

Lecture 5: Getting the message thread

Lecture 6: Creating a message DTO

Lecture 7: Displaying the messages

Lecture 8: Displaying the messages Part 2

Lecture 9: Improving the message box

Lecture 10: Adding the message sidebar

Lecture 11: Creating the fetch messages action

Lecture 12: Creating the message table

Lecture 13: Adding the message read functionality

Lecture 14: Using custom cells in the NextUI table

Lecture 15: Adding the delete message action