Chapters (22)
- 0:00Intro
- 2:44Start Project
- 6:48Add shacn/ui, Dark Mode, and Toast
- 8:48Build Header
- 17:21Build LogOutButton
- 22:19Add Auth Pages
- 32:12Create Supabase Project
- 35:48Add Supabase Code
- 40:52Add Auth Code Logic
- 50:02Add Prisma Code
- 58:35Build Sidebar
- 1:04:25Build Home Page
- 1:09:11Set Up OpenAI Account
- 1:11:22Build NoteTextInput
- 1:18:18Create Context and Custom Hook
- 1:22:06Write Update Note Server Action
- 1:24:27Finish NewNoteButton
- 1:29:23Finish Sidebar
- 1:51:31Add Middleware
- 1:59:43Add AskAIButton
- 2:21:43Deploy to Vercel
- 2:26:02Outro
Show the creator's full description
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
Description and video by freeCodeCamp.org. This page is an independent companion view; the video is embedded from YouTube.