🍲 Annapurna's Kitchen — Every tiffin has Home's Flavour (Perfect Landing)

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

Tagline: अन्नपूर्णा की रसोई — every tiffin has Home's Flavour 🏠✨

💡 Inspiration

The Challenge asks for a polished, functional landing page with a food theme — a real or imaginary restaurant, a recipe collection, or anything that captures comfort food and demonstrates excellent frontend fundamentals.

When I read that, I didn't picture stock photos and a dead "Order Now" button. 📸❌

I pictured dinner at home — the meal you crave the moment you step outside it. 🪔

🍽️ Comfort food, for us, is lunch and dinner

Not snacks. Not street food on the go.

In my home, comfort food means proper meals — the dishes my mother cooks for lunch and dinner, served the way our family has always eaten: together, on the floor, in the traditional baitak way.

Everyone sits in a circle. Plates in front. The main course in the centre. And around it — the small things that complete the meal:

Side ritual	What it adds
🥒 Achar	That pop when the jar opens
🍅 Tomato	Fresh slices with salt
🫓 Papad	Crisp over the flame
🥗 Koshimbir	Cool balance on the side

Nobody rushes. You eat with your hands when the dish asks for it. You break bhakri and drag it through thecha. That rhythm is the comfort.

🌾 The native dishes I grew up with — click to read

Varan bati — the heart of it 💛

Varan is a simple, honest dal — toor dal tempered with ghee, mustard seeds, curry leaves, asafoetida. No heavy masala. Just warmth.

Bati are round wheat-flour balls — roasted or baked until golden, crisp outside and soft within. Break a bati open, pour varan over it, add ghee, a pinch of salt, sometimes lemon — and you have the meal that feels like home on a plate.

On tired days, on rainy afternoons, after a long journey — varan bati is what my body asks for before my mind catches up.

Bharit — soul of the side plate 🔥

Brinjal roasted directly on flame until the skin chars and the inside turns smoky-soft, then mashed with onion, garlic, green chilli, and sometimes yogurt. It sits beside the rice, rich and earthy. Not fancy. Native.

Bhakri and thecha — rustic power 🌶️

Bhakri is a thick jowar or bajra flatbread, hand-pressed, cooked on a tawa until it smells like the countryside.

Thecha is the punch — green chillies pounded with garlic and roasted peanuts. Break bhakri, press into thecha, eat. That combination has carried generations through hard work and hot afternoons.

These three — varan bati, bharit, bhakri-thecha — aren't items on a trend menu. They're dinner. They're lunch.

🏡 When you leave home — the craving begins

You can eat anywhere. Hotels. Hostels. Office canteens. Cities far from your town.

But the body remembers. You start craving exactly what home tasted like — not "similar Indian food," not "dal rice somewhere."

That craving isn't weakness. It's how deeply food is tied to place, people, and habit.

What shapes your comfort plate today?

• 😌 Mood — light varan bati on a heavy day, bhakri-thecha when you need grounding
• 🌧️ Season — monsoon warmth; summer simplicity
• 🎉 Festival — what you cook for Diwali, Pola, harvest
• 🥬 Diet — vegetarian days, fasting rules, family wisdom

All of this decides what comfort food is for you on a given day. Not a generic menu. A context.

🗺️ The idea behind Annapurna's Kitchen

I built Annapurna's Kitchen because I wanted a landing page that understands this depth — not just "order food," but find the meal that matches your mood, season, festival, and diet, customize it the way you'd tell your mother "thoda kam teekha" or "extra ghee."

Annapurna's Kitchen is an imaginary pan-India comfort-food service — a Comfort Food Atlas where lunch and dinner bowls from every state are explored the way we actually choose food in life.

Map on the left 🗺️ · Story on the right 📖 · अन्नपूर्णा की रसोई everywhere.

