Notion Clone

A fullstack Notion clone built with Next.js, React, Tailwind, Clerk, Convex, Edge Store, and BlockNote.

Landing page

Editor

Features

🔐 Authentication using Clerk
📊 Real-time backend and database powered by Convex.dev
🖼️ Upload images using Edge Store
📝 Create and edit notes using BlockNote editor
🙂 Emojis using Emoji Picker React
🌲 Create hierarchies of notes
🗑️ Archive, restore, and delete notes
📢 Publish notes to share with others
⬅️ Adjustable sidebar
✨ Responsive UI and light/dark mode built with Tailwind and shadcn/ui

Getting Started

Clone the repo

git clone https://github.com/sgbj/notion-clone.git

Install dependencies

npm install

Setup .env file

CONVEX_DEPLOYMENT=

NEXT_PUBLIC_CONVEX_URL=

NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=
CLERK_SECRET_KEY=

EDGE_STORE_ACCESS_KEY=
EDGE_STORE_SECRET_KEY=

Start Convex

npx convex dev

Start the app

npm run dev

Credit

Created by following along with AntonioErdeljac/notion-clone-tutorial.