This project is a simplified clone of the popular productivity application, Notion. It's designed to replicate some of the core features of Notion, providing a platform where users can create, edit, and organize their notes in a flexible and intuitive interface.
It uses Convex as the backend, which is a real-time database that allows for instant data updates. The application also uses Edgestore, a distributed key-value store, to manage the images and files uploaded by the users. The user authentication is handled by Clerk, a secure and scalable user authentication API.
Note: This demo runs on Clerk development keys, so user limits apply. For long-term use, see the installation steps below.
Zotion - https://zotion-app.vercel.app/
- 📝 Notion-style editor for seamless note-taking
- 📂 Infinite children documents for hierarchical organization
- 🖐️ Drag-and-drop reordering for intuitive file management
- ⭐ Pin important documents for quick access
- ➡️🔀⬅️ Expandable and fully collapsible sidebar for easy navigation
- 🎨 Customizable icons for each document, updating in real-time
- 🗑️ Trash can with soft delete and file recovery options
- 🌓 Light and Dark mode to suit preferences
- 📱 Full mobile responsiveness for productivity on the go
- 🛬 Landing page for a welcoming user entry point
- 🖼️ Cover image for each document to add a personal touch
- 🔄 Real-time database for instant data updates
- 📤📥 File upload, deletion, and replacement options
- 🔐 Authentication to secure notes
- 🌍 Option to publish your note to the web for sharing
- Clone the repository
- Install the dependencies
npm install- Set up the environment variables
Copy .env.example to .env.local, then fill in the values from Convex and Clerk.
# from Convex dashboard
CONVEX_DEPLOYMENT=
NEXT_PUBLIC_CONVEX_URL=
CLERK_JWT_ISSUER_DOMAIN=
# from Clerk dashboard
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=
CLERK_SECRET_KEY=
# from EdgeStore dashboard
EDGE_STORE_ACCESS_KEY=
EDGE_STORE_SECRET_KEY=- Run Convex
npx convex dev- Run the development server
npm run dev