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

Elliott Chong β€’ September 25, 2023
Video Thumbnail
Elliott Chong Logo

Elliott Chong

View Channel

About

Hi! I'm Elliott, a 20 year old software engineering enthusiast from Singapore. I'm currently a founding engineer at a YC backed startup. Outside of coding, I like to run, do calisthenics and cycle. My current project is helping people start their next $5k / month revenue generation SaaS. If you are interested in learning / need help building SaaS, check out https://start-saas.com/?utm_source=yt_banner

Video Description

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

You May Also Like

Essential Web Dev Tools

AI-recommended products based on this video

Loading...
MOSISO Laptop Case 13 inch, 13 inch Laptop Sleeve Bag Compatible with MacBook Air 13 M4 M3 M2 M1 2025-2018 / Pro 13 M2 M1 2025-2016, Neoprene Computer Sleeve Bag with Small Case, Space Gray Global Recycled Standard

MOSISO Laptop Case 13 inch, 13 inch Laptop Sleeve Bag Compatible with MacBook Air 13 M4 M3 M2 M1 2025-2018 / Pro 13 M2 M1 2025-2016, Neoprene Computer Sleeve Bag with Small Case, Space Gray Global Recycled Standard

(20,392)
$24.29$21.88
FREE delivery Sun, Aug 10 on your first order
Loading...
MOSISO Compatible with MacBook Air 13 inch Case 2021, 2020-2018 Release A2337 M1 A2179 A1932, Plastic Hard Shell&Keyboard Cover&Screen Film&Storage Bag for MacBook Air 13.3 inch Case, Crystal Clear

MOSISO Compatible with MacBook Air 13 inch Case 2021, 2020-2018 Release A2337 M1 A2179 A1932, Plastic Hard Shell&Keyboard Cover&Screen Film&Storage Bag for MacBook Air 13.3 inch Case, Crystal Clear

(2,431)
$14.52
FREE delivery Sat, Jun 14 on your first order
200+ bought in past month
Loading...
tomtoc 360Β° Protective Laptop Sleeve for 13-inch New MacBook Air M4/A3240 2025, M3/A3113, M2/A2681 M1/A2337 A2179 A1932, 13-inch MacBook Pro M2/A2686 M1/A2338, Water-Resistant Computer Case Bag Global Recycled Standard

tomtoc 360Β° Protective Laptop Sleeve for 13-inch New MacBook Air M4/A3240 2025, M3/A3113, M2/A2681 M1/A2337 A2179 A1932, 13-inch MacBook Pro M2/A2686 M1/A2338, Water-Resistant Computer Case Bag Global Recycled Standard

(12,952)
$36.07
PrimeFREE delivery Sat, Jun 14
100+ bought in past month
Loading...
MOSISO 13-14 inch Laptop Case, 13.3 inch Puffy Laptop Sleeve Compatible with MacBook Air 13 13.6 M4 M3 M2 M1/Pro 13/Pro 14,HP,Dell,ASUS, Lenovo, Polyester Horizontal Bag with Small Case, Rose Red Global Recycled Standard

MOSISO 13-14 inch Laptop Case, 13.3 inch Puffy Laptop Sleeve Compatible with MacBook Air 13 13.6 M4 M3 M2 M1/Pro 13/Pro 14,HP,Dell,ASUS, Lenovo, Polyester Horizontal Bag with Small Case, Rose Red Global Recycled Standard

(918)
$31.04
FREE delivery Tue, Jun 17 on your first order
Loading...
FEREDO KIDS Party Favors for Kids: 16 Pack Rainbow Scratch Art Notebook Students Classroom Goodie Bag Items Bulk for Girls Boys Loot Bag Fillers, Return Gifts for Birthday Party Gifts Kids Crafts

FEREDO KIDS Party Favors for Kids: 16 Pack Rainbow Scratch Art Notebook Students Classroom Goodie Bag Items Bulk for Girls Boys Loot Bag Fillers, Return Gifts for Birthday Party Gifts Kids Crafts

(1,230)
$19.99
FREE delivery Sat, Jun 14 on your first order
500+ bought in past month
Loading...
SAIKATI Smart Watch for Men Women Bluetooth Call, 1.85" HD Touch Screen AI Voice Smartwatch, Fitness Tracker with Sleep/Heart Rate Monitor, 100+ Sports Modes, IP68 Waterproof, Compatible with Android & iOS

SAIKATI Smart Watch for Men Women Bluetooth Call, 1.85" HD Touch Screen AI Voice Smartwatch, Fitness Tracker with Sleep/Heart Rate Monitor, 100+ Sports Modes, IP68 Waterproof, Compatible with Android & iOS

(787)
$49.99
FREE delivery Thu, Sep 4
1K+ bought in past month