3 min read

Konsu

react tanstack-router tinybase zustand tailwindcss vite typescript

Overview 🔗

Konsu is a local-first web app for tracking household consumables—the items you regularly need to buy, refill, replace, or recharge. Toothbrush heads, batteries, razor blades, face wash, air filters, and more. It predicts when items need restocking based on usage patterns and provides smart reminders.

No accounts, no cloud sync, no internet dependency. Just your data, in your browser.

Why I Built This 🔗

This started from a real problem: I had scattered text notes across different apps about when I last bought batteries, replaced my toothbrush head, or restocked razor blades. Every time something ran out, I’d realize I’d forgotten to track it. A dedicated tracker with automatic predictions seemed obvious—but every existing app either required cloud accounts or was overcomplicated for something so simple.

The core insight: the more you use Konsu, the smarter it gets. Every restock event teaches the prediction engine your actual usage patterns, turning manual tracking into automatic foresight.

Key Features 🔗

Component-Level Tracking 🔗

Items can have sub-components (e.g., brush heads for an electric toothbrush). Track each component’s lifecycle independently with per-component predictions. A toothbrush handle lasts years; its brush heads need replacing every 3 months. Konsu tracks both.

Semantic Action Verbs 🔗

History entries use meaningful verbs—New, Restock, Replace, Charge, Empty, Service, Other—instead of a single “restock” concept. This enables fine-grained lifecycle tracking per item. Replacing razor blades is different from recharging batteries, and the data reflects that.

Mobile-First UX 🔗

Bottom navigation, bottom sheets instead of modals, swipe gestures, and thumb-zone-optimized layouts. Designed for one-handed use on a phone.

Accessibility-First 🔗

WCAG 2.1 AA compliance: 44px minimum touch targets, full keyboard navigation, screen reader support, and prefers-reduced-motion respect. This wasn’t an afterthought—it was a hard requirement from the start.

Onboarding 🔗

A welcome screen with feature carousel helps new users understand the app without a manual. Items can be seeded from templates to solve the cold-start problem.

Backup & Restore 🔗

Export and import your data. No vendor lock-in.

PWA 🔗

Installable to home screen with full offline support.

Build Notes 🔗

TinyBase for Local-First Data 🔗

TinyBase provides a reactive, relational data store that persists to IndexedDB. Unlike traditional state management, TinyBase handles both the in-memory store and persistence layer, making reactive queries trivial. The schema tracks items, components, history entries, and categories.