DEV Community

Deep Bisen
Deep Bisen

Posted on

Ghar Ka Swad — A Journey Back Home 🍛

#frontendchallenge #devchallenge #css #webdev

Frontend Challenge Perfect Landing Submission 🍲🥧

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

Ghar Ka Swad 🍛

What I Built

Ghar Ka Swad (Hindi for "the taste of home") is an interactive journey through Indian comfort food — built around a simple idea:

Some meals don't just feed you. They bring you home.

Instead of building another restaurant or food-delivery landing page, I wanted to create an experience that connects food with memory, region, family, and the feeling of home.

Visitors discover comfort foods based on mood, travel through India's regional food traditions, walk through a recipe ritual step by step, explore the ingredients behind comfort, leave a memory on a shared wall, and build their own comfort plate — before arriving at a final, quiet emotional close.

Live Demo: https://deepbisen-06.github.io/ghar-ka-swad/
GitHub: https://github.com/deepbisen-06/ghar-ka-swad

✨ The Experience

The site moves through a single continuous narrative rather than disconnected sections:

  • 🍛 Comfort Discovery — "What feels like home to you?" A short, skippable mood prompt recommends a dish and a short emotional story before revealing the full site.
  • 🥘 Comfort Food Collection — Eight iconic dishes, each with a region, flavor profile, and a playful "comfort score" — clearly labeled as playful, not scientific.
  • 🇮🇳 India Journey — A custom, hand-illustrated SVG map (not Google Maps) lets you travel through North, West, South, East, and Northeast India, each region revealing its signature dish and food culture.
  • 📖 Recipe Journey — A scroll-driven walk through a Sunday Rajma Chawal ritual, step by step, with an optional distraction-free Cook Mode for actually cooking along.
  • 🌿 Ingredient Constellation — An SVG network connecting core Indian aromatics (turmeric, cardamom, cumin, ghee...) to the dishes they define.
  • 💭 Memory Wall — Postcard-style cards holding real comfort-food memories, with the option to leave your own — stored locally, no backend required.
  • 🫓 Comfort Plate — Build a plate from dishes you've discovered along the way, then share it.
  • ❤️ Final Journey — Everything you touched during the visit reassembles into one plate, closing on: "Maybe home was never a place. Maybe it was always the food waiting for you."

🎨 Design & Inspiration

I wanted Ghar Ka Swad to feel like an interactive editorial story, not a restaurant website. The visual direction combines:

  • Warm, earthy tones (parchment, terracotta, turmeric gold, olive) used deliberately, not as a wash-of-orange
  • Cormorant Garamond for editorial headings, Inter for restrained body text
  • Custom SVG illustrations — the India map, ingredient constellation, and comfort-score meters are all hand-built vectors, not stock assets
  • Subtle motion: rising steam, floating spice motes, scroll-driven reveals — used sparingly, never as decoration for its own sake
  • Responsive layouts designed intentionally per breakpoint, not just desktop stacked down to mobile

The goal throughout was for every section to feel like another page in the same story, rather than a stitched-together set of landing-page blocks.

♿ Accessibility

Accessibility wasn't a pass at the end — it shaped how each interactive feature was built:

  • Every interactive element — including the custom SVG India map and the ingredient constellation — is fully reachable and operable by keyboard alone (Tab, Enter, Space, arrow keys where relevant)
  • Visible, high-contrast focus states throughout
  • A single accessible dialog primitive handles focus trapping, Escape to dismiss, and focus restoration everywhere a dialog appears, instead of ad hoc handling per feature
  • Dynamic content changes — a Comfort Discovery recommendation appearing, a dish added to your plate — are announced via aria-live regions for screen reader users
  • Full prefers-reduced-motion support: parallax, steam animation, and smooth-scroll are disabled entirely, with content remaining fully usable
  • Color pairings verified against WCAG AA contrast minimums

⚡ Performance


This came from keeping the dependency list deliberately small, hand-building lightweight SVGs instead of reaching for a particle/canvas library, and making sure every animation and layout was built to avoid layout shift.

🛠️ Built With

  • React + TypeScript + Vite
  • Tailwind CSS
  • Framer Motion
  • Lenis (smooth scrolling)
  • Lucide React (icons)
  • Hand-built SVG illustrations
  • Browser localStorage for memories and comfort plate persistence
  • Native Web Share API, with a clipboard-copy fallback where unsupported

💭 What I Learned

The biggest lesson from this project: a landing page doesn't need to be packed with features to feel interactive — it needs the storytelling itself to be interactive.

The real challenge wasn't fitting in more sections. It was making sure moving from discovering a dish, to learning where it comes from, to experiencing its recipe, to building your own plate, felt like one continuous thread rather than a checklist of widgets. A lot of the actual work went into deciding what not to add — a custom cursor, autoplay audio, heavier particle effects — because each of those would have cost accessibility or focus without adding to the story.

❤️ Why Ghar Ka Swad?

For many of us, comfort food is more than a recipe.

It's a Sunday lunch.
It's something your family makes without measuring anything.
It's the smell from the kitchen before you even walk in.
It's a dish that somehow tastes different when you're away from home.

Ghar Ka Swad is my attempt to turn that feeling into an interactive web experience.

🔗 Links

Live Demo: https://deepbisen-06.github.io/ghar-ka-swad/
GitHub: https://github.com/deepbisen-06/ghar-ka-swad

Built with ❤️ for the DEV Community Frontend Challenge: Comfort Food Edition.

Maybe home was never a place.
Maybe it was always the food waiting for you. 🍛

Top comments (0)