Full Stack Markdown App With Next.js

• Course
• Certificate

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

• 1.

  Published Page

  06:41
• 2.

  Published Note Detail View

  05:44
• 3.

  Search Component

  05:55
• 4.

  Wire Up Search Component

  02:48
• 5.

  Add Sort Param To Get Notes

  09:50

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