Oscar POS: An Offline-First Point of Sale for Restaurants and Retail

Overview

Oscar is a point of sale (POS) system for restaurants and retail businesses in Pakistan, from single shops to franchises with many branches. It covers order taking, inventory, billing, payments, accounting and reporting in one system.

I worked on Oscar for about 2 years as a Senior Frontend Engineer. I started with the revamp of the whole React web app, then went on to build most of its screens and several of its hardest parts: the offline-first data layer, the real-time Kitchen Display System, printer routing, floor plans, and integrations with Pakistan's tax authorities. Although my title was on the frontend, a large part of my work was backend and data work.

The challenge

A POS can't stop working. A restaurant on a busy Friday night can't wait for the internet to come back before taking an order. Oscar had to:

• Keep taking orders, printing receipts and sending tickets to the kitchen even when the internet is down
• Sync everything back to the server reliably, without losing or duplicating orders
• Serve two very different businesses, restaurants and retail, from one product
• Send each order to the right kitchen screen and the right printer instantly
• Report every sale to the correct tax authority (FBR, SRB or PRA) depending on where the business operates
• Support many roles, from cashiers and waiters to managers and owners, each seeing only what they should

My role

• Web app revamp: rebuilt the UI across almost every screen
• Core POS flows: item creation, order punching (dine-in, takeaway, delivery), payments, discounts, taxes
• Offline-first data layer: designed the local database with WatermelonDB: data models, tables, relations and the functions that read and write them
• Sync with the backend: worked with the Django backend that receives local data and maps it to the main database
• Kitchen Display System (KDS): designed and built real-time order delivery to the kitchen over WebSockets
• Floor plans: creating floors and managing tables for dine-in orders
• Printing: printer connections with QZ Tray, routing each print (receipt, kitchen ticket) to the right printer
• Tax integrations: FBR (Federal Board of Revenue), SRB (Sindh Revenue Board) and PRA (Punjab Revenue Authority)
• Receipt customisation and loyalty programs
• User roles, permissions and reports

The approach

Offline-first, designed from the data up

Oscar stores its data in a local database inside the browser using WatermelonDB with browser storage, so the POS works the same with or without internet, with no app to install. Every feature started with data modelling: designing the tables, relations and the functions to create, update and query records, before any UI was built.

When the connection is available, local changes sync to the server. The Django backend receives these changes and maps them to the main database, so the cloud stays the source of truth for reporting across branches.

Order punching built for speed

Cashiers switch between Dine In, Takeaway and Delivery tabs, start a new order, recall saved orders, and see each order's table, customer, waiter, rider, status and amount at a glance (the order list is shown at the top of this page). Payment and printing are one click away, and new orders are punched from categories, items and deals, with keyboard shortcuts for speed.

oscar.pk

Real-time Kitchen Display System

When the cashier punches an order, it appears on the kitchen screen instantly over WebSockets, with no paper tickets and no running back and forth. Kitchen staff update preparation status, and the front of house sees it straight away.

Floor plans for dine-in

Restaurants design their own floors and tables. Waiters pick a table when starting a dine-in order, and managers can see which tables are occupied.

oscar.pk

Printing to the right printer

Using QZ Tray, the browser connects to local receipt and kitchen printers. I built the routing so each print goes to the right place: the customer receipt at the counter, kitchen tickets to the kitchen, and drinks to the bar. Receipts are customisable per business, with a live preview.

oscar.pk

Tax authority integration

Pakistani businesses must report sales to different tax authorities depending on their province and type: FBR (federal), SRB (Sindh) and PRA (Punjab). I integrated these so invoices are reported automatically and the receipt carries the required details.

One product for restaurants and retail

The same system serves restaurants (tables, waiters, kitchen, riders) and retail stores (item library, inventory, suppliers, purchase orders). The full module set includes the item library, orders history, customers, suppliers, reservations, floor plans, discounts, taxes, inventory management, purchase orders, billing, teams, devices, counters, accounting and settings.

Loyalty and roles

I built loyalty programs to reward returning customers, and role-based access so cashiers, waiters, managers and owners each see only the screens and actions they need.

Architecture

• React web app ↔ WatermelonDB
• React web app → QZ Tray: Print jobs
• QZ Tray → Printers
• WatermelonDB ↔ Django backend: Sync when online
• Django backend → Main database
• React web app ↔ Kitchen Display: WebSockets
• Django backend → FBR · SRB · PRA: Invoice reporting

Technical highlights

• Offline-first by design: data modelled for WatermelonDB first, so every feature works without internet and syncs later
• Real-time over WebSockets: orders reach the kitchen instantly
• Hardware from the browser: printer discovery and print routing with QZ Tray
• Government integrations: FBR, SRB and PRA invoice reporting built into the order flow
• Frontend engineer doing backend work: data modelling, sync logic and integration with the Django backend