Skip to content

RandomThacker/Notion-Clone

Repository files navigation

Zotion

image

Zotion is a Notion-like application built with Next.js 14, React, Convex, Tailwind, Clerk, and EdgeStore. It is a real-time database and Notion-style editor that allows you to create, edit, and delete documents. It also allows you to publish your note to the web.

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

-Real-time database 🔗

-Notion-style editor 📝

-Light and Dark mode 🌓

-Infinite children documents 🌲

-Trash can & soft delete 🗑

-Authentication 🔐

-File upload

-File deletion

-File replacement

-Icons for each document (changes in real-time) 🌠

-Expandable sidebar ➡🔀⬅

-Full mobile responsiveness 📱

-Publish your note to the web 🌐

-Fully collapsable sidebar ↕

-Landing page 🛬

-Cover image of each document 🖼

-Recover deleted files 🔄📄

Technologies

NextJS Shadcn-ui TypeScript Tailwind CSS Clerk Convex Edgestore

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