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

Post Content

Build a full-stack note-taking app with the Next.js 15 App Router, Supabase for authentication and database management, Prisma ORM, and shadcn for clean, modern styling. We will also integrate the OpenAI API to add ChatGPT functionality so you can interact with your notes, and deploy the finished app to the web with Vercel.

Course from @coleblender
Website: https://coleblender.com

GitHub Repo: https://github.com/ColeBlender/goat-notes

Try interactive JavaScript courses we love, right in your browser: https://scrimba.com/freeCodeCamp-JavaScript (Made possible by a grant from our friends at Scrimba)

Contents
(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

Thanks to our Champion and Sponsor supporters:
Drake Milly
Ulises Moralez
Goddard Tan
David MG
Matthew Springman
Claudio
Oscar R.
jedi-or-sith
Nattira Maneerat
Justin Hual