Vada Pav – 뭄바이에서 가장 좋아하는 길거리 음식을 위한 인터랙티브 랜딩 페이지

“Frontend Challenge Perfect Landing Submission 🍲🥧

This is a submission for Frontend Challenge – Comfort Food Edition, Perfect Landing.

An interactive landing page for vada pav — not a restaurant, not a recipe blog, a love letter to one dish that means something specific to me.

Vada pav is comfort food that people from Maharashtra will defend with real conviction — everyone has an opinion about the right ratio of garlic chutney to green, whether onion belongs on it, and which cart does it best. I wanted the page to feel like the dish itself: warm, a little chaotic, and specific rather than generic.

What I Built

The site has a hero section with an animated illustration (continuous steam, twinkling string lights evoking a stall at dusk, a slow monsoon-rain layer in the background), a personal story section, a four-moment “Day With It” timeline walking through the same dish at different times of day, and an interactive centerpiece: the Vada Pav Builder.

The builder lets you toggle five real toppings — green chutney, dry garlic chutney, a fried chili, raw onion, and sev — and watch them stack in the correct order on an SVG sandwich, regardless of what order you click them in. As you build, a live-generated sentence describes your exact combination in plain English, and an animated heat meter tracks how spicy your choices are.

Demo

Live site: https://mumbaivadapav.netlify.app/

CodePen: https://codepen.io/editor/lvjstkex-the-vuer/pen/019ff081-af80-78e8-8213-5a8a3f37f6cb

Journey

I wanted to avoid the landing-page defaults I kept seeing myself reach for — a cream background with a single warm accent, or a generic hero with a stock gradient. Since vada pav already has a strong, specific visual identity, I built the palette directly from the dish instead: a deep frying-oil brown-black (the kadhai it’s cooked in), turmeric gold, chili red, and curry-leaf green, with a warm cream reserved for the reading sections.

The Vada Pav Builder is the part I’m most proud of. Under the hood it’s plain vanilla JavaScript — a state object mapping each ingredient to a boolean, rendered into a fixed-order stack using CSS order so the sandwich always assembles correctly no matter which order you click ingredients in. Tying it to three things at once — the visual stack, a live-generated natural-language sentence, and an animated heat meter — is what took it from “a toggle list” to something that actually feels like assembling food.

The “Day With It” timeline walks through the dish at four real moments (a station-platform grab, after school, a monsoon evening under a stall’s tarpaulin, and the last cart open at night) — a real sequence, not just a stylistic list, which is why it’s numbered/ordered rather than presented as flat cards.

On accessibility: every ingredient toggle is a real <button aria-pressed>, not a clickable div; an aria-live region announces each addition and removal for screen reader users; all interactive elements have visible keyboard focus states; and every animation — the steam, the string lights, the stack’s spring-in motion, the rain layer — is disabled cleanly via a prefers-reduced-motion check, both in CSS and in the JavaScript that spawns the sparkle effects.

The whole thing is a single self-contained HTML file — no build step, no framework — which felt like the right scope for a food-themed love letter rather than a full application.

Thanks for reading — go find your own fifteen-rupee miracle. 🌶️