What home taught me 🏠	What I built into this landing page 💻
Varan bati on tired days	😌 Mood filters — find the bowl that matches how you feel
Bharit, papad, achar on the side	🧂 Per-line customization — extras, sides, prep notes
Bhakri-thecha heat level	🌶️ Special request presets — "thoda kam teekha," extra ghee
Baitak — eating together	👨‍👩‍👧‍👦 Family feast order scenario at checkout
Craving home food when away	🧺 Comfort Tiffin — collect bowls, persist in localStorage
Season and festival meals	🌦️ Season + festival filters synced to the map
Diet on certain days	🥬 Vegetarian, prep-time, and diet filters across 250+ bowls
Same taste, wherever you are	🧾 Demo ordering with receipt, scenarios, shareable journey

The logo is a tiffin carrier on a discovery orbit 🛰️🍱 — because comfort lunch and dinner travel with you, even when home doesn't.

---

🛠️ What I Built

A single-page Perfect Landing for an imaginary pan-India comfort-food service — six chapters, one cohesive flow:

#	Chapter	Experience
I	Arrival 🌅	Brand-first hero, pure CSS bowl, quiet script whisper, atlas + tiffin CTAs
II	Atlas 🗺️	Split workspace — interactive India map + tabbed dish theater
III	Collection 🔍	Fuse.js search; filter by mood, season, festival, diet
IV	Desi Fusion ✨	Fusion gallery + recipe battles
V	Memory Wall 💬	Share the meal that reminds you of home
VI	The Why 📜	Editorial story — comfort food is emotion, not cuisine

⚙️ Under the hood — tech stack

• Vite 8 + TypeScript + vanilla HTML/CSS
• Lenis scroll · Motion animations · Fuse.js search
• Howler optional ambient sound 🔊
• @svg-maps/india for the interactive map
• Main JS chunk trimmed from ~667 KB → ~214 KB (lazy map, deferred CSS)

The functional part judges can click: full Comfort Tiffin demo ordering 🧺

• Add lunch and dinner bowls
• Customize each line (extras, kitchen notes, special requests)
• Live pricing (₹49–₹349 + 18% GST)
• 3-step checkout wizard
• Four comfort scenarios
• Demo only — labeled upfront. No payment. No backend. ✅

---

🚀 Demo — Try It Yourself!

Code

Khushalsarode / flavours-of-bharat

dev.to Landing page Challenege

Annapurna's Kitchen

An interactive comfort-food atlas of India — explore 36 states and 250+ regional lunch & dinner bowls, then build a demo Comfort Tiffin order. Pure CSS bowl art, regional stories in local scripts, and a polished vanilla TypeScript landing experience.

Every tiffin has Home's Flavour. · अन्नपूर्णा की रसोई

