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
Build an AI Image Generator with OpenAI & Node.jsTraversy Media via YouTube DreamBooth: Personalized Text-to-Image Generation - Lecture 10
University of Central Florida via YouTube ComfyUI - Node Based Stable Diffusion UI
Olivio Sarikas via YouTube Stable Diffusion Infinity Tutorial - AI Outpainting on Infinite Canvas
Ming Effect via YouTube Put Yourself Into a Universe of Art - Using Your Images in Dreambooth Stable Diffusion
Ming Effect via YouTube