Logo Lanfrica

Bena-Nyagah2/mpesa-mockup-pwa

Domain:

digital infrastructure

Record type:

software
Creator:
Ben
Host:
# M-Pesa Mockup Generator Offline-first PWA for generating realistic M-Pesa transaction mockups with two display modes: Truecaller-style light receipts and Android dark mode SMS threads. ## Architecture - **Monolithic single-file app** — All UI, logic, and styling in `index.html` - **Tailwind CSS via CDN** — No build step, no Node dependencies - **Vanilla JavaScript** — Zero frameworks, zero bundlers - **PWA** — Installable with offline support via Service Worker ## Core Features | Feature | Description | |---------|-------------| | **PIN Wall** | Hardcoded 4-digit PIN locks the UI on load | | **Admin Panel** | Secondary PIN (`0000`) unlocks admin config and usage stats | | **Time Bomb** | Global access revoked after Aug 30, 2026; forces cache wipe | | **Auto-Lock** | App re-locks after 30 seconds of DOM inactivity | | **Rate Limiter** | Daily mockup cap (default 5/day, configurable), midnight reset, hard block with admin bypass | | **Ghost Queue** | Failed logs vaulted to `localStorage` and background-synced on reconnect via `online` event tripwire | | **Enhanced Logging** | Every action tagged with `[USER:uuid] [DEVICE:model] [OS:os] [ACTION:type]` for attribution | | **Dual View** | Truecaller light receipt or Android dark mode SMS thread | | **Dynamic History** | Dark mode generates realistic 2-3 prior chat entries from name/type/amount pools | | **Smart Parser** | Regex-based raw SMS auto-fill (transaction ID, amount, date, recipient, paybill account) | | **Cost Auto-Calc** | M-Pesa Kenya fee lookup table auto-fills transaction cost (overridable) | | **Editable Balance** | M-Pesa balance is an editable field (default Ksh 8,500) | | **Hardware Detection** | User-Agent Client Hints API to capture exact device model | ## File Structure ``` . ├── index.html # Monolithic app (UI + JS + Tailwind) ├── sw.js # Service Worker (Network-First, Fallback-to-Cache) ├── manifest.json # PWA manifest └── assets/ ├── mpesa-logo.png ├── truecal …