arrow_backAll work

Stock Count

A phone-first counting app for the warehouse floor that keeps working offline.

Context
Internal tool · The Branding Club
Year
2026
Role
Design & development
Stack
Vanilla JShtml5-qrcodeCloudflare WorkersGoogle Apps ScriptlocalStorage

scienceTap the highlighted location, count a product with the keypad (try a number that doesn't match) and save. Then open the sync panel, switch on "Simulate offline", count a few more and watch the queue drain when you go back online. Everything in this demo is dummy data.

open_in_fullFull screen

Stock Count is the app our logistics team uses to count stock location by location on their phones. Scan a location, scan a product, count the boxes, and every row lands in the shared stock sheet that the office reconciles against the warehouse system.

The problem

Counting used to mean clipboards and typing the results over afterwards. Every count was a day late, typos went unnoticed, and a difference between shelf and system only surfaced when an order could not be picked. The warehouse Wi-Fi also drops out between the racks, so a web form that needs the network for every save was not an option.

The approach

I built it as a single HTML file with no build step, served by a Cloudflare Worker that also handles sign-in and proxies the article lookups, so no key ever reaches the phone. A wizard keeps each count to four steps: location, product, boxes, details. Scanning an EAN or an order-line barcode fills in the product, member and pieces per box, and typing only the last six digits is enough when a label is torn. Every row goes into a local queue first and syncs to the sheet in the background, retrying on a timer, on reconnect and on tab focus, so nothing is lost when the connection drops.

Highlights

  • checkOffline-first: rows queue on the phone and sync automatically when the network is back
  • checkCamera scanning for EAN-13 and Code 128, with a last-six-digits search when a label won't scan
  • checkShows what the warehouse system expects at each location, so a difference is spotted while the counter is still at the shelf
  • checkLarge touch targets throughout: one question per step, a big stepper and number input
  • checkOne base, three flows: cycle counts, stock corrections, and goods-receipt counts checked against the purchase order