Build a Full Stack AI Note Taking App with Next.js and Supabase - Tutorial

Build a Full Stack AI Note Taking App with Next.js and Supabase - Tutorial

freeCodeCamp.org via freeCodeCamp Direct link

⌨️ 1:04:25 Build Home Page

12 of 22

12 of 22

⌨️ 1:04:25 Build Home Page

Class Central Classrooms beta

YouTube videos curated by Class Central.

Classroom Contents

Build a Full Stack AI Note Taking App with Next.js and Supabase - Tutorial

Automatically move to the next video in the Classroom when playback concludes

  1. 1 ⌨️ 0:00:00 Intro
  2. 2 ⌨️ 0:02:44 Start Project
  3. 3 ⌨️ 0:06:48 Add shacn/ui, Dark Mode, and Toast
  4. 4 ⌨️ 0:08:48 Build Header
  5. 5 ⌨️ 0:17:21 Build LogOutButton
  6. 6 ⌨️ 0:22:19 Add Auth Pages
  7. 7 ⌨️ 0:32:12 Create Supabase Project
  8. 8 ⌨️ 0:35:48 Add Supabase Code
  9. 9 ⌨️ 0:40:52 Add Auth Code Logic
  10. 10 ⌨️ 0:50:02 Add Prisma Code
  11. 11 ⌨️ 0:58:35 Build Sidebar
  12. 12 ⌨️ 1:04:25 Build Home Page
  13. 13 ⌨️ 1:09:11 Set Up OpenAI Account
  14. 14 ⌨️ 1:11:22 Build NoteTextInput
  15. 15 ⌨️ 1:18:18 Create Context and Custom Hook
  16. 16 ⌨️ 1:22:06 Write Update Note Server Action
  17. 17 ⌨️ 1:24:27 Finish NewNoteButton
  18. 18 ⌨️ 1:29:23 Finish Sidebar
  19. 19 ⌨️ 1:51:31 Add Middleware
  20. 20 ⌨️ 1:59:43 Add AskAIButton
  21. 21 ⌨️ 2:21:43 Deploy to Vercel
  22. 22 ⌨️ 2:26:02 Outro

Never Stop Learning.

Get personalized course recommendations, track subjects and courses with reminders, and more.

Someone learning on their laptop while sitting on the floor.