Danh mục
Duocmmo Tedu Tin học văn phòng Laravel Cyberlearn Khoá học miễn phí Tất cả khoá học
Get link khoá học
Trang chủ
Development
Web Development
Next.js
The complete guide to building a full-stack app with Next.js

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

Loại khoá học: Web Development

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

image
50.000 VND
65 VND
Đầy Đủ Bài Giảng
Học Online Tiện Lợi
Kích Hoạt Nhanh 2-5 Phút
Thanh toán tự động
Được phép tải xuống

Tổng quan

Nội dung khoá học

Đánh giá

Mô tả

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 course

  • Creating a Next.js app

  • Querying a database using Prisma ORM

  • Securely authenticating users using NextAuth (v5)

  • Creating a Messaging/Chat feature

  • Realtime communication using Pusher.

  • Email verification / Forgot password functionality

  • Designing the User interface using NextUI

  • Styling components with TailwindCSS

  • Utilising server actions to fetch and update the data in Next.js

  • Image uploading

  • Publishing the app to the internet with Vercel

Key features of this course

Comprehensive curriculum:  27 hours of high quality video tutorials, challenges and practical content.

Project based learning:  Build a major project to showcase your new skills

Pre-Requisites

Basic 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. 

Bạn sẽ học được gì

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!

Yêu cầu

  • Some familiarity with HTML, CSS and JavaScript is required

Nội dung khoá học

13 sections

Introduction

5 lectures
Introduction to the course
07:33
Setting up the developer environment
04:46
Course assets and source code
02:10
Getting help
02:59
Where to start - 2 Options
01:51

NextJS Introduction and basics

10 lectures
Introduction to Section 2
09:28
Creating the NextJS project
09:52
What is in the project
08:20
Installing NextUI and React icons
11:48
Routing in NextJS
08:28
Adding a Nav bar to the app
09:29
Creating additional routes
04:39
Making the links active
13:07
Saving our code into source control
11:16
Summary of Section 2
01:35

Authentication Part One

23 lectures
Introduction to Section 3
02:46
Creating a login form
11:40
React hook form introduction
10:32
Validation with Zod
07:05
Creating the register form
07:04
What is NextAuth?
03:44
What is Prisma?
08:35
Setting up NextAuth and Prisma ORM
14:54
Creating the Database
03:56
Configuring Prisma in our app
10:58
Registering a new user
14:27
Handling errors in the form
11:12
Handling errors in the form Part 2
07:23
Signing in users
08:57
Signing in users Part 2
09:54
Adding notification toasts to the app
04:27
Getting the session data
08:12
Using NextAuth callbacks
07:28
Adding a dropdown menu to the Nav bar
10:19
Adding a dropdown menu to the Nav bar Part 2
06:53
Protecting routes using Middleware
10:31
Optional: Using Docker for Postgres
10:44
Summary of Section 3
06:15

Building the UI

13 lectures
Introduction to Section 4
02:33
Updating the Prisma schema
10:49
Seeding data into the Database
13:50
Fetching data from the Database using server actions
07:20
Creating cards for the members
07:10
Styling the member cards
08:28
Using dynamic routes in NextJS
05:31
Adding a Sidebar for the Member detailed page
12:05
Using NextJS Layout pages
06:34
Creating the Member detailed content
11:42
Adding loading indicators
03:52
Adding a custom error page
10:40
Summary of Section 4
01:15

Adding a new feature - likes

9 lectures
Introduction to Section 5
01:55
Updating the Primsa schema for a many to many relationship
05:12
Adding the like toggle function
07:28
Creating a like button
08:04
Fetching the likes
06:04
Addling the list actions
08:21
Adding the list tabs
12:56
Using the useTransition hook for subtle loading
07:11
Summary of Section 5
00:59

Updating resources and image upload

