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

By freeCodeCamp.org
Published: Mar 18, 2025

“
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

—

Learn to code for free and get a developer job: https://www.freecodecamp.org

Read hundreds of articles on programming: https://freecodecamp.org/news

[READ MORE]

”