All Work

AXIS

A personal command center for budget, fitness, goals, and business ideas, built as a keyboard-driven, terminal-style OS. Live as a public read-only demo.

Design + Build · SoloVisit live site
Modules
5
Postgres tables
11
Lines of code
~10k
Builder
1
02(Context)

AXIS unifies budgeting, fitness tracking, goals, and a business-idea board in one keyboard-driven interface, replacing scattered spreadsheets and apps. Its budget module imports CSV and XLSX bank statements, guesses date, description, and amount columns, and tracks per-category limits with month-over-month pacing and rollover. A public demo mode shows it off without exposing real data.

03(Design)

The terminal aesthetic is enforced as a design system, not painted on. Tailwind caps every border-radius at four pixels, drops box-shadows for one-pixel hairlines, and routes everything through semantic tokens and a JetBrains Mono and Inter pairing. A boot sequence and a scrolling status ticker carry the operating-system metaphor, and that low-chrome language keeps dense numeric dashboards readable.

A command palette on Cmd/Ctrl+K is the primary way to move and act: grouped navigate, action, and system commands, keyword search, and deep links like /budget?action=add-expense. For a power user living in the app daily, that beats any sidebar: actions arrive at the right module with intent intact.

Savings is a transaction ledger, not an editable number. You never type a new balance; you record a deposit or withdrawal, and the goal's amount recomputes as the sum of its transactions, with a full history. It's an auditable money trail instead of a field that can be silently overwritten.

04(Engineering)

Next.js 14 App Router with one route per module, each a large client component that talks to Supabase directly from the browser through a single shared client. There is no custom API layer or server-side data access; pages query the Supabase builder directly and derive every analytic in the browser: pace projections, BMI and TDEE, cash-flow charts. In demo mode that same import is intercepted by a hand-written mock that mimics the query-builder chain and serves fixtures, so feature code is identical either way. Schema lives as raw SQL files applied by hand, with one derived-cache pattern: a savings goal's balance recomputes from its ledger on every write.

Input
5 modules
Forms, CSV/XLSX import, kanban
Persist
Postgres · 11 tables
Ledger writes recompute balances
stack   Next.js · TypeScript · Tailwind · Supabase · Recharts · dnd-kit
05(Why end-to-end)
Because I owned both the CSV-import UX and the parser, I could make the screen a direct window into what the parser detected, rendering each column-role guess as an editable dropdown with validation chips that light up live as the date and amount mappings become valid, instead of a handoff splitting what the parser detects from what the screen shows.
The case for one person, end to end
06(Outcome)

Public read-only demo at axis-os-demo.vercel.app. Five modules ship a keyboard-driven dashboard with CSV and XLSX import, per-category budgets with pacing and rollover, a savings ledger, weight and BMI tracking with Mifflin-St Jeor TDEE math, a goal timeline, and a drag-drop idea board, plus PWA install and a zero-credential demo mode.

0
Demo credentials
1
Real-data user
07(What I'd do differently)

The status ticker still shows hardcoded placeholder figures, and there are two different current weights living in source; the next step is wiring those to live reads instead of constants. I'd also move the derived savings balance into a database trigger or view instead of recomputing it in the browser, where a failed write can desync it from the ledger, and add the auth, RLS, and tests a single-user app let me skip. The command-palette-first and ledger-not-a-number decisions I'd keep as they are.

Next project
Resolv
Product design · Frontend / Next.js · Supabase
Back to selected work