A Linear-style issue tracker with offline-first sync, built as a reference implementation for @trestleinc/replicate.
Live Demo: interval.robelest.com
This app showcases real-world Replicate patterns beyond the basics:
- SQLite persistence (sql.js + OPFS) instead of default IndexedDB
- Rich text editing with TipTap + Yjs collaborative fragments
- PWA with offline support via custom Workbox service worker
- Multiple collections (intervals + comments) with separate persistence
git clone https://github.com/robelest/interval
cd interval
bun install
cp .env.example .env
# Set VITE_CONVEX_URL to your Convex deployment
bun run dev| Pattern | File |
|---|---|
| SQLite Persistence Setup | src/collections/useIntervals.ts |
| Convex Schema | convex/schema.ts |
| Replicate Functions | convex/intervals.ts |
| Rich Text Editor Binding | src/components/IntervalEditor.tsx |
| Context + PersistenceGate | src/contexts/IntervalsContext.tsx |
| PWA Service Worker | src/sw.ts |
| CRUD Hook | src/hooks/useCreateInterval.ts |
SQLite via sql.js requires async initialization. The PersistenceGate component blocks rendering until persistence is ready, ensuring offline-first functionality is established before any data access.
Collections are created at module level (not inside components) to ensure only one sync process runs, even across component remounts. The useIntervals() hook returns the same instance every time.
Rich text fields use collection.utils.prose() which returns a Promise. Effect-TS manages the async lifecycle with proper cancellation when switching between intervals, preventing stale bindings.
Intervals and comments use separate SQLite databases and Replicate collections, demonstrating how to structure apps with multiple synced data types.
- Framework: TanStack Router (file-based routing)
- State: TanStack DB + React Query
- Backend: Convex (real-time database)
- Sync: @trestleinc/replicate (CRDT layer)
- Editor: TipTap + Yjs (collaborative editing)
- Offline: sql.js (SQLite in browser)
- Styling: Tailwind CSS v4
Cmd+K/Ctrl+K- Open searchAlt+N- Create new interval
- Replicate README - Comprehensive API reference
- Convex Docs
- TanStack DB Docs
MIT