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.
Zotion - https://zotion-app.vercel.app/
Productivity and Organizations
- π Notion-style editor for seamless note-taking
- π Infinite children documents for hierarchical organization
- β‘οΈπβ¬ οΈ 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
User Experience
- π 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
Data Management
- π Real-time database for instant data updates
- π€π₯ File upload, deletion, and replacement options
Security and Sharing
- π Authentication to secure notes
- π Option to publish your note to the web for sharing
NextJS Shadcn-ui TypeScript Tailwind CSS Clerk Convex Edgestore Blocknote
- Clone the repository
- Install the dependencies
npm install
- Set up the environment variables
# Deployment used by `npx convex dev`
CONVEX_DEPLOYMENT=
NEXT_PUBLIC_CONVEX_URL=
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=
CLERK_SECRET_KEY=
EDGE_STORE_ACCESS_KEY=
EDGE_STORE_SECRET_KEY=
- Run Convex
npx convex dev
- Run the development server
npm run dev