Build and Deploy Notion Clone – Full Stack Tutorial (NextJS 13, DALL•E, DrizzleORM, OpenAI, Vercel)

Learn how to build and deploy a Notion clone in this full-stack tutorial. You will use NextJS 13.4, Vercel, and more. 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. 💻 Code: GitHub Repo: https://github.com/elliott-chong/aideation-yt 📋 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 📚 Referenced Resources Vercel AI SDK: https://vercel.com/blog/introducing-the-vercel-ai-sdk Connect With Me 🔥🚀 : Email: elliottchong16@gmail.com GitHub: https://github.com/elliott-chong Website: https://elliottchong.tech ❤️ Try interactive Frontend courses we love, right in your browser: https://scrimba.com/freeCodeCamp-Frontend (Made possible by a grant from our friends at Scrimba) ⭐️ Contents ⭐️ ⌨️ (0:00:00) Intro & Demo ⌨️ (0:03:48) Outline Knowledge ⌨️ (0:05:36) Set Up Project ⌨️ (0:08:07) Set Up shadcn ⌨️ (0:11:42) Set Up Clerk Auth ⌨️ (0:20:07) Landing Page ⌨️ (0:30:09) Dashboard UI ⌨️ (0:36:06) DrizzleORM ⌨️ (0:48:48) Create Note UI ⌨️ (0:58:12) OpenAI Generate Image Prompt ⌨️ (1:07:46) Create NoteBook API ⌨️ (1:24:25) Notebook Page UI ⌨️ (1:34:42) TipTap Editor & MenuBar ⌨️ (1:49:44) Debounce Save ⌨️ (2:03:58) AI Autocomplete ⌨️ (2:20:42) KBD UI ⌨️ (2:22:40) Firebase ⌨️ (2:45:57) Delete Note ⌨️ (2:50:55) Deploy & Outro 🎉 Thanks to our Champion and Sponsor supporters: 👾 davthecoder 👾 jedi-or-sith 👾 南宮千影 👾 Agustín Kussrow 👾 Nattira Maneerat 👾 Heather Wcislo 👾 Serhiy Kalinets 👾 Justin Hual 👾 Otis Morgan 👾 Oscar Rahnama