Build and Deploy a Full Stack Notion Clone | NextJS 13, DALL•E, DrizzleORM, OpenAI, TypeScript
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