Live demo	[Try live](https://proud-poetry-e9ba.khushalsarode-in.workers.dev/)
Repository	https://github.com/Khushalsarode/flavours-of-bharat.git
License	MIT
Docs index	docs/README.md

---

Table of contents

• Annapurna's Kitchen
  • Table of contents
  • About
  • Features
    • Atlas and discovery
    • Comfort Tiffin (demo ordering)
    • Visual, motion, and audio
    • Performance
  • Screenshots
  • Quick start
  • Scripts
  • User flows
    • Explore
    • Demo order
  • Project structure
  • Tech stack
  • Accessibility
  • Deploy
  • Contributing
  • Security
  • Support
  • Credits
  • Challenge submission
  • Changelog
  • License

---

About

Annapurna's Kitchen is an open-source, single-page Perfect Landing experience for an imaginary pan-India comfort-food service. It is not a static restaurant brochure and not a backend-powered marketplace.

It combines:

1. Comfort Food Atlas — interactive India map + dish theater (story, history, culture…

View on GitHub

proud-poetry-e9ba.khushalsarode-in.workers.dev

🗺️ Explore — find the meal that feels like your home

Copy this checklist and tick as you go:

• ⏳ Wait for the loader — scripts cycling, 36 states · 250+ bowls
• 🍲 Land on Annapurna's Kitchen — brand hero, pure CSS bowl, Open the atlas
• 🖱️ Click your state on the India map (keyboard: Tab + Enter)
• 📖 Open the dish theater — Story · History · Culture · Recipe · Sensory
• 👵 Read grandma's tip at the bottom
• 🎛️ Filter by mood, season, festival, or diet — watch the map light up
• 🔊 Toggle ambient sound (optional) — right-click for the sound catalog

🧺 Order — build your comfort tiffin

• ➕ Add lunch or dinner bowls from the map, theater, or catalog
• 🎒 Open the tiffin drawer — badge shows bowl count + estimated total
• ✏️ Customize — sides, prep extras, kitchen note ("extra ghee," "mild thecha")
• 🎁 Add order-wide extras — comfort packaging, grandma's tip note card
• 📋 Review order → pick a scenario:
  • 🌧️ Rainy morning tiffin
  • 💼 Office lunch box
  • 👨‍👩‍👧‍👦 Family feast (the baitak meal, scaled up)
  • 🌙 Late-night craving
• ✅ Place demo order → share receipt → tell me which dish reminded you of home

💬 After you try it: Which bowl felt most like home? Drop it in the comments — I'd love to know. 🙏

---

🛤️ Journey

😅 I started with a landing page that didn't understand comfort food

First draft: hero, feature grid, footer CTA. Looked like every food startup. It treated comfort food like a marketing keyword — not like varan bati on a tired evening, not like baitak with your family, not like craving bharit when you're three cities away from home.

The Perfect Landing prompt asks for polished and functional. So I rebuilt around a question:

> What should work when someone arrives hungry for home?

A map they can explore. Filters for mood, season, festival, diet. A cart they can fill with real lunch and dinner bowls. A checkout they can finish — with customization, not just a dead button.

🗺️ Building the Comfort Food Atlas

I started with Maharashtra — varan bati, bharit, bhakri, thecha — then expanded to 36 states and 250+ bowls. Each dish carries story, history, culture, recipe, nutrition, and sensory data. Because comfort food without context is just calories.

The core UI is a split workspace: map left, dish theater right.

Select a state → atmosphere shifts 🌧️ · accents change 🎨 · optional ambient sound plays 🔊

Five tabs: Story · History · Culture · Recipe · Sensory. Grandma's tip at the bottom — the kind of note your mother would actually give.

🧺 Comfort Tiffin — home taste, wherever you are

The atlas let you explore. But I kept thinking about being outside home — hostel, office, another city — craving the exact plate, with your customizations.

Feature	Detail
🍱 Personal tiffin	Add regional lunch and dinner bowls
✏️ Line customization	Extras, sides, prep notes, special requests
📝 Kitchen notes	Order-wide preferences
💰 Live totals	Subtotal, 18% GST, grand total
🧙 3-step checkout	Review → Scenario → Confirm
🎭 Four scenarios	Rainy morning · Office · Family feast · Late-night

The wizard says "Demo only — no real checkout" — honest. But the flow is real.

✨ Craft choices

• 🥣 Pure CSS hero bowl — clay kulhad, broth, steam. No stock photos.
• 🎨 Cream-crimson product UI — navbar, themed scrollbars, 11 scripts in the loader.
• ⚡ Performance — lazy map, deferred CSS, butter-smooth scroll.
• ♿ Accessibility — keyboard map, focus traps, prefers-reduced-motion throughout.

It should feel like a service you'd open when you're far from home — and find something close enough to baitak.

💌 A note for my family

For every baitak dinner, every plate of varan bati, every bharit that smelled of fire, every bhakri broken over thecha — this one's built from that table. 🪔

And for every family whose native dishes are different from mine — you deserve a place on the map too. 🗺️❤️

Team — @rajat_savdekar — you know which plate I mean. 🍛

---

📄 License

Open source under the MIT License.

---

🍲 Built with comfort · Served with code · Shared with love
अन्नपूर्णा की रसोई — Every tiffin has Home's Flavour