The Complete Guide To Building A Full-Stack App With Next.Js

How to build a complete full-stack real-world app using NextJS, Prisma ORM, TailwindCSS, NextUI and NextAuth

What you'll learn

Set up and configure authentication in a NextJS app using NextAuth v5

Use Prisma ORM in a NextJS app to query and update a database

Use NextUI components to build a good looking User Interface

Use TailwindCSS to style elements in a NextJS application

Fetching data with NextJS server actions and the app router

Learn to build a real-world complete full-stack application using NextJS!

Requirements

Some familiarity with HTML, CSS and JavaScript is required

Description

Dive into the world of full-stack development with this comprehensive course designed with beginners in mind.   This course covers everything from the fundamentals of Next.js to deploying a full-scale application.  Whether you are new to programming or looking to expand your existing skills, this course will guide you through every step of building a robust, database driven application.Here are some of the things that are covered in this courseCreating a Next.js appQuerying a database using Prisma ORMSecurely authenticating users using NextAuth (v5)Creating a Messaging/Chat featureRealtime communication using Pusher.Email verification / Forgot password functionalityDesigning the User interface using NextUIStyling components with TailwindCSSUtilising server actions to fetch and update the data in Next.jsImage uploadingPublishing the app to the internet with VercelKey features of this courseComprehensive curriculum:  27 hours of high quality video tutorials, challenges and practical content.Project based learning:  Build a major project to showcase your new skillsPre-RequisitesBasic knowledge of JavaScript, HTML and CSS is recommended. Tools you need for this course In this course all the lessons are demonstrated using Visual Studio Code, a free (and fantastic) cross platform code editor.   You can of course use any code editor you like and any Operating system you like… as long as it's Windows, Linux or Mac.  Is this course for you?This course is very practical, about 90%+ of the lessons will involve you coding along with me on this project.  If you are the type of person who gets the most out of learning by doing, then this course is definitely for you.  On this course we will build an example Dating Application.  All you will need to get started is a computer with your favourite operating system, and a passion for learning how to build a full featured full-stack app based on Next.js. 

Overview

Section 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

Section 2: NextJS Introduction and basics

Lecture 6 Introduction to Section 2

Lecture 7 Creating the NextJS project

Lecture 8 What is in the project

Lecture 9 Installing NextUI and React icons

Lecture 10 Routing in NextJS

Lecture 11 Adding a Nav bar to the app

Lecture 12 Creating additional routes

Lecture 13 Making the links active

Lecture 14 Saving our code into source control

Lecture 15 Summary of Section 2

Section 3: Authentication Part One

Lecture 16 Introduction to Section 3

Lecture 17 Creating a login form

Lecture 18 React hook form introduction

Lecture 19 Validation with Zod

Lecture 20 Creating the register form

Lecture 21 What is NextAuth?

Lecture 22 What is Prisma?

Lecture 23 Setting up NextAuth and Prisma ORM

Lecture 24 Creating the Database

Lecture 25 Configuring Prisma in our app

Lecture 26 Registering a new user

Lecture 27 Handling errors in the form

Lecture 28 Handling errors in the form Part 2

Lecture 29 Signing in users

Lecture 30 Signing in users Part 2

Lecture 31 Adding notification toasts to the app

Lecture 32 Getting the session data

Lecture 33 Using NextAuth callbacks

Lecture 34 Adding a dropdown menu to the Nav bar

Lecture 35 Adding a dropdown menu to the Nav bar Part 2

Lecture 36 Protecting routes using Middleware

Lecture 37 Optional: Using Docker for Postgres

Lecture 38 Summary of Section 3

Section 4: Building the UI

Lecture 39 Introduction to Section 4

Lecture 40 Updating the Prisma schema

Lecture 41 Seeding data into the Database

Lecture 42 Fetching data from the Database using server actions

Lecture 43 Creating cards for the members

Lecture 44 Styling the member cards

Lecture 45 Using dynamic routes in NextJS

Lecture 46 Adding a Sidebar for the Member detailed page

Lecture 47 Using NextJS Layout pages

Lecture 48 Creating the Member detailed content

Lecture 49 Adding loading indicators

Lecture 50 Adding a custom error page

Lecture 51 Summary of Section 4

Section 5: Adding a new feature - likes

Lecture 52 Introduction to Section 5

Lecture 53 Updating the Primsa schema for a many to many relationship

Lecture 54 Adding the like toggle function

Lecture 55 Creating a like button

Lecture 56 Fetching the likes

Lecture 57 Addling the list actions

Lecture 58 Adding the list tabs

Lecture 59 Using the useTransition hook for subtle loading

Lecture 60 Summary of Section 5

Section 6: Updating resources and image upload

Lecture 61 Introduction to Section 6

Lecture 62 Adding the edit member route

Lecture 63 Adding the edit member form

Lecture 64 Adding the edit member form Part 2

Lecture 65 Adding the server action to update the member

Lecture 66 Displaying the images in the member edit component

Lecture 67 Adding the buttons for the image actions

Lecture 68 Where to store the images?

Lecture 69 Setting up Cloudinary

Lecture 70 Adding an image upload button

Lecture 71 Adding the image upload server actions

Lecture 72 Using the Cloudinary image component

Lecture 73 Setting the main image

Lecture 74 Challenge - setting the main image

Lecture 75 Challenge solution

