Interactive — this is the real build running inside the page.Full screen
What it does
BASKET is an online supermarket for Beirut built around cooking. Pick fattoush, mujaddara, a chicken shawarma bowl or pancakes, set the table size and every ingredient rescales to what the store actually sells, with pantry staples and recent buys already unticked; one tap drops them all into the basket. Produce and meat are weighed in 0.5 kg steps, every item carries its own out-of-stock rule, and checkout books a two-hour slot from live capacity or 30-minute express checked by neighbourhood.
Signature interaction
Pick a recipe, slide the table from 4 to 6 people and watch every quantity rescale to what the store sells; untick what you already have, tap Add 9 items and each ingredient arcs across the page into the basket rail one after another while the total counts up.
What works in it
Recipe to basket with a servings slider that rescales every ingredient
Pantry staples and recent buys unticked automatically
Staggered drop of each ingredient into the basket rail
Produce and meat sold by weight in 0.5 kg steps with a live scale
Out-of-stock rule per item: best match, call me or refund
Express checker by Beirut neighbourhood with a delivery radar
Three-day delivery slot grid with capacity bars and full slots disabled
Buy 2 get 1 free on dairy, applied and nudged in the basket
Olive oil bundle tiers: Single, Duo save 10%, Trio save 15%
Reorder a past order in full or item by item
Aisle navigation with filters, sort and search across every aisle
Four-step checkout with cash on delivery, Whish, OMT or card and SITESUP10
Motion preview
Screen recording of the live build, running on sample data.
Features inside this build
E-commerce
Product Bundles
Two bundle mechanics in one feature: tier cards for a single product (Single, Duo −15%, Trio −25%) with per-bottle flavour picks, and a build-your-own box where every item moves a progress bar toward the next discount tier, with a live price breakdown and an animated savings counter.
A 24-product catalogue with faceted filters for category, price (dual slider over a price histogram), colour swatches, size, rating and in-stock. Active filters show as removable chips, counts update live, the grid re-sorts with smooth FLIP animation and the whole state lives in the URL so a filtered view can be shared.
A four-step 'Almost yours.' checkout: contact and Lebanese address with inline validation, delivery zones priced by city with speed options, a calendar and time windows, payment by cash on delivery (USD or LBP), card with live brand detection, Luhn check and a flipping card preview, or a simulated Whish link, then a review with edit links and an order confirmation.