18 lectures
Introduction to Section 6
00:40
Adding the edit member route
07:46
Adding the edit member form
07:52
Adding the edit member form Part 2
10:23
Adding the server action to update the member
12:02
Displaying the images in the member edit component
04:39
Adding the buttons for the image actions
08:27
Where to store the images?
04:02
Setting up Cloudinary
11:12
Adding an image upload button
12:57
Adding the image upload server actions
13:40
Using the Cloudinary image component
07:26
Setting the main image
12:17
Challenge - setting the main image
03:28
Challenge solution
06:30
Deleting an image
05:14
Tidying up the images
12:31
Summary of Section 6
00:57

Adding the Messages feature

17 lectures
Introduction to Section 7
01:08
Setting up Prisma for messages
06:53
Creating a chat form
13:28
Creating the send message action
11:47
Getting the message thread
06:27
Creating a message DTO
14:36
Displaying the messages
14:50
Displaying the messages Part 2
09:54
Improving the message box
06:53
Adding the message sidebar
12:09
Creating the fetch messages action
06:05
Creating the message table
14:01
Adding the message read functionality
06:18
Using custom cells in the NextUI table
09:37
Adding the delete message action
10:21
Finishing up the message table
12:11
Summary of Section 7
00:55

Realtime communications

22 lectures
Introduction to Section 8
05:59
Setting up Pusher
08:44
Adding the live chat functionality
06:45
Receiving the live messages
13:00
Next.js Caching
08:29
Adding the read message feature
14:42
Setting up presence
06:38
Adding a presence store
08:13
Creating a presence channel hook
12:16
Using the presence channel hook
08:40
Creating a presence indicator
04:54
Displaying presence in other components
07:57
Setting up a private channel
08:07
Creating a message store
09:21
Refactoring the message table
09:22
Adding the realtime functionality to the message table
12:21
Making a custom toast for notifications
06:19
Getting the unread message count
12:39
Updating the count based on the event
12:22
Challenge - notifying users of likes
02:41
Challenge solution
06:02
Summary of section 8
03:28

Paging, sorting and filtering

19 lectures
Introduction to Section 9
05:31
Adding the filters component
11:54
Adding the UI for pagination
07:12
Adding the age slider functionality
15:26
Adding the sorting functionality
06:45
Updating the last active property
04:31
Adding the gender filter
06:59
Adding a filter store and hook
15:41
Adding empty state
08:05
Adding loading indicators for the filters
06:43
Adding a pagination store
09:32
Adding the pagination functionality
08:10
Adding the pagination functionality Part 2
13:31
Cursor based pagination
08:31
Cursor based pagination part 2
09:13
Cursor based pagination part 3
10:57
Challenge - filtering out users without photos
03:26
Challenge solution
06:09
Summary of Section 9
01:03

Authentication Part Two

19 lectures
Introduction to Section 10
04:13
Adding a Register wizard part 1
13:42
Adding a Register wizard part 2
08:48
Adding a Register wizard part 3
12:22
Submitting the form
13:28
Setting up tokens and resetting the Database
07:31
Creating the token functions
07:50
Adding an email provider
11:43
Adding the verify email function
14:27
Adding the forgot password functionality part 1
08:07
Adding the forgot password functionality part 2
06:40
Adding the forgot password functionality part 3
13:30
OAuth 2.0 flow
10:09
Social Login part 1
15:38
Social Login part 2
12:15
Social Login part 3
04:07
Adding a complete profile form for social login
13:28
Adding the Google provider
09:59
Summary of Section 10
06:15

Role based access

10 lectures
Introduction to Section 11
01:42
Adding the roles to Prisma
07:23
Adding the role to the session data
08:21
Creating an admin page
06:45
Getting the session info in the client
07:27
Adding the photo moderation functionality part 1
11:51
Adding the photo moderation functionality part 2
09:46
Adding the photo moderation functionality part 3
09:03
Adding the photo moderation functionality part 4
06:33
Summary of Section 11
01:12

Polishing and Publishing

