Full Stack Book

Introduction

Welcome to "Full Stack Next.js: Professional Network App"! We're thrilled to have you on board for this exciting journey into the world of full stack web development. Throughout this course, you'll delve into the intricacies of Next.js, gain proficiency in database interactions, refine your design skills with TailwindCSS, and explore a myriad of advanced features that will elevate your proficiency in creating robust web applications. Whether you're a seasoned developer or just starting, get ready for an enriching learning experience that will empower you to build cutting-edge, business dashboard applications. Let's embark on this adventure together and unlock the full potential of Next.js!

Full Stack LinkedIn Prototype With Next.js

Section 1: Introduction

Section 2: Initial Setup

1.
Initialize Nextjs Project
00:47
2.
Open Project Directory
00:38
3.
Cleanup Home Page And Global Css
01:43
4.
Home Page Design Review
00:44
5.
Install Mantine Dependencies
00:57
6.
Mantine Setup
01:59
7.
Hard Code Dark Mode
01:19
8.
Style The Home Page
02:59
9.
Mantine Vs Tailwindcss
01:39

Section 3: Caching

1.
Caching Introduction
00:52
2.
Cached Page Example
02:35
3.
Not Cached Page Example
01:35
4.
Time Based Revalidation Example
01:23
5.
On Demand Revalidation Example
03:34
6.
Link Prefetching Example
02:53
7.
What Makes A Page Dynamic
00:57

Section 4: Authentication Nextauth Drizzleorm

1.
Authentication Introduction
01:20
2.
Create Database
02:15
3.
Install Dependencies
00:32
4.
Create Schema
01:05
5.
Create Config File
02:38
6.
Create Drizzle Db Instance
03:05
7.
Create Auth Options
01:53
8.
Create Nextauth Api Routes
01:16
9.
Create Github Oauth App
02:15
10.
Copy Env Variables Into Env Local
01:58
11.
Create Drizzle Config
01:34
12.
Run The Push Command
01:47
13.
Session Provider
02:50
14.
Login Button Component
02:21
15.
Test The Login Button
00:41
16.
Create Restricted Api Route
02:26
17.
Create Restricted Page
02:10
18.
Create Custom Signin Page
05:01
19.
Test Custom Signin Page
00:37
20.
Problem With Session Provider At Root Layout
01:08
21.
Route Group For Dynamic Routes
04:29
22.
Style The Sign In Page
01:07
23.
Drizzle Orm
03:09

Section 5: Dashboard Layout Appshell Mobile Burger Nav Links

Section 6: People Page Database Seed Pagination Skeletons

1.
People Page Introduction
00:41
2.
Seed Users Script
08:13
3.
Seed Job Titles
03:41
4.
Render User List
02:39
5.
Page Search Params
02:57
6.
Limit And Offset
01:25
7.
Count And Num Pages
02:15
8.
Pagination Container
02:04
9.
Pagination On Change
03:31
10.
Highlight Active Page
03:29
11.
User Card And Grid Layout
06:42
12.
Loading Skeletons
06:02
13.
Path Param And Link To Person Detail
02:10
14.
Loading Page For Person Detail
01:07

Section 7: Search Page Ilike Fuzzy Matching

Section 8: Skills List Page Drizzleorm Aggregates

Section 9: Skill Detail Page Sorting Query Building

Section 10: Profile Page Rich Text Editor Forms Notifications

1.
Profile Page Introduction
00:46
2.
Server Actions Vs Api Routes
04:46
3.
Server Component Vs Client Component
01:40
4.
Install Zod
00:24
5.
Update User Action
06:16
6.
Bio Field
00:45
7.
Update User Action Continued
02:32
8.
User Form
04:58
9.
Fix Session Bug
00:45
10.
User Form Submission
03:09
11.
Mantine Notification System
05:37
12.
Rich Text Editor Stub
05:30
13.
Wire Up The Editor
03:49
14.
Editor Style
01:48
15.
Working With Forms And Server Actions
02:11
16.
Fix Use Effect Bug
00:47

Section 11: Manage Skills Page Ratings Modals Select Inputs

1.
Manage Skills Introduction
01:15
2.
Profile Tabs
04:53
3.
Display List Of Ratings
04:53
4.
Style The Table
02:17
5.
Skill Rating Form Stub
03:47
6.
Update Skill Rating And Revalidate Path
09:35
7.
Add Skill Modal Intro
00:46
8.
Add Users To Skills Action
05:48
9.
Add User To Skill Button
03:23
10.
Select From All Skills
03:51
11.
Wire Up The Form To Action
05:11
12.
Delete User To Skill Button
04:45

Section 12: Mantine Colors

1.
Mantine Color Scheme
01:43
2.
Mantine Theme Object
02:16
3.
Tailwindcss With Mantine Dark Mode
03:18

Section 13: Dashboard Page Charts

1.
Dashboard Page Charts
06:38
2.
Fix Skills Chart
00:21

Section 14: Person Detail Page And Recommendation System

Section 15: Deployment

1.
Deployment Introduction
00:37
2.
Deploy App To Vercel
01:18
3.
Check Deployment On Vercel
01:00
4.
Create Postgres Database On Prod
02:20
5.
Create Oauth App For Prod
01:28
6.
Add Environment Variables
03:09
7.
Generate Sql Migration File
00:52
8.
Migrate Script
01:19
9.
Turn Script Into Api Route
04:43
10.
Secure Scripts Api With Middleware
06:05
11.
Add Scripts Api Key Environment Variable To Prod
00:25
12.
Migrate Api Route
02:38
13.
Attempt Deployment To Prod
01:06
14.
Add Sslmode Require To Postgres Url
04:15
15.
Attempt Deployment To Prod Again
00:20
16.
Attempt Relative Path Configuration
00:57
17.
Run Sql Using Table Plus As Workaround
01:42
18.
Make Seed Scripts Into Api Routes
04:38
19.
Close Db Connection Only For Scripts
02:05
20.
Problem With Static Api Routes
02:18
21.
Opt Out Of Caching With Force Dynamic
00:52
22.
Verify Scripts Api Routes No Longer Cached
01:32
23.
Use Css Layer To Fix Tailwind Mantine Conflict
02:03
24.
Testing The App In Production
01:33
25.
Install Pg Trgm On Production
02:19

Section 16: Conclusion

1.
Congratulations