Notion Clone

A powerful and modern Notion clone built with cutting-edge technologies.

Demo · Report Bug · Request Feature

Overview

This project is a feature-rich Notion clone that demonstrates the implementation of modern web technologies. Built on Next.js 14, it seamlessly integrates real-time collaboration, secure authentication, and a responsive user interface. The application leverages Clerk for authentication and Convex as a robust real-time backend, while utilizing Shadcn components and Tailwind CSS for an elegant and responsive design.

Key Features

Core Functionality

• Full-featured Notion-style editor
• Real-time database synchronization
• Infinite nested documents
• Secure authentication system
• Light and dark mode support
• Integration of new functionalities - New features have been added to enhance the user experience.

Document Management

• File upload, replacement, and deletion
• Soft delete with trash bin functionality
• Document recovery system
• Real-time document icon updates
• Cover images for documents
• Document management improvements - New options for file retrieval and management have been implemented.

User Interface

• Fully collapsible sidebar
• Responsive mobile design
• Web publishing capabilities
• Custom landing page
• Modern and clean UI
• User interface upgrade - Adjustments have been made to improve usability and aesthetics.

Technology Stack

Frontend

• Next.js 14 - React framework for production
• TypeScript - Static type checking
• Tailwind CSS - Utility-first CSS framework
• Shadcn - Customizable UI components
• Blocknote - A powerful and flexible framework for building modern web applications.

Backend & Services

• Convex - Real-time backend infrastructure
• Clerk - Authentication and user management
• Edge Runtime - Enhanced performance and scalability

Getting Started

Prerequisites

• Node.js (version 18.x.x or higher)
• npm or yarn package manager
• Git

Installation

1. Clone the repository

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

2. Install dependencies

npm install
# or
yarn install

3. Environment Setup
   • Copy .env.example to .env.local
   • Configure the following environment variables:

CONVEX_DEPLOYMENT=
NEXT_PUBLIC_CONVEX_URL=
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=
CLERK_SECRET_KEY=
EDGE_STORE_ACCESS_KEY=
EDGE_STORE_SECRET_KEY=


NEXT_PUBLIC_EDGE_STORE_ACCESS_KEY=
NEXT_PUBLIC_EDGE_STORE_SECRET_KEY=

4. Start the development servers

# Start Convex backend
npx convex dev

# In a new terminal, start Next.js
npm run dev
# or
yarn dev

5. Deploy Proyect to Vercel

   npm run build && npx convex deploy

   # Copied and Paste env variables

Project Structure

notion-clone/
├── app/                    # Next.js app directory
│   ├─(main)/            # Main application routes
│   └── (marketing)/       # Marketing pages
├── components/            # Reusable UI components
├── convex/                # Backend models and functions
├── hooks/                # Custom React hooks
├── lib/                  # Utility functions
└── public/               # Static assets

Development Guide

Adding New Features

1. Backend (Convex)

   • Add new models in convex/schema.ts
   • Create new functions in convex/ directory

2. Frontend

   • Create components in components/
   • Add new routes in app/(main)/(routes)/
   • Implement hooks in hooks/

Best Practices

• Follow TypeScript strict mode guidelines
• Use Tailwind CSS for styling
• Implement responsive design patterns
• Write clean, documented code
• Follow the established project structure

Deployment

1. Build the application

npm run build
# or
yarn build

2. Deploy to your preferred platform
   • Vercel (recommended)
   • Netlify
   • Custom server

Deployment Checklist

• Configure environment variables
• Set up Convex production deployment
• Configure Clerk authentication
• Set up proper domain and SSL
• Test all features in production

Contributing

We welcome contributions! Please follow these steps:

1. Fork the repository
2. Create your feature branch (git checkout -b feature/AmazingFeature)
3. Commit your changes (git commit -m 'Add some AmazingFeature')
4. Push to the branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

License

This project is licensed under the MIT License - see the LICENSE file for details.

Support

• Create an issue for bug reports or feature requests
• Star the repository if you find it useful
• Follow for updates

---

Made with ❤️ by DeusloVuilt