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

This tutorial guides learners through building and deploying a full-stack AI note-taking app with Next.js, Supabase, Prisma, authentication, OpenAI integration, and Vercel.

Syllabus

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