Welcome to Lekhan, a premium collaborative document editor featuring a local-first architecture, offline synchronization, and AI capabilities.
- Local-First Architecture: The editor prioritizes local state. Changes are reflected instantly and synchronized with the cloud asynchronously in the background.
- Offline Support: You can open, edit, and safely close documents entirely offline. Once a network connection is re-established, the sync engine resolves conflicts and pushes changes.
- Real-time Collaboration: Multiple users can edit simultaneously using robust conflict resolution.
- Role-Based Authorization: Strict permission levels (Owner, Editor, Viewer). Viewers can see documents but cannot push state modifications.
- AI Integrations: Enhance your writing with built-in AI tools directly inside the editor.
- Version History: Track changes and traverse document history safely.
The application utilizes a modern, edge-ready architecture to deliver low-latency real-time collaboration:
- Frontend / Framework: Built with Next.js 16 (App Router) and React 19, styled using Tailwind CSS and Shadcn UI.
- Database & Real-time: Powered by Supabase. Handles authentication, Postgres database storage, and real-time WebSockets.
- Local-First Sync Engine: The editor utilizes a synchronization layer that batches operations locally. This ensures zero network blocking on the UI thread while guaranteeing deterministic eventual consistency across all connected clients.
- Testing Suite: Comprehensive testing strategy employing Vitest for unit/integration tests and Playwright for End-to-End (E2E) testing.
├── app/ # Next.js 16 App Router components (pages, layouts, and API routes)
│ ├── doc/[id]/ # Dynamic route for the collaborative document editor workspace
│ ├── invite/[token]/ # Route for handling user invitations to documents
│ └── globals.css # Global styles (Tailwind directives)
├── components/ # Reusable UI components
│ ├── ui/ # Base Shadcn UI components
│ ├── layout/ # Global layout components like global-footer.tsx
│ ├── editor-workspace.tsx # Core collaborative editor component
│ └── ai-assistant-panel.tsx # AI integration interface
├── lib/ # Utilities and generic helpers (e.g., Supabase client setup)
├── services/ # Abstraction layer for database and external APIs
│ └── db.ts # Contains fetch operations for documents, invitations, and roles
├── supabase/ # Supabase configuration and SQL migrations
└── tests/ # Testing suite
├── e2e/ # Playwright E2E tests for simulating user flows
└── unit/ # Vitest unit test files for the sync engine and UI
app/layout.tsx: The root layout of the application. It handles global fonts (via<head> <link>tags to bypass Turbopack@importlimitations), the theme provider, global state, and theGlobalFooter.app/doc/[id]/page.tsx: The primary workspace entry point. In Next.js 16, dynamic params (params.id) are asynchronous and must be unwrapped usingReact.use().services/db.ts: Handles all interaction with the Supabase database. Includes functions likefetchDocumentDetails, which fetches authorization roles to lock down the UI for Viewers.package.json: Contains project dependencies, updated to Next.js v16 and React v19.
- Node.js (v18 or higher)
- npm or yarn
- Clone the repository and install dependencies:
npm install
- Ensure you have the proper environment variables configured in
.env.localfor Supabase:NEXT_PUBLIC_SUPABASE_URL=your_supabase_url NEXT_PUBLIC_SUPABASE_ANON_KEY=your_supabase_anon_key
- Run the development server:
npm run dev
- Build for production:
npm run build
The repository contains a robust testing suite fulfilling QA requirements:
- Run Unit Tests:
npm run test - Run End-to-End Tests:
npx playwright test
- Harsh Dave
- GitHub Profile
- LinkedIn Profile