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

Channel:

freeCodeCamp.org

Subscribers:

10,900,000

Published on March 18, 2025 3:12:29 PM ● Video Link: https://www.youtube.com/watch?v=6ChzCaljcaI

Duration: 0:00

40,129 views

1,271

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‬
Websitehttps://coleblender.com/om

💻 GitHub Repohttps://github.com/ColeBlender/goat-notes..

❤ ️ Try interactive JavaScript courses we love, right in your browshttps://scrimba.com/freeCodeCamp-JavaScripta... (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

https://www.freecodecamp.org/nd get a developer job: https://www.freecodehttps://freecodecamp.org/newsticles on programming: https://freecodecamp.org/news