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

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

Full Archon Guide - Build AI Coding Harnesses That Actually Ship (LIVE)
▶︎

Full Archon Guide - Build AI Coding Harnesses That Actually Ship (LIVE)

Building an AI Dark Factory:  A Codebase That Writes Its Own Code, Live
▶︎

Building an AI Dark Factory: A Codebase That Writes Its Own Code, Live

Master Full-Stack Docker & CI/CD – Build a Production-Ready Pipeline
▶︎

Master Full-Stack Docker & CI/CD – Build a Production-Ready Pipeline

AI Agents Full Course 2026: Master Agentic AI (2 Hours)
▶︎

AI Agents Full Course 2026: Master Agentic AI (2 Hours)

PHP Full Course For Beginners | PHP Full Course | PHP Tutorial | Intellipaat
▶︎

PHP Full Course For Beginners | PHP Full Course | PHP Tutorial | Intellipaat

Next.js Caching & Rendering Tutorial – Full Course for Beginners
▶︎

Next.js Caching & Rendering Tutorial – Full Course for Beginners

Software Testing Course – Playwright, E2E, and AI Agents
▶︎

Software Testing Course – Playwright, E2E, and AI Agents

Supabase Full Project ⚡️ The FASTEST Way to Ship a SaaS App?
▶︎

Supabase Full Project ⚡️ The FASTEST Way to Ship a SaaS App?

Build a Complete Medical Chatbot with LLMs, LangChain, Pinecone, Flask & AWS 🔥
▶︎

Build a Complete Medical Chatbot with LLMs, LangChain, Pinecone, Flask & AWS 🔥

Guide to Agentic AI – Build a Python Coding Agent with Gemini
▶︎

Guide to Agentic AI – Build a Python Coding Agent with Gemini

Next.js Tutorial 2026 - Start Your Next.js Journey Here
▶︎

Next.js Tutorial 2026 - Start Your Next.js Journey Here

Place your brain in the frequency of wealth, prosperity and total abundance - Attraction Law
▶︎

Place your brain in the frequency of wealth, prosperity and total abundance - Attraction Law

Prisma ORM Full Course 2025 | Become a Prisma Pro in 2.5 Hours
▶︎

Prisma ORM Full Course 2025 | Become a Prisma Pro in 2.5 Hours

Strapi 5 and Next.js 15 Full Stack Project Course
▶︎

Strapi 5 and Next.js 15 Full Stack Project Course

SaaS App Full Course 2026 | Launch Your SaaS in Under 7 Days with Next JS, Supabase & Payments
▶︎

SaaS App Full Course 2026 | Launch Your SaaS in Under 7 Days with Next JS, Supabase & Payments

Can I Vibecode a $250M App Better Than a Pro Developer? (With No Code)
▶︎

Can I Vibecode a $250M App Better Than a Pro Developer? (With No Code)

What is SonarQube | Introduction SonarQube | SonarQube Tutorial | SonarQube Basics | Intellipaat
▶︎

What is SonarQube | Introduction SonarQube | SonarQube Tutorial | SonarQube Basics | Intellipaat

Train Your Own LLM – Tutorial
▶︎

Train Your Own LLM – Tutorial

The Ultimate FastAPI + React Full Stack Project (Deploy This and You’re Set)
▶︎

The Ultimate FastAPI + React Full Stack Project (Deploy This and You’re Set)

Supabase Tutorial for Beginners 2026: How to Use Supabase
▶︎

Supabase Tutorial for Beginners 2026: How to Use Supabase