A powerful, real-time collaborative workspace that combines note-taking, knowledge management, and task organization capabilities. Built with modern web technologies, Writely provides a seamless and intuitive interface for managing your digital workspace.
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
- Custom icons for easy visual identification
- Search functionality across all documents
User Experience
- Intuitive drag-and-drop interface
- 🌓 Light and Dark mode to suit preferences
- 📱 Full mobile responsiveness for productivity on the go
- 🖼️ 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
- 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
Writely/
├── app/ # Next.js app directory
│ ├── (main)/ # Main application routes
│ ├── (homepage)/ # landing pages
│ └── (public)/ # Public accessible routes
├── components/ # Reusable UI components
├── convex/ # Backend API and schema
├── hooks/ # Custom React hooks
├── lib/ # Utility functions
└── public/ # Static assets