Milk Delivery PWA

About the Project

This Progressive Web App was built for a local dairy business in Pakistan that was managing daily milk deliveries using pen-and-paper ledgers. The business needed a digital system to handle daily subscriptions, one-time orders, billing records, and delivery route tracking — but did not have the budget for native iOS and Android apps. A PWA was the perfect solution: it provides a native app-like experience that customers can install directly from their browser, works offline for delivery agents in areas with poor connectivity, and sends push notifications for delivery updates. The entire system runs on a single codebase, saving the business thousands of dollars compared to separate native app development.

Key Features

• Daily subscription management with flexible scheduling
• Offline support via Service Workers for areas with poor internet
• Push notifications for real-time delivery status updates
• Admin dashboard for delivery agents to manage routes and orders
• Customer portal for viewing order history and managing subscriptions
• Billing and payment tracking with monthly summaries
• Installable on any phone directly from the browser — no app store needed
• Responsive design optimized for mobile-first usage in the field

The Challenge

The biggest challenge was building a reliable system that works in areas with inconsistent internet connectivity — delivery agents often travel to neighborhoods in Karachi where mobile data is slow or unavailable. The app needed to function offline and sync data automatically when connectivity returns. Additionally, the business owner needed an admin interface simple enough to use without any technical training, while still being powerful enough to handle hundreds of daily orders and customer records.

The Solution

I implemented Service Workers with a smart caching strategy using Workbox, which caches essential app resources and queues data changes (new orders, delivery confirmations) for background sync when the device reconnects. Firebase Realtime Database handles the cloud data layer with built-in conflict resolution for simultaneous updates from multiple delivery agents. The admin dashboard uses a clean, card-based UI with large touch targets designed specifically for use on mobile phones while on delivery routes. The customer-facing side shows a simple subscription management interface with WhatsApp integration for direct communication.

Results & Impact

• Replaced 100% of paper-based tracking with a fully digital system
• Delivery agents can update orders offline — data syncs automatically
• Customers receive push notification updates for every delivery
• Cost savings of over 80% compared to native iOS + Android development
• Admin can manage 200+ daily orders from a single mobile dashboard

Technical Deep Dive

The frontend is built with Next.js and styled using Tailwind CSS for rapid, mobile-first development. Firebase provides the backend infrastructure: Realtime Database for order and subscription data, Firebase Authentication for secure user login, and Firebase Cloud Messaging for push notifications. The PWA layer is implemented with a custom Service Worker powered by Workbox, which handles precaching of static assets, runtime caching of API responses, and background sync for offline data persistence. The app is deployed on Vercel with automatic SSL, CDN distribution, and zero-downtime deployments. Monthly billing calculations run as serverless functions triggered by Firebase Cloud Functions.