📓 Notion Clone - Full Stack Note-Taking Platform

A fully functional Notion clone built with modern web technologies. Create documents, add covers and icons, organize with nested pages, and publish your notes to the web with real-time collaboration features.

Credit: This project is based on the tutorial by Antonio Erdeljac (Code With Antonio)

✨ Features

• 📝 Rich Text Editor

  • BlockNote editor with Notion-style commands
  • Drag and drop file uploads
  • Real-time content autosave

• 🎨 Customization

  • Cover images for documents
  • Emoji icons for pages
  • Light and dark mode themes
  • Fully responsive design

• 🗂️ Document Management

  • Infinite nested documents
  • Parent-child relationships
  • Expandable/collapsible sidebar
  • Document search functionality
  • Trash can with soft delete
  • Restore deleted documents

• 🌐 Publishing

  • Publish documents to the web
  • Public/private toggle
  • Share links with anyone
  • Real-time updates

• 🔐 Authentication & Security

  • Clerk authentication
  • Secure session management
  • Protected routes
  • User-specific workspaces

• 📱 Fully Responsive Design

  • Mobile-first approach
  • Optimized for all screen sizes
  • Collapsible sidebar on mobile

🛠️ Tech Stack

• Frontend:

  • Next.js 16 - React framework with App Router
  • React 19 - UI library
  • TailwindCSS 4 - Styling
  • Shadcn UI - Component library
  • TypeScript 5 - Type safety

• Backend & Database:

  • Convex - Real-time backend platform
  • Real-time database sync
  • Automatic caching and optimization

• Rich Text Editor:

  • BlockNote - Notion-style editor
  • File upload support
  • Custom slash commands

• Authentication & File Storage:

  • Clerk - Authentication
  • EdgeStore - File uploads and storage

• State Management:

  • Zustand - Client state management
  • React Context API

📋 Prerequisites

Before you begin, ensure you have the following installed:

• Node.js (v18 or higher)
• npm or yarn
• Git
• Accounts for:
  • Clerk (Authentication)
  • Convex (Backend & Database)
  • EdgeStore (File Storage)

🚀 Getting Started

1. Clone the repository

git clone https://github.com/git-adventures/notion-clone.git
cd notion-clone

2. Install dependencies

npm install

3. Setup Environment Variables

Create a .env.local file in the root directory and add the following:

# Convex
CONVEX_DEPLOYMENT=your-convex-deployment-url
NEXT_PUBLIC_CONVEX_URL=your-convex-url

# Clerk Authentication
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=your-clerk-publishable-key
CLERK_SECRET_KEY=your-clerk-secret-key

# EdgeStore
EDGE_STORE_ACCESS_KEY=your-edgestore-access-key
EDGE_STORE_SECRET_KEY=your-edgestore-secret-key

4. Setup Convex

# Login to Convex
npx convex login

# Initialize Convex project
npx convex dev

# This will:
# - Create a new Convex project
# - Deploy your functions
# - Start the development server

5. Start the development server

npm run dev

Open http://localhost:3000 in your browser to see the application.

📦 Available Scripts

Command	Description
npm run dev	Start development server (Next.js + Convex)
npm run build	Build for production
npm run lint	Run ESLint
npx convex dev	Start Convex development server
npx convex deploy	Deploy Convex functions to production

• 📚 Resources

• Next.js Documentation

• Convex Documentation

• BlockNote Documentation

• Clerk Documentation

• EdgeStore Documentation

• Shadcn UI Documentation

• TailwindCSS Documentation

• Trunk Documentation

🙏 Acknowledgments

• YouTube - Tutorial reference
• Convex - Real-time backend
• Vercel - Deployment platform (CD)
• GitHub - Code hosting and version control (CI)

---

⭐ If you found this project helpful, please give it a star!