MENU

Fun & Interesting

Build and Deploy a Full Stack Notion Clone | NextJS 13, DALL•E, DrizzleORM, OpenAI, TypeScript

Elliott Chong 42,694 2 years ago
Video Not Working? Fix It Now

GitHub Repo: https://github.com/elliott-chong/aideation-yt Welcome to this comprehensive full-stack tutorial where we delve into the latest features of NextJS 13.4. Join me as we build an entire project from the ground up and seamlessly deploy it to Vercel 🚀. Throughout this journey, you will gain expertise in the following areas: 🌐 Leveraging NextJS 13's cutting-edge App Router. 🔥 Utilize DALLE AI Image Generation 🎨 Harnessing the beauty of Shadcn and the power of Tailwind CSS. 🧠 Unleashing the capabilities of OpenAI's API for Language Model usage. 🗃️ Interacting with databases with the efficiency of ORMs. 📋 Pastebins for Code Timestamps Timestamp 21.06 globals.css grainy https://pastebin.com/1Q1tfyFy Timestamp 1.45.35 TipTapMenuBar.tsx https://pastebin.com/4dMDEW0B Timestamp 2.09.12 /api/completion/route.ts https://pastebin.com/ADU34Ftq 🙏 Credits & Inspirations A heartfelt thank you to my friends for their unwavering support throughout this project. 📚 Referenced Resources Vercel AI SDK: https://vercel.com/blog/introducing-t... Connect With Me 🔥🚀 : Email: [email protected] GitHub: https://github.com/elliott-chong Website: https://elliottchong.tech 📖 Chapters Overview 0:00 Intro & Demo 3:22 Outline Knowledge 5:10 Set Up Project 7:41 Set Up shadcn 11:16 Set Up Clerk Auth 19:41 Landing Page 29:43 Dashboard UI 35:40 DrizzleORM 48:22 Create Note UI 57:46 OpenAI Generate Image Prompt 1:07:20 Create NoteBook API 1:23:59 Notebook Page UI 1:34:16 TipTap Editor & MenuBar 1:49:18 Debounce Save 2:03:32 AI Autocomplete 2:20:16 KBD UI 2:22:14 Firebase 2:45:31 Delete Note 2:50:29 Deploy & Outro

Comment