Full Stack Markdown App With Next.js

Course Curriculum

Chapter 1: Initial Setup

Lecture 1: Demo

Lecture 2: Initialize NextJS Project

Lecture 3: Create GitHub Repo

Lecture 4: Clean Up Home Page

Lecture 5: Dark Mode And Light Mode Styles

Chapter 2: Database Development

Lecture 1: Create Database

Lecture 2: Initial Schema

Lecture 3: Check In Initial Schema

Lecture 4: Install bcrypt, faker, pg, and tsx

Lecture 5: Run A TypeScript Script With tsx

Lecture 6: Connect To Postgres With pg

Lecture 7: Seed Database With Fake Data

Chapter 3: Home Page

Lecture 1: Route Groups

Lecture 2: Build The Home Page

Chapter 4: Log In Page

Lecture 1: Build The Log In Form

Lecture 2: Install zod And jose

Lecture 3: Implement SQL Helper

Lecture 4: Update Configuration For JWT

Lecture 5: Implement The Log In Server Action

Lecture 6: Style The Log In Form

Lecture 7: Dispatch Server Action From Log In Form

Chapter 5: Sign Up Page

Lecture 1: Implement The Sign Up Server Action

Lecture 2: Build The Sign Up Form And Dispatch Action

Lecture 3: Expire Cookie

Chapter 6: Dashboard Page

Lecture 1: Parallel Routes

Lecture 2: Display Username On Sidebar

Lecture 3: Auth Middleware

Lecture 4: Notes Context Diagram

Lecture 5: Reducers

Lecture 6: Implement Initial Notes Context

Lecture 7: Use Notes Provider

Chapter 7: Sidebar Page

Lecture 1: Get Notes API Route

Lecture 2: Authenticate Notes API Routes

Lecture 3: Install Luxon And Implement Fetch Notes API Helper

Lecture 4: Implement Note Container

Lecture 5: Style The Note

Lecture 6: Create Note API Endpoint

Lecture 7: Create Note Btn

Lecture 8: Sort Select Component

Lecture 9: Implement Sort Notes Function

Lecture 10: Drag And Drop Events

Lecture 11: Update Parent API Endpoint

Lecture 12: Testing Update Parent API Endpoint

Lecture 13: Drop Event

Lecture 14: Update Current Drag Id

Lecture 15: Prevent Dragging Note Into Self

Lecture 16: Update Parent On Drop

Lecture 17: Dispatch Change Parent

Lecture 18: Implement Notes Map

Lecture 19: Implement Change Parent

Lecture 20: Render Child Notes With Recursive Component

Lecture 21: Debugging The Recursive Component

Lecture 22: Logging By Reference Vs Value

Lecture 23: Implement Expand Button

Lecture 24: Check If Note Is Descendent Note

Lecture 25: Conditional Styling With clsx

Lecture 26: Finalize Sidebar

Chapter 8: Content Page

Lecture 1: Use Search Params And Use Pathname

Lecture 2: Fetch Note API Endpoint

Lecture 3: Fetch Note And Render Title

Lecture 4: Update Note API Endpoint

Lecture 5: Install Use Debounce And Implement Title Input

Lecture 6: Dispatch Update Note

Lecture 7: React Ace And React Markdown

Lecture 8: Style React Markdown

Lecture 9: Publish Checkbox

Chapter 9: Published Page

Lecture 1: Published Page

Lecture 2: Published Note Detail View

Lecture 3: Search Component

Lecture 4: Wire Up Search Component

Lecture 5: Add Sort Param To Get Notes

Chapter 10: Deployment

Lecture 1: Import Project To Vercel

Lecture 2: Fix Lint Error

Lecture 3: View The Deployed Home Page

Lecture 4: Attach Postgres DB To Project

Lecture 5: Connect To Prod Postgres And Run Initial SQL

Lecture 6: Run Seed Script Against Production

Lecture 7: Fix Connection Errors On Prod

Lecture 8: Testing The App On Prod

Chapter 11: Congratulations

Lecture 1: Congratulations