Field Operations · Community Product

Bakery Live Tracker Building What Matters

How I turned a real-world community pain point into a working, AI-augmented field-operations platform in record time.

Password: 8821

The Spark

Product Discovery in a Village

A mobile B2B bakery truck is a beloved local service — but customers never knew exactly when it would arrive. Missed pre-orders, wasted trips, and people waiting in the cold became a recurring frustration.

The goal was never a "pretty website." It was a system that helps the business run more efficiently and serves the community with meaningful, timely information.

B2B Field Ops Community UX Real Problem

Live van map view — Live map & town tracking

Mobile bakery van — Live map & town tracking

Daily stock view — Daily stock at a glance

Designer as Builder

The AI-Augmented Pipeline

Google Stitch → MCP → Cursor IDE allowed a single designer to move from concept to production-ready UI in days — not months.

The honest twist: AI generates beautiful components, but not system integration. The real engineering win was merging static Stitch output into a working logic layer — with custom sandbox discipline via .stitch-preview — so experiments never polluted production.

"AI accelerates the surface. Architecture, state, and edge cases still need a builder who owns the system."

For Engineering Leads

Deep-Dive Architecture

Production decisions that survived real field conditions — not demo-day polish.

Serverless Field-Ops on Vercel expand_more

100% serverless with 8+ API routes handling location ingest, multi-town Web Push notifications via VAPID, and client polling — without a heavy backend footprint.

Dual-Layout System expand_more

Shared business logic via an initTownTracker factory driving two completely separate DOM surfaces simultaneously: a desktop dashboard and a map-first mobile shell.

Spreadsheet-Native CMS expand_more

Google Sheets as an operational CMS with Apps Script write-backs and PIN authentication — zero client training required for daily stock and schedule updates.

The GPS Pipeline expand_more

Built for real-world edge cases: normalizing nested OwnTracks coordinate payloads, fixing a 3.3 km geofence center bug in Nagycenk, and enforcing 1-hour notification cooldowns to prevent alert spam.

Push notification on lock screen — Web Push on arrival

Pre-order flow — Pre-order before the van arrives

Results

Metrics & Impact

~2,500

Lines of production UI code

Languages (UI + Push)

Infrastructure cost

HU / DE / EN supported across UI and push notifications. Powered by Vercel Serverless and Google Apps Script.

Product Demos

See It in Action

Four focused screen recordings — one flow at a time, from the live app.

01 · GPS

Live GPS & Schedule

The van's real position runs in parallel with Google Maps — alongside the actual route schedule, so customers see where the truck is and when it will arrive.

02 · Notification

Arrival Notifications

One tap to subscribe. When the van enters a town, subscribers get a push alert — no app store, no manual refresh.

03 · Product List

Sheet-Native Product Names

The client edits product names directly in a Google Drive spreadsheet. Changes sync to the live site — no custom admin panel, no training.

04 · Stock

Driver Stock Control

From a PIN-protected driver page, sold items are logged with +/− controls. The sheet updates instantly — and quantities on the public page change in real time.

Built for the Community

This project is proof that the best portfolio work solves real problems — with speed, restraint, and architecture that holds up in the field.

open_in_new Live Demo arrow_forward Next: Földvary.com

calendar_month Reserve