Author: freeCodeCamp.org - Bewertung: 1125x - Views:40652
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: [email protected]
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
SOCIAL SHARE CARD GENERATOR