Software Development

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.

Thank you for reading this post, don't forget to subscribe!

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:

📋 Pastebins for Code Timestamps
Timestamp 21.06 globals.css grainy
Timestamp 1.45.35 TipTapMenuBar.tsx
Timestamp 2.09.12 /api/completion/route.ts

📚 Referenced Resources
Vercel AI SDK:

Connect With Me 🔥🚀 :
Email: elliottchong16@gmail.com
GitHub:
Website:

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

Learn to code for free and get a developer job:

Read hundreds of articles on programming:

source