Skip to content

Zotion - A simplified clone of Notion where users can create, edit, and organize their notes.

Notifications You must be signed in to change notification settings

adityaphasu/notion-clone

Repository files navigation

Zotion

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.

Live

Zotion - https://zotion-app.vercel.app/

Features

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

Technologies

NextJS Shadcn-ui TypeScript Tailwind CSS Clerk Convex Edgestore Blocknote

Installation

  1. Clone the repository
  2. Install the dependencies
npm install
  1. 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=
  1. Run Convex
npx convex dev
  1. Run the development server
npm run dev

Acknowledgements

CodewithAntonio