12 lectures
Introduction to Section 12
02:03
Adding a modal
08:20
Adding a confirmation modal
04:07
Adding an image modal
09:31
Updating the home page
12:22
Preparing the app for publishing
08:38
Deploying the app
12:28
Adding seed data for the production app
07:58
Adding a spinner to the likes and deploying again
10:35
Loose ends
10:42
Final testing of the app
09:29
End of course summary
03:53

Appendix A - Introduction to React (Optional)

15 lectures
Introduction to Appendix A
03:29
Creating the React project using Vite
10:26
Adding the hero editor
14:05
Displaying a list of heroes
16:47
Adding a feature component
08:39
Adding an API server
02:55
Async code and the useEffect
09:00
Adding routing to the app using React Router
12:43
Adding a nav bar
04:42
Adding a details page route
10:41
Adding React context
07:49
Using react context
13:50
Updating a hero
11:42
Creating a hero
12:53
Deleting a hero
08:09

Đánh giá của học viên

Chưa có đánh giá
Course Rating
5
0%
4
0%
3
0%
2
0%
1
0%

Bình luận khách hàng

Viết Bình Luận

Bạn đánh giá khoá học này thế nào?

Khoá học liên quan

Appium -Mobile Testing (Android/IOS) from Scratch+Frameworks

Appium -Mobile Testing (Android/IOS) from Scratch+Frameworks

95 VND
50.000 VND
Appium - Mobile Testing with Latest 2.0 and Live Projects

Appium - Mobile Testing with Latest 2.0 and Live Projects

70 VND
50.000 VND
Deep Learning for Object Detection with Python and PyTorch

Deep Learning for Object Detection with Python and PyTorch

899.000 VND
50.000 VND
Full Android Development Masterclass | 14 Real Apps-46 Hours

Full Android Development Masterclass | 14 Real Apps-46 Hours

1.699.000 VND
50.000 VND
Go Java Full Stack with Spring Boot and Angular

Go Java Full Stack with Spring Boot and Angular

90 VND
50.000 VND
Machine Learning Practical Workout | 8 Real-World Projects

Machine Learning Practical Workout | 8 Real-World Projects

79 VND
50.000 VND
WordPress 2024: The Complete WordPress Website Course

WordPress 2024: The Complete WordPress Website Course

90 VND
50.000 VND
Android App Development Master Course with Java | Android

Android App Development Master Course with Java | Android

99 VND
50.000 VND
Unreal Engine 5: Soulslike Melee Combat System

Unreal Engine 5: Soulslike Melee Combat System

1.399.000 VND
50.000 VND
ASP.NET Core Web Application Using Razor Pages

ASP.NET Core Web Application Using Razor Pages

1.699.000 VND
50.000 VND
Build Undetectable Malware Using C Language: Ethical Hacking

Build Undetectable Malware Using C Language: Ethical Hacking

75 VND
50.000 VND
Angular - The Complete Guide (2024 Edition)

Angular - The Complete Guide (2024 Edition)

120 VND
50.000 VND
.NET 8 Microservices: DDD, CQRS, Vertical/Clean Architecture

.NET 8 Microservices: DDD, CQRS, Vertical/Clean Architecture

100 VND
50.000 VND
Unreal Engine 5: The Complete Beginner's Course

Unreal Engine 5: The Complete Beginner's Course

1.899.000 VND
50.000 VND
Complete WordPress Developer Course 2023 - Plugins & Themes

Complete WordPress Developer Course 2023 - Plugins & Themes

1.999.000 VND
50.000 VND
The Data Science Course: Complete Data Science Bootcamp 2024

The Data Science Course: Complete Data Science Bootcamp 2024

140 VND
50.000 VND
image

Đăng ký get khoá học Udemy - Unica - Gitiho giá chỉ 50k!

Get khoá học giá rẻ ngay trước khi bị fix.

Get khoá học cho tôi