Notion Clone App

Written by
auth-avtHieu.BuiMinh
Published onDecember 15, 2024
Views0
Comments0
DemoRepo

Notion Clone App 📚

Notion - https://notion-clone-app-xii.vercel.app/

This project is a simplified clone of the popular productivity application, Notion. It replicates some of Notion's core features, offering a platform where users can create, edit, and organize their notes in a flexible and intuitive interface.

The backend is powered by Convex, a real-time database that enables instant data updates. Additionally, Edgestore, a distributed key-value store, manages the images and files uploaded by users. User authentication is handled securely and efficiently by Clerk, a scalable authentication API.

Key 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 🔄📄

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

TailwindCSS

Clerk

Convex

Edgestore

Blocknote

Installation

  1. Clone the repository
  2. Install the dependencies
bash
npm install
  1. Set up the environment variables
.env
# Deployment used by `npx convex dev`
CONVEX_DEPLOYMENT=xxxxxxxx-xxxxx-xxxxx-xxxx-xxxx
NEXT_PUBLIC_CONVEX_URL=xxxxxxxx-xxxxx-xxxxx-xxxx-xxxx
 
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=xxxxxxxx-xxxxx-xxxxx-xxxx-xxxx
CLERK_SECRET_KEY=xxxxxxxx-xxxxx-xxxxx-xxxx-xxxx
 
EDGE_STORE_ACCESS_KEY=xxxxxxxx-xxxxx-xxxxx-xxxx-xxxx
EDGE_STORE_SECRET_KEY=xxxxxxxx-xxxxx-xxxxx-xxxx-xxxx
  1. Run Convex
bash
npx convex dev
  1. Run the development server
bash
npm run dev
Last updated: December 15, 2024