← /work/costos

# case · 07 / 07 · 2024

● active · internalreact 18supabaserbacstartup ops

Costos — the spreadsheet killer for startup founders.

role

sole engineer · product design

stack

react 18 · vite · supabase · recharts

type

internal tool · startup ops dashboard

status

active · in use at neurosiv

Costos — internal finance & operations dashboard

● costos · internal dashboard

react 18 · supabase · recharts

#01 · the problem

// why we built it

Running a startup out of spreadsheets is how things fall through the cracks.

Costos is a private, role-gated operations hub built to replace spreadsheets for early-stage startup management. Real-time view of expenses, clients, financials, and tasks — without the overhead of enterprise tools.

Built for Neurosiv first, designed to be white-labelled for any early-stage team.

// stack

frontend

React 18, Vite, Tailwind CSS — strict mode, fast HMR

charts

Recharts — spend curves, KPI cards, burn rate at a glance

backend / db

Supabase — PostgreSQL + Auth, versioned migrations

icons

Lucide React — consistent iconography throughout

auth

Supabase Auth + custom tab permission map (no third-party library)

#02 · modules · 9 total

One dashboard. Everything in view.

// overviewKPI cards with month-over-month trend indicators. Recharts spend curve showing burn rate at a glance.

// expensesFull ledger with categories (Infra, Tooling, Marketing, Legal, Design), payment status (Paid / Pending / Overdue), payer attribution, proof-of-payment upload, date-range filtering, column sorting, and CSV export.

// clientsPipeline management with stage progression: Confirmed → Paid Advance → Paid Half → Handover Completed. Multi-currency (INR / USD / GBP), lead source tracking, deal value estimates.

// foundersFinancial health view per co-founder — total revenue vs expenses, net P&L, and individual withdrawal logs.

// contractsContract records with co-founder attribution fields and status tracking.

// productsInternal product/service catalog with variant support — what the company offers, at what price.

// tasksLightweight task tracker with priority levels, assignees, due dates, and follow-up threads. Jira-style without the overhead.

// activitiesAudit log of all team actions and historical records — full traceability.

// usersRole-based access control — different roles see different tabs. No third-party auth library.

#03 · engineering highlights

Simple stack. Clever where it counts.

src/lib/permissions.ts

1// role → visible tabs map

2export const TAB_PERMISSIONS = {

3 founder: ["overview", "expenses",

4 "clients", "founders",

5 "contracts", "tasks",

6 "users"],

7 member: ["overview", "tasks",

8 "activities"],

9} as const

11// tabs render only what the role can see

// technical highlights

rbac without a library

Pure Supabase Auth + a custom tab permission map. Role is stored in the user profile; the nav renders only what that role can access.

file attachments in postgres

Payment proof uploads stored as base64 data URLs directly in Postgres — no separate file storage bucket required. Keeps the schema self-contained.

offline-tolerant design

Graceful empty states and toast notifications throughout. The UI degrades cleanly when Supabase is unreachable rather than showing blank screens.

versioned migrations

Supabase migrations checked in alongside the code — schema changes are reproducible across environments with zero manual steps.

no component library

Clean, minimal dark-mode UI built from scratch with CSS custom properties. Consistent design system without the weight of shadcn or MUI.

#04 · at a glance

modules

rbac

no third-party lib

spreadsheets needed

active

in use at neurosiv