Jotion

A full-stack collaborative workspace built with modern web technologies. Real-time sync, authentication, file storage, and production-ready patterns.

Tech Stack

Layer	Technology	Purpose
Framework	Next.js 13 (App Router)	SSR, routing, API routes
UI	React 18, Tailwind, Radix UI	Components, styling, accessibility
Editor	BlockNote	Rich block-based editing
Backend	Convex	Real-time DB, serverless functions
Auth	Clerk	Auth + Convex integration
Files	EdgeStore	Cover images, inline uploads
State	Zustand	Client-side state (search, modals)

Architecture

Document Lifecycle

Project Structure

Directory	Purpose
app/(marketing)/	Landing page (public)
app/(main)/	Authenticated app (sidebar, documents)
app/(public)/	Published document preview
app/api/edgestore/	EdgeStore Next.js handler
convex/	Schema, mutations, queries
components/	Shared UI, editor, toolbar, modals
hooks/	Custom hooks (search, settings, cover image)

Data Flow

• Document CRUD: Convex mutations (create, update, archive, restore, remove) with auth checks
• Real-time: Convex useQuery / useMutation for live updates
• Hierarchy: parentDocument + by_user_parent index for nested documents
• Publish: isPublished flag allows public read via getById without auth

Auth Flow

• Clerk handles sign-in/sign-up
• ConvexProviderWithClerk passes JWT to Convex
• useConvexAuth() in main layout redirects unauthenticated users to /
• All Convex handlers validate ctx.auth.getUserIdentity() and userId

Features

Core

• Real-time editing
• Infinite document nesting
• Trash with restore

UX

• Command palette (Cmd+K)
• Collapsible sidebar
• Light/dark mode
• Mobile responsive

Content

• BlockNote editor
• Emoji icons
• Cover images
• Publish to web

Infrastructure

• Type-safe Convex API
• EdgeStore file handling
• Zod validation

Getting Started

Prerequisites: Node 18.x.x

Clone and install

git clone https://github.com/AntonioErdeljac/notion-clone-tutorial.git
cd notion-clone-tutorial
npm i

Environment variables

Create .env.local with:

CONVEX_DEPLOYMENT=
NEXT_PUBLIC_CONVEX_URL=

NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=
CLERK_SECRET_KEY=

EDGE_STORE_ACCESS_KEY=
EDGE_STORE_SECRET_KEY=

Run Convex

npx convex dev

Start the app

npm run dev