Problem
Malawi's small business owners needed an accessible, low-friction way to issue compliant electronic invoices without installing native apps or purchasing expensive dedicated POS hardware. The solution had to work on the devices they already own, handle unreliable internet gracefully, and support both English and Chichewa to reach the widest possible user base.
Approach
Built as a mobile-first PWA using React 18 and TypeScript, the app runs in any modern browser and can be installed to the home screen with no app-store dependency. The UI is built on Tailwind CSS with Radix UI primitives, giving it a native-feeling interaction model with accessible, composable components.
Sales Workflow
The core sales flow is optimized for speed:
- Product catalog with search, category filters, and camera-based barcode scanning
- Quick-Tap mode (⚡) for high-volume environments — tap a product and it's instantly submitted as a 1-unit cash sale
- Cart panel with quantity controls, per-item discounts, invoice type selection (Standard / Credit Note / Debit Note), and saved customer autocomplete
- VAT5 integration — look up certificates by TIN or number inline during a sale
- Payment handling with cash (amount tendered / change calculation), card, and mobile money options
- Receipt generation — view, print, share as PDF, or display QR code for MRA verification
Offline Resilience
When connectivity drops, sales are recorded locally and queued for submission. The history screen shows transaction status with clear offline/failed indicators, and provides one-tap retry or recreation for expired offline receipts.
Multi-Role Interface
- Cashiers see the sales-focused shell: home dashboard, sales, history, settings
- Admins get a manage hub with user management, product CRUD, stock operations, raw materials, VAT5 certificates, shift reports, and terminal configuration
- Ops admins access an operations center with organization health stats, subscription management, and payment logging
Real-Time Sync
Socket.IO integration means all connected terminals in an organization see sales, stock changes, and configuration updates the moment they happen — no manual refresh needed.
Technical Highlights
- Zustand for persistent client-side state (auth, cart, preferences) with localStorage rehydration
- TanStack Query for server state, caching, and background refetching
- i18next powering full English/Chichewa localization
- Framer Motion for polished micro-interactions and page transitions
- Vitest + Testing Library for component and integration tests
- PWA manifest + service worker for installability and offline shell caching
Outcome
The PWA is the primary client in the Tengai POS ecosystem, deployed and demo'd to stakeholders for MRA certification review. It eliminates the app-store barrier entirely — businesses can start issuing compliant invoices within minutes of visiting the URL and completing the onboarding wizard.