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.
- 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
- 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.)
Clone the repository:
git clone https://github.com/m-mohammad-d/notion.git
cd notionInstall dependencies:
npm installCreate 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-keyStart the development server:
npm run devOpen http://localhost:3000 to see the app in your browser.
- Make sure you have Convex CLI installed:
npm install -g convex- Deploy your backend:
npx convex deploy- Deploy your Next.js app (e.g., Vercel):
vercel/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
- Fork the repo
- Create a branch (
git checkout -b feature-name) - Make your changes
- Commit (
git commit -m 'Add new feature') - Push (
git push origin feature-name) - Open a pull request
This project is MIT licensed.
- Inspired by Notion
- Uses Convex for real-time backend
- Clerk for seamless authentication
- UI components from shadcn/ui and Tailwind CSS