Build and Deploy Notion Clone – Full Stack Tutorial (NextJS 13, DALL•E, DrizzleORM, OpenAI, Vercel)
Offered By: freeCodeCamp
Course Description
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
Related Courses
Building Document Intelligence Applications with Azure Applied AI and Azure Cognitive ServicesMicrosoft via YouTube Unlocking the Power of OpenAI for Startups - Microsoft for Startups
Microsoft via YouTube AI Show - Ignite Recap: Arc-Enabled ML, Language Services, and OpenAI
Microsoft via YouTube Building Intelligent Applications with World-Class AI
Microsoft via YouTube Build an AI Image Generator with OpenAI & Node.js
Traversy Media via YouTube