E-commerce · Online Supermarket

BASKET

A Beirut fresh-market supermarket where one recipe fills the whole basket

Interactive — this is the real build running inside the page. Full screen
BASKET — screen from the live build

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

Product Bundles — the feature running live
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.

Try it
Advanced Product Filters — the feature running live
E-commerce

Advanced Product Filters

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.

Try it
Multi-step Checkout — the feature running live
E-commerce

Multi-step Checkout

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.

Try it