Build and Deploy Notion Clone – Full Stack Tutorial (NextJS 13, DALL•E, DrizzleORM, OpenAI, Vercel)
Offered By: freeCodeCamp
Course Description
Overview
Save Big on Coursera Plus. 7,000+ courses at $160 off. Limited Time Only!
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 a Full-Stack Serverless Application on AWSA Cloud Guru Build a Full-Stack Server for API Requests - NodeJS and Pug
Coursera Project Network via Coursera Build and Implement Microservices Patterns
NIIT StackRoute via Coursera Connecting Front-End to Back-End
Codecademy Deploying with Render
Codecademy