+- Softwarez.Info - Software's World! (https://softwarez.info)
+-- Forum: Library Zone (https://softwarez.info/Forum-Library-Zone)
+--- Forum: Video Tutorials (https://softwarez.info/Forum-Video-Tutorials)
+--- Thread: The Complete Guide To Building A Full-Stack App With Next.Js (/Thread-The-Complete-Guide-To-Building-A-Full-Stack-App-With-Next-Js)
The Complete Guide To Building A Full-Stack App With Next.Js - BaDshaH - 05-10-2024
![[Image: bf356e49d9ae6ae9c2625338ede29326.jpg]](https://i123.fastpic.org/big/2024/0510/26/bf356e49d9ae6ae9c2625338ede29326.jpg)
Published 5/2024
MP4 | Video: h264, 1920x1080 | Audio: AAC, 44.1 KHz
Language: English | Size: 13.81 GB | Duration: 27h 6m
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
Homepage