Skip to content

README.md

Latest commit

 

History

History
165 lines (128 loc) · 4.69 KB

README.md

File metadata and controls

165 lines (128 loc) · 4.69 KB

📓 Notion Clone - Full Stack Note-Taking Platform

notion-clone

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:

  • 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:

  • 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:

🚀 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

🙏 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!