kpedrok / notion-clone-blocknote

Notion clone built with React.js, Next.js, Convex, and BlockNote

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.