Lecture 76 Deleting an image

Lecture 77 Tidying up the images

Lecture 78 Summary of Section 6

Section 7: Adding the Messages feature

Lecture 79 Introduction to Section 7

Lecture 80 Setting up Prisma for messages

Lecture 81 Creating a chat form

Lecture 82 Creating the send message action

Lecture 83 Getting the message thread

Lecture 84 Creating a message DTO

Lecture 85 Displaying the messages

Lecture 86 Displaying the messages Part 2

Lecture 87 Improving the message box

Lecture 88 Adding the message sidebar

Lecture 89 Creating the fetch messages action

Lecture 90 Creating the message table

Lecture 91 Adding the message read functionality

Lecture 92 Using custom cells in the NextUI table

Lecture 93 Adding the delete message action

Lecture 94 Finishing up the message table

Lecture 95 Summary of Section 7

Section 8: Realtime communications

Lecture 96 Introduction to Section 8

Lecture 97 Setting up Pusher

Lecture 98 Adding the live chat functionality

Lecture 99 Receiving the live messages

Lecture 100 Next.js Caching

Lecture 101 Adding the read message feature

Lecture 102 Setting up presence

Lecture 103 Adding a presence store

Lecture 104 Creating a presence channel hook

Lecture 105 Using the presence channel hook

Lecture 106 Creating a presence indicator

Lecture 107 Displaying presence in other components

Lecture 108 Setting up a private channel

Lecture 109 Creating a message store

Lecture 110 Refactoring the message table

Lecture 111 Adding the realtime functionality to the message table

Lecture 112 Making a custom toast for notifications

Lecture 113 Getting the unread message count

Lecture 114 Updating the count based on the event

Lecture 115 Challenge - notifying users of likes

Lecture 116 Challenge solution

Lecture 117 Summary of section 8

Section 9: Paging, sorting and filtering

Lecture 118 Introduction to Section 9

Lecture 119 Adding the filters component

Lecture 120 Adding the UI for pagination

Lecture 121 Adding the age slider functionality

Lecture 122 Adding the sorting functionality

Lecture 123 Updating the last active property

Lecture 124 Adding the gender filter

Lecture 125 Adding a filter store and hook

Lecture 126 Adding empty state

Lecture 127 Adding loading indicators for the filters

Lecture 128 Adding a pagination store

Lecture 129 Adding the pagination functionality

Lecture 130 Adding the pagination functionality Part 2

Lecture 131 Cursor based pagination

Lecture 132 Cursor based pagination part 2

Lecture 133 Cursor based pagination part 3

Lecture 134 Challenge - filtering out users without photos

Lecture 135 Challenge solution

Lecture 136 Summary of Section 9

Section 10: Authentication Part Two

Lecture 137 Introduction to Section 10

Lecture 138 Adding a Register wizard part 1

Lecture 139 Adding a Register wizard part 2

Lecture 140 Adding a Register wizard part 3

Lecture 141 Submitting the form

Lecture 142 Setting up tokens and resetting the Database

Lecture 143 Creating the token functions

Lecture 144 Adding an email provider

Lecture 145 Adding the verify email function

Lecture 146 Adding the forgot password functionality part 1

Lecture 147 Adding the forgot password functionality part 2

Lecture 148 Adding the forgot password functionality part 3

Lecture 149 OAuth 2.0 flow

Lecture 150 Social Login part 1

Lecture 151 Social Login part 2

Lecture 152 Social Login part 3

Lecture 153 Adding a complete profile form for social login

Lecture 154 Adding the Google provider

Lecture 155 Summary of Section 10

Section 11: Role based access

Lecture 156 Introduction to Section 11

Lecture 157 Adding the roles to Prisma

Lecture 158 Adding the role to the session data

Lecture 159 Creating an admin page

Lecture 160 Getting the session info in the client

Lecture 161 Adding the photo moderation functionality part 1

Lecture 162 Adding the photo moderation functionality part 2

Lecture 163 Adding the photo moderation functionality part 3

Lecture 164 Adding the photo moderation functionality part 4

Lecture 165 Summary of Section 11

Section 12: Polishing and Publishing

Lecture 166 Introduction to Section 12

Lecture 167 Adding a modal

Lecture 168 Adding a confirmation modal

Lecture 169 Adding an image modal

Lecture 170 Updating the home page

Lecture 171 Preparing the app for publishing

Lecture 172 Deploying the app

Lecture 173 Adding seed data for the production app

Lecture 174 Adding a spinner to the likes and deploying again

Lecture 175 Loose ends

Lecture 176 Final testing of the app

Lecture 177 End of course summary

Section 13: Appendix A - Introduction to React (Optional)

Lecture 178 Introduction to Appendix A

Lecture 179 Creating the React project using Vite

Lecture 180 Adding the hero editor

Lecture 181 Displaying a list of heroes

Lecture 182 Adding a feature component

Lecture 183 Adding an API server

Lecture 184 Async code and the useEffect

Lecture 185 Adding routing to the app using React Router

Lecture 186 Adding a nav bar

Lecture 187 Adding a details page route

Lecture 188 Adding React context

Lecture 189 Using react context

Lecture 190 Updating a hero

Lecture 191 Creating a hero

Lecture 192 Deleting a hero

Beginner developers who wish to learn how to buld an app using NextJS