Aotion - Fullstack Notion Clone

This repository contains a Fullstack Notion Clone, built with Next.js 13, React, Convex, and Tailwind CSS. The app replicates core Notion features, allowing for note creation and management with a smooth, real-time experience.

🌟 Key Features

• Real-time database 🔗: Instant updates via Convex.
• Notion-style editor 📝: Rich text editing with slash commands (BlockNote).
• Light and Dark mode 🌓: Supports both dark and light themes.
• Infinite children documents 🌲: Create infinitely nested documents.
• Trash can & soft delete 🗑️: Safely recover deleted documents.
• Authentication 🔐: Secure login and session management with Clerk.
• File Upload & Management: Support for file uploads, cover images, and replacements (EdgeStore).
• Document Icons 🌠: Custom emojis for each page (real-time updates).
• Expandable sidebar ➡️🔀⬅️: Collapsible navigation sidebar with drag-to-resize.
• Fully Responsive: Optimized for mobile devices.
• Publish to web 🌐: Share your notes with the world via public URLs.
• Landing Page 🛬: Beautiful product introduction page.
• Cover Image 🖼️: Custom cover images for each document.

🛠️ Tech Stack

• Framework: Next.js 13 (App Router)
• Language: TypeScript
• Database & Backend: Convex
• Styling: Tailwind CSS
• Authentication: Clerk
• File Storage: EdgeStore
• State Management: Zustand
• Editor: BlockNote
• Icons: Lucide React
• UI Components: Radix UI, Shadcn UI components.

🚀 Getting Started

Follow these steps to run the project locally.

Prerequisites

• Node.js: Version 18.x.x or higher.

Installation

1. Clone the repository

git clone https://github.com/anhtudo97/aotion.git
cd aotion

2. Install packages

npm install
# Or if using yarn
yarn install

3. Setup environment variables

Create a .env.local file in the root directory and copy the content below, filling in your keys:

# Convex Deployment
CONVEX_DEPLOYMENT=
NEXT_PUBLIC_CONVEX_URL=

# Clerk Authentication
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=
CLERK_SECRET_KEY=

# EdgeStore (File Upload)
EDGE_STORE_ACCESS_KEY=
EDGE_STORE_SECRET_KEY=

4. Setup Convex

Run the following command to initialize and start the Convex dev server (database):

npx convex dev

5. Start the app

Open a new terminal (keep the terminal running npx convex dev open) and run:

npm run dev
# Or
yarn dev

Visit http://localhost:3000 to experience the app.

📂 Main Folder Structure

• /app: Next.js source code (Pages, Layouts, Routes).
  • (main): Main application routes after login (Documents).
  • (marketing): Landing page.
  • (public): Public routes (Preview note).
• /components: Reusable UI components.
  • /providers: React Context providers.
  • /modals: Modal dialogs.
• /convex: Database schema and backend functions.
• /hooks: Custom React hooks.
• /lib: Configuration utilities (utils, edgestore).

🤝 Contribution

Contributions are welcome.

---