Build and Deploy Notion Clone – Full Stack Tutorial (NextJS 13, DALL•E, DrizzleORM, OpenAI, Vercel)
via freeCodeCamp
Overview
Embark on a comprehensive full-stack tutorial to build and deploy a Notion clone using cutting-edge technologies. Master NextJS 13's App Router, integrate DALL-E AI for image generation, and leverage the power of Shadcn and Tailwind CSS for stunning designs. Harness OpenAI's API for language model capabilities and efficiently interact with databases using ORMs. Follow along as you set up the project, implement Clerk authentication, create a landing page and dashboard UI, utilize DrizzleORM, and develop features like note creation, OpenAI image prompt generation, and a TipTap editor with a custom menu bar. Learn advanced techniques such as debounced saving, AI autocomplete, and Firebase integration. Conclude by deploying your fully-functional Notion clone and gaining valuable full-stack development experience.
Syllabus
⌨️ Intro & Demo
⌨️ Outline Knowledge
⌨️ Set Up Project
⌨️ Set Up shadcn
⌨️ Set Up Clerk Auth
⌨️ Landing Page
⌨️ Dashboard UI
⌨️ DrizzleORM
⌨️ Create Note UI
⌨️ OpenAI Generate Image Prompt
⌨️ Create NoteBook API
⌨️ Notebook Page UI
⌨️ TipTap Editor & MenuBar
⌨️ Debounce Save
⌨️ AI Autocomplete
⌨️ KBD UI
⌨️ Firebase
⌨️ Delete Note
⌨️ Deploy & Outro
Taught by
freeCodeCamp.org