Class Central is learner-supported. When you buy through links on our site, we may earn an affiliate commission.

freeCodeCamp

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

Reviews

Start your review of Build and Deploy Notion Clone – Full Stack Tutorial (NextJS 13, DALL•E, DrizzleORM, OpenAI, Vercel)

Never Stop Learning.

Get personalized course recommendations, track subjects and courses with reminders, and more.

Someone learning on their laptop while sitting on the floor.