A collaborative wiki platform with real-time annotation, version history, mind maps, and a rich text editor.
- Framework: Next.js 16.2 (App Router)
- Database & Auth: Supabase (PostgreSQL + RLS)
- Styling: Tailwind CSS 4
- Editor: TipTap
- Mind Maps: React Flow + ELK.js
- Drawing: Custom canvas with diff-based state sync via Supabase Realtime
- Copy
.env.exampleto.env.localand fill in your Supabase credentials:
cp .env.example .env.localNEXT_PUBLIC_SUPABASE_URL=your-project-url
NEXT_PUBLIC_SUPABASE_ANON_KEY=your-anon-key- Install dependencies:
npm install- Run the development server:
npm run devOpen http://localhost:3000.
app/
├── auth/ # Login / signup
├── wiki-annotate/ # Wiki reader with annotation layer
├── test-draw/ # Canvas drawing prototype
├── p/ # Page viewer
├── commit/ # Git-style version commits
├── history/ # Version history browser
├── profiles/ # User profiles
├── user/ # User settings
└── api/ # API routes
components/
├── editor/ # TipTap rich text editor
└── mindmap/ # React Flow mind map
utils/supabase/ # Browser, server, and middleware Supabase clients
supabase/ # Migrations and DB schema
PRD/ # Implementation guides and architecture docs
- Rich text editing via TipTap with placeholder, image, and character count extensions
- Canvas annotations — draw, highlight, circle, and rectangle tools; strokes sync in real-time across clients via Supabase Realtime broadcast and a diff-based state model
- Version history — every edit is tracked; browse and restore previous states
- Mind maps — React Flow graphs with ELK auto-layout
- Auth — Supabase email/password auth with SSR session management
- Dark / light mode — CSS variable theming, toggled via
<html>class
Custom Tailwind theme defined in app/globals.css:
| Token | Dark | Light |
|---|---|---|
bg |
#0a0a0a |
#f5f5f5 |
surface |
#1a1a1a |
#e8e8e8 |
text |
#e8e8e8 |
#1a1a1a |
muted |
#888888 |
#666666 |
accent |
#c8a84b |
#9a7a2a |
Fonts: font-brand (Averia Serif Libre), font-heading (Abyssinica SIL), font-body (Inter).