- This is a submission for Frontend Challenge - Comfort Food Edition, Perfect Landing
What I Built
Nairobi runs on a chaotic, vibrant energy. Professionals working from boutique hotels in Westlands or Kilimani need food that matches that energy: fast, healthy, and unapologetically local.
The stereotype of "boring village food" is dead. I built Pamoja Plate—a digital love letter to Kenya's culinary diversity. It’s not just a food delivery site; it’s an interactive journey through the country's regions, all unified on a single plate.
The Concept:
Instead of a standard menu grid, I built an interactive "Unity Plate" experience. Using a custom accessible accordion pattern, users can explore six distinct regional dishes—from the Omena of Lake Victoria (Nyanza) and Wali wa Nazi of the Coast to Nyama Choma of the Rift Valley and Ugali from the Central highlands. When a user clicks a dish, a CSS-art platter visually highlights that specific region's contribution, creating a dynamic, educational, and mouth-watering UX.
Demo
Journey
I wanted to capture a highly specific, localized persona rather than relying on a generic template. The challenge was combining professional investor-ready design with authentic local slang and vibe.
What I Learned:
- Responsive Image Mapping is Hard: Attempting to overlay clickable hotspots (blobs) precisely over a photograph using CSS percentages is highly susceptible to breaking when aspect ratios change.
- Accessible Alternatives Win: Moving to a "Pill Navigation" system not only solved the responsive layout issues but also vastly improved accessibility. Users no longer have to guess where to click; the options are explicit.
-
Single Source of Truth: Using a single piece of React state (
activeLayer) to drive both the pill button highlighting and the accordion dropdown state is an elegant way to synchronize disconnected UI elements.
What I'm Proud Of:
The transition from a frustrating, brittle interaction (the image hotspots) to a clean, highly accessible pill navigation system. The interface now feels synchronized and responsive.
I'm particularly proud of the pure CSS art component in the Hero section— rendered entirely using CSS and HTML div primitives, complete with a custom gradient for the steam animation keyframes. I also focused heavily on accessibility, ensuring semantic HTML, high contrast text ratios, and aria-pressed states on the interactive guarantee toggle.
Next up, I plan to integrate the WhatsApp Business API directly into the ordering flow for the "25-Minute Flex" rider logistics!
Members
Top comments (0)