/projects
ShopMetrics
A retail product analytics command center rebuilt from Apple product analytics work, using synthetic data for the public demo.
- RoleProduct Analytics Engineer
- Timeline2026
- Statuscompleted
- StackNext.js, React 19, TypeScript, Product Analytics
/origin
From an internal analytics workflow to a public demo
ShopMetrics is based on product analytics work I created at Apple, rebuilt as a fictional retail electronics dashboard so the product thinking can be shared without exposing internal data or implementation details.
The original problem was operational clarity. Product, support, and field teams had useful signals scattered across tickets, store activity, planogram status, order behavior, and app telemetry. The goal was to turn that into a single place where someone could understand what was happening, where it was happening, and what needed attention next.
A dashboard is only useful if it helps a team decide what to do next.
The public version keeps the shape of that work: geographic drill-downs, support root-cause analysis, adoption tracking, fixture digitization, telemetry health, and exportable tables. Every record in the demo is synthetic.
/overview
A product analytics command center for retail operations
The app brings several operating domains into one interface, with shared navigation, regional context, trend summaries, and detail tables for investigation.
Executive Scan
A worldwide dashboard rolls up orders, open support work, store audits, missing planograms, and app sessions into one high-level view.
Geographic Context
A map-first entry point and region picker let users move between global and geo-specific views without losing context.
Investigative Depth
Each domain includes sortable, filterable tables with CSV export so teams can move from aggregate patterns to the actual records behind them.
/product-surface
The questions ShopMetrics is designed to answer
Each area is built around a real operating question rather than a chart type.
Support
What issues are trending, where are requests coming from, and which root causes are driving unresolved volume?
Orders
Which stores adopted a process, where are order anomalies appearing, and which line items need review?
Planograms
Which fixtures are missing or incomplete, how is completion changing over time, and which stores need follow-up?
Telemetry
How are sessions, app versions, crashes, and event patterns moving across the product experience?
/implementation
A fast, self-contained analytics demo
The public build is intentionally portable: deterministic mock data, no external database requirement, and a production-style Next.js architecture.
Frontend
Next.js 16, React 19, TypeScript, Tailwind CSS v4, shadcn/ui, and a responsive app shell.
Visualization
Recharts for KPI trends and domain charts, plus react-simple-maps for geographic exploration.
Data Layer
SWR-backed hooks, deterministic mock generators, server-side fallback data, and typed route handlers.
Workflow
Reusable data tables with filtering, multi-sort behavior, detail expansion, CSV export, and domain-specific summaries.
/demo
Explore the public version
The deployment is live with fictional retail electronics data and a demo user environment.
The demo keeps sensitive context out of the product while preserving the experience: a team can scan health, drill into a region, inspect drivers, and export the records that need action.
/read-this-next
Beating boredom with a stopwatch
Personal Project • 2025