Full Stack Book

Demo

Welcome to the "Full Stack Development With Next.js: Markdown App" Course! Are you prepared for an enlightening journey into the dynamic realm of Full Stack Web Development? Get ready to dive in as we guide you through the process of creating and launching a robust web application from scratch. Throughout this course, our focus will be on exploring key technologies, including Next.js, PostgreSQL, TailwindCSS, and Vercel. Together, we'll expedite the development and deployment of a fully functional application, ensuring you develop a solid grasp of each technology's essential aspects. Get set to refine your Full Stack Development skills!

Full Stack Markdown App With Next.js

Section 1: Initial Setup

1. Demo
03:49
2. Initialize Nextjs Project
02:08
3. Create Github Repo
01:03
4. Clean Up Home Page
00:43
5. Dark Mode And Light Mode Styles
01:24

Section 2: Database Development

1.
Create Database
02:01
2.
Initial Schema
04:30
3.
Check In Initial Schema
01:10
4.
Install Bcrypt Faker Pg And Tsx
02:20
5.
Run A Typescript Script With Tsx
01:50
6.
Connect To Postgres With Pg
07:32
7.
Seed Database With Fake Data
09:34

Section 3: Home Page

1.
Route Groups
05:08
2.
Build The Home Page
02:52

Section 4: Login Page

1.
Build The Login Form
03:10
2.
Install Zod And Jose
01:04
3.
Implement Sql Helper
02:41
4.
Update Configuration For Jwt
01:16
5.
Implement The Login Server Action
09:09
6.
Style The Login Form
02:30
7.
Dispatch Server Action From Login Form
04:32

Section 5: Signup Page

1.
Implement The Signup Server Action
10:38
2.
Build The Signup Form And Dispatch Action
10:14
3.
Expire Cookie
03:01

Section 6: Dashboard Page

1.
Parallel Routes
04:26
2.
Display Username On Sidebar
04:08
3.
Auth Middleware
04:10
4.
Notes Context Diagram
02:22
5.
Reducers
01:54
6.
Implement Initial Notes Context
07:25
7.
Use Notes Provider
00:58

Section 7: Sidebar Page

1.
Get Notes Api Route
08:36
2.
Implement Sort Notes Function
07:19
3.
Drag And Drop Events
04:38
4.
Update Parent Api Endpoint
10:02
5.
Testing Update Parent Api Endpoint
01:20
6.
Drop Event
02:12
7.
Update Current Drag Id
04:11
8.
Prevent Dragging Note Into Self
02:40
9.
Update Parent On Drop
04:32
10.
Dispatch Change Parent
03:40
11.
Implement Notes Map
04:20
12.
Authenticate Notes Api Routes
05:16
13.
Implement Change Parent
06:27
14.
Render Child Notes With Recursive Component
04:18
15.
Debugging The Recursive Component
03:48
16.
Logging By Reference Vs Value
01:37
17.
Implement Expand Button
05:07
18.
Check If Note Is Descendent Note
04:48
19.
Conditional Styling With Clsx
08:45
20.
Finalize Sidebar
00:54
21.
Install Luxon And Implement Fetch Notes Api Helper
05:14
22.
Implement Note Container
07:07
23.
Implement Note List
05:50
24.
Style The Note
01:16
25.
Create Note Api Endpoint
02:50
26.
Create Note Btn
06:28
27.
Sort Select Component
05:17

Section 8: Content Page

1.
Use Search Params And Use Pathname
07:14
2.
Fetch Note Api Endpoint
03:26
3.
Fetch Note And Render Title
04:08
4.
Update Note Api Endpoint
08:18
5.
Install Use Debounce And Implement Title Input
07:42
6.
Dispatch Update Note
05:15
7.
React Ace And React Markdown
06:55
8.
Style React Markdown
03:08
9.
Publish Checkbox
02:33

Section 9: Published Page

Section 10: Deployment

1.
Import Project To Vercel
02:22
2.
Fix Lint Error
01:57
3.
View The Deployed Home Page
01:03
4.
Attach Postgres Db To Project
01:15
5.
Connect To Prod Postgres And Run Initial Sql
02:32
6.
Run Seed Script Against Production
03:47
7.
Fix Connection Errors On Prod
08:46
8.
Testing The App On Prod
01:41

Section 11: Congratulations

1.
Congratulations
00:04