The Super Bowl
The Super Bowl is a branded storefront built on a multi-tenant Next.js 16 commerce platform I architected for the Trust ecosystem. The codebase uses a skeleton-branch model: `main` holds all business logic, data access, and base UI, while each brand lives on its own branch that customizes visuals only — kept in sync automatically through GitHub Actions. This lets a single engineering effort serve many storefronts without forking the product. The platform adapts at runtime to three store topologies — a single store, a single store with branches, and a full multi-store marketplace — so the same feature set works whether a merchant runs one kitchen or dozens. Customers browse a catalog with variations, add-ons, and spec-based search, build a server-managed cart, and check out through a form whose fields are driven entirely by backend configuration. Delivery flows resolve the right branch and area from a Google Maps location picker, persist saved addresses per customer, and support both guest and authenticated ordering, including online VISA payment with a polled payment-result page. The whole application is bilingual English/Arabic with true RTL support, built on a strict per-feature layered architecture (presentation → application → domain → infrastructure) that keeps every feature independently ownable. For The Super Bowl specifically I built a dedicated design system — a pine/rust/sage/cream palette, custom Gotham and Bright Melody typefaces, and bespoke swirl and letterform pattern components — plus playful Egyptian-Arabic copy rather than literal MSA translation.
Overview
A Next.js storefront powering branded online-ordering experiences, with The Super Bowl as its flagship brand.
Key Challenges
- Keeping brand branches mergeable — required strict file-boundary rules separating business logic (skeleton) from visuals (brand) so auto-sync rarely conflicts.
- Making one storefront serve three store topologies without leaking topology conditionals across every feature.
- Resolving delivery eligibility across store-wide flags and per-branch backend rejections, which surface through different channels.
- Achieving genuine RTL rather than a mirrored LTR layout — logical Tailwind properties, directional icon handling, and no hardcoded left/right anywhere.
- Modelling multi-section catalog responses so each consumer filters by section type instead of creating phantom entities.
Key Achievements
- Built The Super Bowl design system end-to-end: custom palette, licensed display typefaces, and reusable pattern components, with Egyptian-dialect Arabic copy.
- Implemented guest-capable ordering with online VISA payment, including redirect handling and a polled payment-result page.
- Designed a backend-driven dynamic checkout form that renders arbitrary field configurations and embeds either standalone or namespaced under a parent form.
- Delivered full English/Arabic RTL support using logical-direction styling throughout, with locale as a URL segment and translation-forced component APIs.
- Built a single feature set that adapts at runtime to three store topologies (one store, one store with branches, multi-store) without per-topology forks.
- Architected a skeleton-plus-brand-branch model that lets one codebase serve multiple branded storefronts, with automated main-to-brand sync via GitHub Actions.