📓 Notion Clone

A modern, collaborative, and feature-rich Notion-inspired productivity app built with Next.js, Convex, Clerk, and Tailwind CSS.
This project allows users to create documents, manage tags, and organize content seamlessly.

---

🚀 Features

• Create, edit, and delete documents
• Tag management for easy categorization
• Live search and filter by title or tags
• Responsive design with light/dark theme
• Real-time updates using Convex backend
• User authentication & management via Clerk
• Rich text editing and custom icons
• Mobile and desktop friendly

---

🛠 Tech Stack

• Frontend: Next.js 15, React, Tailwind CSS, TypeScript
• Backend: Convex (serverless database + functions)
• Authentication: Clerk for user sign-in and management
• Icons & UI: Lucide-react, shadcn/ui components
• State Management: Zustand (for search modal, tags, etc.)

---

📦 Installation

Clone the repository:

git clone https://github.com/m-mohammad-d/notion.git
cd notion

Install dependencies:

npm install

Create a .env file in the root with your environment variables:

NEXT_PUBLIC_CONVEX_URL=https://your-convex-deployment.convex.cloud
CLERK_JWT_ISSUER_DOMAIN=https://your-clerk-domain.clerk.dev
CLERK_SECRET_KEY=your-secret-key

---

💻 Running Locally

Start the development server:

npm run dev

Open http://localhost:3000 to see the app in your browser.

---

⚡ Deployment

1. Make sure you have Convex CLI installed:

npm install -g convex

2. Deploy your backend:

npx convex deploy

3. Deploy your Next.js app (e.g., Vercel):

vercel

---

📁 Project Structure

/app                  # Next.js app routes and pages
/components           # Reusable UI components
/hooks                # Custom hooks (e.g., useSearch, useTags)
/convex               # Convex backend functions and queries
/lib                  # Utility functions
/public               # Public assets (images, icons)
/styles               # Tailwind CSS and global styles

---

📝 Contributing

1. Fork the repo
2. Create a branch (git checkout -b feature-name)
3. Make your changes
4. Commit (git commit -m 'Add new feature')
5. Push (git push origin feature-name)
6. Open a pull request

---

📄 License

This project is MIT licensed.

---

🌟 Acknowledgements

• Inspired by Notion
• Uses Convex for real-time backend
• Clerk for seamless authentication
• UI components from shadcn/ui and Tailwind CSS