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
⭐️ 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: https://www.freecodecamp.org
Read hundreds of articles on programming: https://freecodecamp.org/news
