Konsu

Overview 🔗

Konsu is a local-first web app for tracking household consumables: the items you regularly buy, refill, replace, or recharge. It predicts when items need attention from usage history and prioritizes what needs restocking.

The core data stays in the browser through IndexedDB. There are no accounts or cloud sync in the current app, and the PWA can continue working offline.

Why I Built This 🔗

This started from a real problem: I had scattered notes about when I last bought batteries, replaced a toothbrush head, or restocked razor blades. A dedicated tracker with automatic predictions seemed more useful than trying to remember each date.

Each action adds to the usage history. The prediction engine uses that history to estimate when a recurring action is due again.

Key Features 🔗

Component-Level Tracking 🔗

Items can have sub-components, such as brush heads for an electric toothbrush. Track each component’s lifecycle independently with per-component predictions.

Semantic Action Verbs 🔗

History entries use meaningful verbs such as New, Restock, Replace, Charge, Empty, and Service instead of treating every event as a restock. This lets the app track different item lifecycles separately.

Usage-Based Priorities 🔗

Items are sorted by urgency from their history and prediction data. Prediction cards show the estimated interval, remaining days, and next predicted date when enough history is available.

Mobile-First UX 🔗

Bottom navigation, bottom sheets, swipe gestures, and thumb-zone-oriented layouts support one-handed use on a phone.

Accessible UI 🔗

The interface uses React Aria-based primitives and includes reduced-motion handling. Accessibility is treated as part of the component and interaction work rather than a separate layer.

Onboarding 🔗

A welcome flow and item templates help new users get started without building every item from scratch.

Backup and Restore 🔗

Export and import your data without vendor lock-in.

PWA 🔗

Install the app to the home screen and use it offline.

Build Notes 🔗

TinyBase for Local-First Data 🔗

TinyBase provides a reactive, relational data store that persists to IndexedDB. The schema tracks items, components, history entries, and categories.

Prediction and Offline Flow 🔗

The prediction engine derives median intervals from history and displays a next date and remaining-day estimate when there is enough data. The PWA stores the app’s data locally, so cloud sync is not required for normal use.