Full Stack Book

Use Css Layer To Fix Tailwind Mantine Conflict

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