Life OS
A comprehensive offline-first productivity system with task management, calendar, Obsidian-style notes with graph visualization, goals, habits, and finance tracking.
Built a personal operating system for productivity — tasks, calendar, rich notes with backlinks and graph visualization, goals, habits, and finance tracking. Fully offline-first with local IndexedDB storage, optional Supabase cloud sync, and a Linear-inspired UI with command palette, keyboard shortcuts, and glassmorphism. The desktop counterpart to Life OS Mobile.
Why I Built This
Every productivity tool I tried forced me to spread my life across 5+ apps — Todoist for tasks, Google Calendar for events, Obsidian for notes, a spreadsheet for budgets, another app for habits. None of them talked to each other. I wanted one system where completing a task could update a goal, a calendar event could link to meeting notes, and a budget entry could connect to a habit streak.
The existing tools also had a fundamental trust problem: my data lived on someone else's servers. I wanted full ownership — local-first storage that works without internet, with optional sync when I want it.
Architecture
The core design principle is offline-first with hybrid sync:
- Every action writes to local IndexedDB (via Dexie.js) first
- UI updates instantly — no loading spinners, no network dependency
- A background sync queue pushes changes to Supabase when online
- Real-time subscriptions pull changes from other devices
This means the app works perfectly on an airplane, in a subway, or with no internet at all. When you reconnect, everything syncs silently.
I built a Storage Adapter Pattern that abstracts the data layer: LocalAdapter (Dexie), CloudAdapter (Supabase), and HybridAdapter that combines both. This lets me swap storage backends without touching application logic.
The Modules
Task Management
Full task system with natural language date parsing ("tomorrow", "next friday"), smart priority system, drag-and-drop reordering, kanban boards, subtasks with dependencies, and a built-in task timer. Bulk operations let you multi-select and batch-update priorities, tags, or completion status.
The interaction model is keyboard-first, inspired by Linear: J/K to navigate, X to toggle complete, E to edit, D to delete. The command palette (Cmd+K) searches across all modules with fuzzy matching and recent command history.
Notes with Knowledge Graph
This is the module I'm most proud of. Rich text editing via TipTap with wiki-style [[backlinks]], a visual force-directed graph view of all connected notes (built with React Flow), daily journal entries, 9 note templates, and tag management.
The backlinks panel shows incoming links, outgoing links, and unlinked mentions with context — so if another note mentions "OrchestrAI" but doesn't link to it, it suggests the connection. The graph view is interactive: zoom, pan, click to open, color-coded by tags, with animated particle flow showing link direction and real-time stats (nodes, links, density, clusters).
Calendar
Month, week, day, and agenda views. Click on a time slot to create an event. Drag-and-drop to reschedule across all views. Category breakdown with analytics showing where your time goes.
Goals & Habits
7 goal categories with visual progress badges and deadline warnings. Habits use a GitHub-style contribution heatmap (12-week view) with streak tracking, completion rate analytics, and a flame animation for active streaks.
Finance Tracking
Transaction management with categories, budget vs. actual with color-coded progress bars, over-budget warnings, monthly spending charts, income vs. expenses visualization, recurring transactions, and CSV import/export.
Design System
The visual language is glassmorphism meets Linear:
- Dark-first design with pure black backgrounds (OLED-friendly)
- Glassmorphic cards with backdrop blur and subtle borders
- HSL color system for consistent theming
- Spring animations (150-250ms) on all transitions
- Loading skeletons instead of spinners — the UI never feels blank
- Focus/Zen mode that strips away everything except your current task
Every interactive element has micro-interactions: hover states, focus rings, press feedback. The sidebar collapses for full-screen focus. Empty states have helpful quick actions instead of just "nothing here" messages.
What I Learned
When you commit to offline-first, the entire UX changes. No loading states for data reads. No error handling for network failures on writes. No "please wait" moments. The app just works, instantly, always. It's a dramatically better user experience that most apps don't bother with because the engineering is harder.
I didn't expect the knowledge graph to be this useful. Seeing my notes as a network revealed clusters of related ideas I hadn't consciously connected. Orphan detection — finding notes with no links — became a way to identify incomplete thinking.
Building comprehensive keyboard navigation (50+ shortcuts) took significant effort. But now I rarely touch the mouse. The productivity gain is real, and it's the kind of polish that separates tools you tolerate from tools you love.