Class Central is learner-supported. When you buy through links on our site, we may earn an affiliate commission.

freeCodeCamp

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

via freeCodeCamp

Overview

Coursera Flash Sale
40% Off Coursera Plus for 3 Months!
Grab it
Follow this comprehensive tutorial to build a full-stack AI-powered note-taking application using Next.js 15 App Router, Supabase for authentication and database management, Prisma ORM, and shadcn for styling. Learn to integrate OpenAI's ChatGPT functionality that allows you to interact with your notes, and deploy the finished application to Vercel. The 2.5-hour tutorial covers everything from project setup, implementing dark mode, building authentication pages, creating a responsive sidebar, developing the note editor interface, setting up server actions for note management, adding AI capabilities, and finally deploying your application. Access the complete source code on GitHub to follow along with instructor Cole Blender's step-by-step guidance.

Syllabus

⌨️ 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

Taught by

freeCodeCamp.org

Reviews

Start your review of Build a Full Stack AI Note Taking App with Next.js and Supabase - Tutorial

Never Stop Learning.

Get personalized course recommendations, track subjects and courses with reminders, and more.

Someone learning on their laptop while sitting on the floor.