Notion Clone

A full-featured Notion clone built with modern web technologies. This application replicates the core functionality of Notion, offering a seamless workspace for note-taking, document management, and real-time collaboration.

Developed by Saeed N. Altout (saeedaltout25@gmail.com).

🚀 Features Explained

📝 Document Management

• Create & Edit: Create unlimited documents with a rich text editor.
• Nested Documents: Organize your workspace hierarchically. Documents can have infinite children, allowing for deep organization structures.
• Icons & Covers: Customize each document with unique emojis and cover images to make your workspace visual.

⚡ Real-time Collaboration

• Instant Sync: All changes are synced in real-time across all devices using Convex.
• Live Updates: See changes as they happen without refreshing the page.

🗑️ Trash & Recovery

• Soft Delete: Documents are moved to a trash can instead of being permanently deleted immediately.
• Restore: Easily restore accidentally deleted documents.
• Permanent Delete: Option to permanently remove documents from the trash.

🌐 Publishing

• Share to Web: Publish any document to the web with a single click.
• Public Access: Generated public URLs allow anyone to view your published notes.

🎨 User Interface

• Responsive Sidebar: Collapsible sidebar for easy navigation, fully responsive for mobile devices.
• Dark Mode: Built-in dark mode support that respects system preferences or user choice.
• Dynamic Breadcrumbs: Easy navigation through document hierarchy.

🏗️ Architecture

This project is built on a robust, modern tech stack designed for performance and scalability.

Frontend

• Next.js 15 (App Router): Utilizes the latest Next.js features including React Server Components for improved performance and SEO.
• Tailwind CSS: Utility-first CSS framework for rapid and responsive UI development.
• Radix UI: Headless UI primitives for accessible and high-quality components (Dialogs, Dropdowns, Popovers).
• Zustand: A small, fast, and scalable bearbones state-management solution used for managing UI state like the sidebar.

Backend & Database

• Convex: A backend-as-a-service that provides a real-time database, server functions, and automatic caching. It handles all data persistence and real-time subscriptions.
• Schema: Defined in TypeScript, ensuring end-to-end type safety from the database to the frontend components.

Authentication & Security

• Clerk: Complete user management and authentication. Integrated with Convex to secure database access via Row Level Security (RLS) policies.

File Storage

• EdgeStore: A type-safe file storage solution for Next.js, used for handling image uploads (document covers) efficiently.

💡 Key Learnings & Experience

Building this project involved mastering several advanced web development concepts:

• Recursive Components: Implemented recursive rendering for the document sidebar to handle infinite nesting of pages.
• Real-time Data Sync: Leveraged Convex's subscription model to build a truly reactive UI that updates instantly without manual polling.
• Optimistic Updates: Implemented optimistic UI patterns to make the application feel instant to the user, even on slower networks.
• SaaS Architecture: Structured the application to support multi-user environments with secure data isolation.
• Rich Text Editor Integration: Integrated BlockNote for a seamless "Notion-like" editing experience, handling custom blocks and formatting.

🛠️ Tech Stack

• Framework: Next.js 15
• Language: TypeScript
• Styling: Tailwind CSS & Radix UI
• Backend: Convex
• Auth: Clerk
• Storage: EdgeStore
• State: Zustand
• Validation: Zod

🏁 Getting Started

Prerequisites

• Node.js (v18 or later)
• npm, yarn, pnpm, or bun

Installation

1. Clone the repository:

   git clone https://github.com/your-username/notion-clone.git
   cd notion-clone

2. Install dependencies:

   npm install

3. Set up Environment Variables: Create a .env.local file:

   # Convex
   CONVEX_DEPLOYMENT=
   NEXT_PUBLIC_CONVEX_URL=
   
   # Clerk
   NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=
   CLERK_SECRET_KEY=
   
   # EdgeStore
   EDGE_STORE_ACCESS_KEY=
   EDGE_STORE_SECRET_KEY=

4. Run the Development Server:

   npm run dev

5. Access the App: Open http://localhost:3000.

📂 Project Structure

notion-clone/
├── app/              # Next.js App Router
│   ├── (main)/       # Main application routes (protected)
│   ├── (marketing)/  # Landing page routes (public)
│   └── (public)/     # Publicly shared document routes
├── components/       # Shared UI components
├── convex/           # Backend schema and functions
├── hooks/            # Custom hooks (use-scroll, use-origin)
└── lib/              # Utilities

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

📄 License

This project is open-source and available under the MIT License.