Internal██████·NDA
2024 – 2025 · Frontend engineer
storefront.
Deli-counter complexity, made to feel like one tap.
Build your sandwich
Pick your bread. Add your toppings.
$10.00
Bread · choose one
Sourdough
Rye
Whole wheat
Toppings · add as many as you like
Pickles
+$0.50/eaTomato
Onion
Cheese
+$1.00/eathe modifier — same component, different complexity.
01 — Premise
food-ordering doesn’t fit generic e-commerce.
Independent food retailers — delis, specialty grocers, beverage shops — needed online ordering that could handle modifier groups, per-option quantity limits, and per-location availability. Existing platforms were either generic e-commerce that buckled under the complexity, or enterprise tools priced out of reach.
From a bottled drink to a fully-customized sandwich.
— Same flow
02 — Build
modifiers, composed.
I built the modifier UI as a composable system that distinguishes counter-based modifiers (extra pickles, +1) from single-selection modifiers (choose a bread). The same product page renders a soda and a build-your-own sandwich — complexity surfaces only when the data demands it.
03 — Constraint
non-technical users author pages.
The CMS lets non-technical users compose pages — hero, carousel, collection grid, text block — in any order, with custom CSS per block. The frontend has to render whatever ships, defensively, and let authored styles coexist with the design system without one breaking the other.
Page composer
Any block, any order. Authored CSS coexists with the system.
Hero
Collection grid
Text block
Featured items
the composer — any block, any order.
04 — Stack
the kit.
- FrontendReact meta-framework · TypeScript · Tailwind CSS
- DataGraphQL · codegen-typed client
- ContentHeadless CMS · dynamic component blocks
- AuthFirebase
- PaymentsTokenized · PCI-safe
- ObservabilitySentry
Gated · NDA
More on the storefront.
Next — 04
design system.
The shared language every surface inherits before it asks the user anything.
Read the case study