Skip to content

Latest commit

 

History

History
218 lines (150 loc) · 5.33 KB

README.md

File metadata and controls

218 lines (150 loc) · 5.33 KB

Notion Clone

Notion Clone Logo

Next.js TypeScript Tailwind CSS License

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
  1. Install dependencies
npm install
# or
yarn install
  1. 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=
  1. Start the development servers
# Start Convex backend
npx convex dev

# In a new terminal, start Next.js
npm run dev
# or
yarn dev
  1. 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
  1. 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