Build · 1h 30m · ₹0
An offline-first Progressive Web App that turns informal WhatsApp group chat exports into a structured, queryable meal delivery and payment ledger using local IndexedDB.
What it does
The mechanics, data flow, and user interaction model behind Tiffinly.
Daily meal tracking (breakfast/lunch/dinner, marked ordered/skipped) feeds an interactive monthly calendar view, spending analytics, and payment status tracking. The standout capability is WhatsApp import: export an informal tiffin group chat log, paste it into the built-in parser, and Tiffinly extracts and auto-detects meal orders, cancellations, and prices from unstructured text — creating an instant verifiable ledger without requiring the tiffin vendor to change their operations. All data is persisted client-side in IndexedDB via Dexie.js, making the app 100% offline-functional and installable as a native PWA on iOS, Android, and desktop.
Technical Highlights
- Custom WhatsApp chat-export parser (regex heuristics extracting meal types, quantities, and dates from informal conversational syntax)
- 100% Offline-First architecture: client-side IndexedDB via Dexie.js as the primary source of truth
- Unified multi-source schema: cleanly reconciles manual calendar entries and chat-imported records via provenance tracking
- PWA installation package with offline service workers, web app manifests, and home-screen icon support across iOS and Android
- Monthly spending analytics and payment reconciliation visualizer powered by Recharts
Why it matters
The architectural judgment, practical engineering decisions, and core problems solved.
Informal recurring service arrangements across India and South Asia (tiffin meals, laundry, daily milk delivery) operate almost entirely inside scattered WhatsApp group chats without any formal record-keeping layer. Customers either lose track of monthly totals or spend hours manually scrolling back to tally up payments. An offline-first PWA is the ideal architecture: zero backend maintenance, zero login barrier, zero recurring cloud costs, and flawless functionality even in basements and dorms with spotty connectivity.
College students and hostel residents tracking daily mess/tiffin subscription expenses
Informal recurring service tracking (local laundry pick-ups, daily newspaper/milk subscriptions)
Small residential tiffin providers keeping a lightweight, offline customer order ledger
Personal expense accountability and budgeting for shared flat/roommate meal splits
System architecture
End-to-end execution pipeline running across React 18, Dexie.js, IndexedDB, Tailwind CSS, Vite PWA.
Regex state machine parsing timestamps, sender names, and keywords ('1 lunch', 'skip dinner', 'half plate') from exported text logs
Maps parsed tokens into structured Order objects with meal type, date, price, and provenance ('manual' vs 'whatsapp_import')
Local client-side database with reactive live queries across Orders, Settings, and Payments tables
Generates monthly spend breakdowns, unpaid balance summaries, and skipped meal savings metrics
Service worker asset caching and Web App Manifest for native home-screen installation
The path
Step-by-step implementation guide. Verbatim code snippets, configurations, and prompts.
Building the WhatsApp Chat Export Regex Parser
Write a robust parser supporting 12-hour and 24-hour timestamp variations across iOS and Android exports, detecting meal intent keywords and cancellation markers.
Verbatim Code / Config
const WA_REGEX = /^(?:\[?(\d{1,2}\/\d{1,2}\/\d{2,4}),?\s+(\d{1,2}:\d{2}(?::\d{2})?\s*(?:[ap]m)?)\]?\s*(?:-|:)?\s*([^:]+):\s*(.*)$/i;
// Extract date, sender, and message; match keywords: 'lunch', 'dinner', 'roti', 'extra', 'cancel', 'skip'Configuring Dexie.js Client-Side Schema
Define the local IndexedDB database schema with indexed keys on date, mealType, paymentStatus, and source for rapid calendar lookups.
Verbatim Code / Config
export class TiffinDatabase extends Dexie {
orders!: Table<Order>;
payments!: Table<Payment>;
settings!: Table<Settings>;
constructor() {
super('TiffinlyDB');
this.version(1).stores({
orders: '++id, date, mealType, status, source',
payments: '++id, date, amount, method',
settings: 'key'
});
}
}Creating the Interactive Calendar & Ledger UI
Build month-view and week-view meal toggles allowing one-click switching between Ordered, Skipped, and Extra across breakfast, lunch, and dinner.
Verbatim Code / Config
// Render interactive day cell with meal pills
<div className='p-2 border rounded'>
<span className='font-mono'>{dayNumber}</span>
<MealPill type='lunch' status={order?.lunch} onToggle={() => toggleMeal(date, 'lunch')} />
<MealPill type='dinner' status={order?.dinner} onToggle={() => toggleMeal(date, 'dinner')} />
</div>PWA Service Worker & Manifest Configuration
Configure Vite PWA plugin with CacheFirst strategies for static assets and local storage fallback, enabling native standalone execution without network access.
Verbatim Code / Config
VitePWA({
registerType: 'autoUpdate',
manifest: { name: 'Tiffinly', short_name: 'Tiffinly', theme_color: '#ea580c', display: 'standalone' },
workbox: { globPatterns: ['**/*.{js,css,html,ico,png,svg}'] }
})Where it broke
The failure mode, root-cause breakdown, and resolution discovered during development.
The Tell
“WhatsApp exports from Android and iOS used completely different timestamp formats (brackets vs. hyphens, 12h AM/PM vs. 24h military time), breaking chat ingestion for half the test users.”
Why it failed
iOS exports formatted lines as '[15/08/24, 1:30:15 PM] Name: Message' while Android formatted as '15/08/24, 13:30 - Name: Message'. A rigid single regex crashed when parsing the opposite platform.
The Fix
Built a multi-pattern regex fallback tokenizer that inspects the first 5 lines of the chat log to auto-detect platform dialect (iOS bracketed vs. Android hyphenated) before executing the batch parser.
What it cost
₹0 to build and run permanently within verified free tiers.
| Service / Tool | Cost | Free Tier Limits |
|---|---|---|
| React 18 & Vite | ₹0 | Open-source frontend hosted on GitHub Pages |
| Dexie.js (IndexedDB) | ₹0 | Zero-cloud local client-side storage library |
| Vite PWA Plugin | ₹0 | Zero-cost service worker caching and native manifest generation |
| Tailwind CSS & Lucide Icons | ₹0 | Open-source design system |
| Recharts Library | ₹0 | Open-source SVG data visualization suite |
Make it yours
Three concrete variations you can build and ship using this exact foundation.
- 01
Daily Milk & Dairy Delivery Ledger: Tracks daily milk literage, curd, and butter orders with monthly invoice reconciliation.
- 02
Hostel Laundry Service Tracker: Logs clothes dropped off, returned item counts, and ironed vs. washed rates.
- 03
Shared Flat Grocery Splitter: Parses shared apartment WhatsApp notes to tally who bought groceries and calculates end-of-month settlement totals.
Where next
Ready to ship Tiffinly?
Review the architecture, clone the prompt and implementation steps, and deploy your live URL for ₹0.