Jotion: Collaborative Workspace

Overview

Jotion is a full-stack collaborative workspace built with modern web technologies. It features real-time sync, authentication, file storage, and production-ready patterns—a Notion-inspired workspace for notes, docs, and collaborative editing.

Key Features

Core

• Real-time Editing: Live updates across all connected clients
• Infinite Document Nesting: Create nested document hierarchies
• Trash with Restore: Soft delete with ability to restore documents

UX

• Command Palette: Quick navigation with Cmd+K
• Collapsible Sidebar: Clean, organized interface
• Light/Dark Mode: Theme support
• Mobile Responsive: Full experience on all devices

Content

• BlockNote Editor: Rich block-based editing
• Emoji Icons: Custom document icons
• Cover Images: Visual document covers
• Publish to Web: Share documents publicly

Infrastructure

• Type-safe Convex API: Full type safety for database operations
• EdgeStore File Handling: Secure file uploads
• Zod Validation: Runtime validation for data integrity

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) |

Data Flow

• Document CRUD: Convex mutations 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 without auth

Auth Flow

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

Why I Built This

I built Jotion to understand how collaborative document editors like Notion work under the hood. The project taught me about real-time databases, rich text editors, and building production-ready full-stack applications with modern tools like Convex and Clerk.

Key Learnings

• Convex for real-time backend
• BlockNote for rich text editing
• Clerk for authentication
• EdgeStore for file handling
• Zustand for client state management