DEV Community: Khushal Sarode

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

Khushal Sarode — Sat, 15 Aug 2026 18:03:17 +0000

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

Annapurna's Kitchen

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:

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

Nukkad Chat Corner 🍵 | Comfort Food Isn’t a Restaurant — It’s a Thela. That’s Where the Soul Gets Comfort. I Sculpted Mine in CSS.

Khushal Sarode — Wed, 12 Aug 2026 23:10:51 +0000

This is a submission for Frontend Challenge - Comfort Food Edition, CSS Art.

Inspiration

When DEV said comfort food, I didn't think of restaurant platters or Sunday lunch.

I thought of home. College. Friends walking through the city with no plan except to find something to eat. I thought of the aroma that hits you when you pass a thela — that small street cart — and your feet turn toward it before your brain catches up. 😮‍💨

That smell. That steam. That queue. That's where this project starts.

Chai — the anytime drink 🍵

Back here in India, chai is not a morning-only drink. It never was.

Wake up early? Chai.

Study? Chai.

Work? Chai.

Friends hanging out? Chai.

Just woke up from a nap? First thing — chai. 😴➡️🍵

Cutting, full, adrak wali, elaichi — the variations change, but the feeling doesn't. One hot sip and you feel totally alive and awake. That's not marketing copy. That's memory. ✨

Back home, it's tradition. When a guest visits — any programme, any festival, any gathering — the first thing offered is chai. It sounds odd to outsiders. Here it's normal. It's just how things work.

I come from a town built around agriculture and education. Chai isn't one crowd's drink. Workers, teachers, officers, employees — everyone has their spot. There's a chai thela wala near us who keeps a separate monthly account for each regular. They settle up at month-end. It sounds extreme until you live it — and it isn't addiction. 😅 Chai is the fastest, easiest drink with a little belly-filling warmth. People pair it with biscuits or toast. Folks in agriculture often eat salted rotis with chai. My father leaves early for work — chai then too. I used to have mine with biscuits and toast. Same ritual, different schedules.

With friends — the real comfort menu 🌙

When we gathered for a walk or to kill free time, we didn't just walk. We ate our way through the city. Sometimes the whole evening was one food stop after another.

Pani puri was — and still is — my absolute go-to. Tangy, semi-spicy, that one-bite explosion where teekha pani, potato, and crunch land together. You can't eat it slow. You shouldn't. Six puris, six little decisions, zero regrets. 💥

And here's the tradition where I'm from: a true pani puri lover always asks for two suki papdi after the last puri. If you don't — well, don't call yourself a lover. It's the finishing move here — crunchy and dry after all that pani. Non-negotiable. 🫡

Vada pav is a whole culture. There are tons of famous shops for one dish. Same ingredients everywhere — pav, batata vada, chutneys — and yet every shop tastes different. We picked the stall based on mood. Feeling classic? One place. Feeling spicy? Another. Feeling nostalgic? The one from college days.

A couple recently opened a shop nearby with 35+ variations — genuinely fantastic, mind-blowing. That place changed the game, but mood-based shop picking never stopped. 🤯

I still prefer Mumbai style: green chutney, onion, vada, dry chutney, tamarind chutney. Simple layers — wholesome ingredients, nothing fancy, just done right.

And honestly? One vada pav is enough for an average appetite. Fast, filling, done. That's the beauty of it. 🙌

Banana chips are the road home. 🛣️🍌

I belong to Jalgaon, Maharashtra — Banana City. It sits in the heart of India's banana belt: the prime hub of banana production in the country. Drive those highways and you don't only see plantations. Every few kilometres there are small shops frying banana chips live — paper-thin nendran coins, still hot from the oil, tossed with black salt and red chilli powder.

You stop. You take a paper cone. You pinch a coin with every sip of chai. Fresh. Loud. Crisp. That smell of hot oil and spice is as much home as the thela itself — and it's the plate on this counter. 🔥

Our breakfast-with-friends wasn't always idli or dosa. Sometimes it was poha — and never plain:

Rasa poha
Misal poha
Tari poha
A squeeze of lemon on top
A pinch of black salt

Wah. Even writing this makes my mouth water. 🤤

These were my go-to comfort foods with friends in college and the years we were still learning who we were. Even today, when we gather, we don't miss the chance. Same hunger. Same lanes. Same laughter. Different year. 🫶

At home — mother's kitchen 🏠

At home, my mother often made idli, dosa, sambar, and poha.

Poha became the comfort dish when I was hungry between lunch and dinner — that in-between hunger when you don't want a full meal but need warmth. Amma would make it quickly, and somehow it always tasted like she knew exactly how hungry you were. 💛

Idli and dosa weren't snacks for me — I often replaced a full meal with them. Nutrient-rich, satisfying, served with sambar, coconut chutney, potato sabji spread inside, and a thin layer of dry chutney on top. Still the best combination for me.

The dosa I love most? Paper-thin and super crisp — the kind that crackles when you bite — with cheese melted inside and coconut chutney on the side. (The counter art is paneer dosa — same love, different stuffing — but the feeling is identical.) 🧀

Why I built Nukkad Chat Corner ✨

All of this lives at a thela — not a fancy restaurant, not a food court. Steel counter. String lights. Queue on the wall. Someone calling out order numbers. The smell of chai and fried batter before you even see the menu. 🏮

That's the world I wanted to rebuild in CSS.

Nukkad Chat Corner is the name of the website — a single-page night thela of eight dishes from my real life, sculpted in pure CSS. No food photographs. No menu prices. No frameworks. Just gradients, @keyframes, @property, :has() rituals, steam, and a little JavaScript where CSS alone couldn't finish the story.

Each plate carries a ritual line (how we actually eat it). Click opens a comfort-plate theater — enlarged CSS sculpture first, then story, craft tags, and optional nutrition tucked below.

Plate	Ritual / meaning
🍵 Masala Chai	Cutting · two dunks — the anytime drink
💧 Pani Puri	Always two suki papdi — friends and teekha pani
🥪 Vada Pav	Shop by mood — one is enough
🥥 Idli Platter	Break, dip, then chutney — Amma's quiet comfort
🥞 Paneer Dosa	Tear while it crackles
🍋 Indori Poha	Lemon first, sev last
🌶️ Misal Pav	Farsan just before the bite
🍌 Jalgaon Banana Chips	A coin with every sip of chai

Open index.html. A short welcome curtain greets you — "Arre bhai, cutting chai garam hai…" — then the hero chai, comfort story, and eight CSS plates. 👋

A note for my hometown friends 💛

This one's for every walk we took, every pani puri stand we debated, every vada pav shop we chose by mood, every highway stop for hot banana chips, and every poha breakfast that tasted better because we were together.

Shoutout to my town friend — @rajat_savdekar — you know exactly which thela I mean.

Demo

🔗 Live demo: Nukkad Chat Corner

css-art-food-challenge.khushalsarode-in.workers.dev

Try this flow:

Open the live site — skip or watch the CSS welcome curtain 👋
Smell the night thela — sit with the hero chai (pure CSS, full-bleed) 🍵
Hover the food directly — biscuit dunk, pani fill-tilt-pop, vada bun press 👆
Click any plate for the enlarged CSS sculpture + comfort story 🍽️
Scroll the plates — night counter, native smooth scroll, no layout jumps ✨

Journey

Why a thela, not a gallery? 🏮

Most CSS art sits on a white page like a museum piece. Comfort food in India doesn't live in museums. It lives at a thela — steel surface, string lights, queue on the wall, chai steam in the air.

I didn't want a menu website. I wanted you to feel like you're walking past a shop at night and stopping because the smell won. 😮‍💨

The micro welcome curtain came first — kulhad steam, "Arre bhai, cutting chai garam hai…" — then a brand-forward hero chai and a plates theater with signature food rituals, not ₹ price tags.

CSS is the star ⭐

Every dish is built from scratch:

repeating-linear-gradient — pav crust, kulhad ridges, wood grain, banana leaf ribs
radial-gradient / conic-gradient — tea meniscus, puri shells, idli pores, dosa griddle burns
@keyframes — steam convection, string-light flicker, heat shimmer, lamp pool pulse
transform-style: preserve-3d — pani puri isometric clusters, idli platters, dosa cones
:has() food hovers — hover the chai cup, not the card, and the steam responds

Cards stay static so scrolling stays smooth. The food inside moves. Early versions lifted whole cards and the page fought itself — the final build keeps cards still and lets the food breathe. 😌

Light JavaScript, on purpose ⚡

Indori Poha is a CSS flake mound — box-shadow rice, radial turmeric, a CSS spoon. Everything on the counter is CSS.

Near-zero JS: one tiny app.js only wires reduced-motion and keyboard Escape/Enter for the plate radios. Welcome, back-to-top, lights, scroll, and the plate overlay are CSS/HTML. No framework. No animation loop. JavaScript supports the story; CSS tells it.

Lighting and atmosphere 🌙

Warm string bulbs. Amber corner pools. Neon spill. Chai steam catching lamplight. The kind of night you know from a galli when you're waiting for your order with friends. 🫶

prefers-reduced-motion is respected throughout — welcome curtain hides, smooth scroll turns off, rituals settle.

What I'm proud of 💛

The chai glass — because chai isn't just a beverage here, it's a lifestyle 🍵
Pani puri as a 7-puri cluster — the dish I was most excited to render in CSS 💥
Jalgaon banana chips — the highway shops of home, fried live, black salt and chilli 🍌
Modal dish tickets — history, how to eat, healthier style, nutrition per serving
A counter that scrolls smooth and feels like the shops we grew up around

Tell me which dish feels most like your thela — I'd love to hear it.

Code

Khushalsarode / css-art-food-challenge

dev.to CSS Food Art Challenege

Nukkad Chat Corner

The comfort food I grew up eating — sculpted in pure CSS.

A single-page night-tapri experience for the DEV Frontend Challenge: Comfort Food Edition CSS Art prompt. Eight Indian street and household dishes, zero food photographs, zero frameworks, zero build step.

Arre bhai, cutting chai garam hai!

Live demo	`https://css-art-food-challenge.khushalsarode-in.workers.dev/`
Repository	`https://github.com/Khushalsarode/css-art-food-challenge.git`
License	MIT
Docs index	docs/README.md

Nukkad Chat Corner

About

Nukkad Chat Corner rebuilds an Indian night tapri as CSS art: steel counter energy, string lights, chai steam, and eight plates drawn with gradients, transforms, and keyframes — not photographs.

It is	It is not
A static HTML/CSS/JS art page	A restaurant ordering SaaS
A DEV CSS Art challenge submission	A framework demo or SPA
Memory theater with ritual lines	A priced menu

…

View on GitHub

License: MIT

Passion Uncorked — I Built an App That Ages Your Passion Into Wine or Forges It Into Steel

Khushal Sarode — Mon, 13 Jul 2026 11:34:47 +0000

This is a submission for Weekend Challenge: Passion Edition

What I Built

Passion Uncorked — you type a single word or a full sentence about whatever you're passionate about ("open source," "football," "cooking for people I love," anything), then choose to either age it in wine 🍷 or forge it in fire 🔥. Within about 30 seconds you get back a completely unique, narrated artifact for that exact passion: either a wine label (château name, vintage year, tasting notes, a collector's note) or a forge mark (forge name, smith's title, temper notes, a smith's mark) — read aloud in a voice built for that vessel.

Same input, two entirely different pieces of writing, visual direction, and narration. The idea came straight from the challenge prompt: passion isn't one thing — it's devotion for one person and intensity for another, so the app treats those as two genuinely different creative outputs instead of one template with a palette swap.

Demo

🔗 Live app: Passion Uncorked Demo Link

Code

Khushalsarode / dev.to-challenge

DEV Weekend Challenge: Passion Edition Submission

🍷🔥 Passion Uncorked

Type any passion → age it in wine or forge it in fire → a one-of-a-kind, narrated artifact in under 30 seconds.
Live demo → · Gemini-written copy · ElevenLabs narration · original browser-synthesized score

Why we built this

The DEV Weekend Challenge: Passion Edition asked for something inspired by passion — the fire that drives obsession, devotion, and craft, in whatever form that takes.

Everyone's passion looks different, but almost nobody gets to see theirs presented as something precious. A sommelier ages a grape harvest into a vintage worth collecting. A blacksmith tempers raw ore into a blade worth naming. We asked: what if we did that to your passion instead — whether it's "open source," "football," or "cooking for people I love"?

Passion Uncorked takes a single word or a full sentence and, in real time, turns it into one of two completely different artifacts:

View on GitHub

Video Explanation

How I Built It

React 18 + Vite, no backend — Gemini for copy, ElevenLabs for narration, the Web Audio API for an original ambient score, and html2canvas for the downloadable PNG export. Deployed on Cloudflare Pages.

Here's the stuff that actually took real thought (or real debugging) to get right:

We didn't just let Gemini free-write and hope for the best. Every call goes out with responseMimeType: 'application/json' against a strict schema per vessel, so we always get back a title, tasting or temper notes, a rarity or intensity line — and, this one mattered more than we expected, a separate tts_script field. Turns out copy that reads well on a label doesn't always sound natural out loud, so we just had the model write both versions instead of reusing one.

Gemini's flash models have this "thinking" budget quirk that cost us an evening early on: they'll quietly burn tokens on invisible reasoning by default, and if you don't set thinkingConfig: { thinkingBudget: 0 } yourself, you can get back a response that looks totally successful and is completely empty. Fun one to debug. We also added a small JSON repair-and-retry step for the rare case where a response gets cut off mid-object.

Wine and fire don't share a narrator, on purpose. Each vessel has its own ElevenLabs voice ID and its own voiceSettings — stability and style tuned differently — pulled in through the official SDK. It only loads once someone actually hits submit.

The bottle and the flame actually pay attention to what the AI wrote. The wine's liquid color comes straight from whatever color_mood Gemini picked; the fire's flame height and glow scale off the intensity line it generated, so a result described as "White-Hot" really does burn brighter on screen than one that's "Smoldering." It's all SVG and CSS — no image model involved, so it's instant and costs nothing.

The ambient music isn't a loop we found somewhere — it's genuinely being composed in your browser while you're on the page, using the Web Audio API. Wine gets a soft arpeggio, fire gets a darker ostinato, both built live from oscillators and gain envelopes, no audio files anywhere.

And the certificate itself got rebuilt from SVG to plain HTML/CSS partway through, mostly because long AI-generated titles kept overflowing the card and it looked broken. CSS container queries fixed that properly — the type now scales to the card's own width instead of us guessing at font sizes.

Prize Categories

Best Use of Google AI — Gemini drives structured JSON generation, tone switching (a "classy" and a "sassy roast" mode), the color-mood system that tints the entire UI, and the narration script itself.
Best Use of ElevenLabs — every result is narrated through the official ElevenLabs SDK with distinct, deliberately-tuned voices per vessel, making narration a first-class output rather than a bolt-on.

Built by a team of two: @khushalsarode and @rajat_savdekar

Thanks for reading — go pour or forge your own passion 🍷🔥

Are you Facing ‘Docker Permission Denied’ error! Let’s fix it and get you started with your shipping! 😵😕🔍

Khushal Sarode — Fri, 10 Jul 2026 20:55:30 +0000

Stop typing 'sudo' before every single Docker command. Learn how to instantly and securely fix the docker.sock permission denied error.

How to Fix the Docker Permission Denied Error (`docker.sock`)

Have you ever run a docker ps or docker build only to be met with this frustrating message?

permission denied while trying to connect to the Docker daemon socket at unix:///var/run/docker.sock

This is a common issue when setting up a new Linux machine or cloud VM. Let’s explore why it happens and how to fix it for good.

The Issue

When you run Docker commands, your terminal shows a permission denied error. This forces you to add sudo to every command, which disrupts automated scripts and becomes a hassle to type.

Why This Happens

Docker uses a Unix socket file located at /var/run/docker.sock to connect the CLI tool you use with the background service that runs the containers.

What exactly is `/var/run/docker.sock`?

The /var/run/docker.sock file is a Unix domain socket that enables communication between the Docker CLI and the daemon. It typically needs root permissions.

By default, root owns this socket file. For security reasons, regular Linux user accounts are not allowed to access it.

Two Ways to Fix It

1. The Proper Way (Recommended)

This method gives your specific user account permanent and secure access by adding it to a specific security group.

Step 1: Create the Docker system group (it usually exists, but just in case):

  sudo groupadd docker

Step 2: Add your current user account to that group:

  sudo usermod -aG docker \$USER

Step 3: Activate the group changes right away without logging out:

  newgrp docker

Test it by running docker run hello-world without sudo!

2. The Quick Way

If you are in a hurry, working on a temporary VM, and just need it to work right now, you can take a shortcut.

The Command:

  sudo chmod 666 /var/run/docker.sock

The Catch: This permission change goes away when you reboot the machine. Additionally, it lets any user or process on that machine read and write to Docker, which is a significant security risk in production.

Conclusion

The quick way is fine for a brief local test, but the proper way is the best practice. It persists through reboots and keeps your environment safe. Take the extra 5 seconds to set up the user group— Enjoy 🐬📦🏗!
Happy Learning!!😊👨‍💻📌

Python Virtual Environment Setup: Commands, Structure, and Sample Program 🐍👩‍💻👨‍💻

Khushal Sarode — Fri, 11 Jul 2025 23:17:27 +0000

Whether you're building data pipelines, web apps, or experimenting with AI models, managing project dependencies is crucial. That’s where Python virtual environments come into play.

📚 Table of Contents

🔍 What is a Python Virtual Environment?
⚙️ Prerequisites
💻 Virtual Environment Setup by OS
- 🖥 Windows
- 🍎 macOS / 🐧 Linux
- 🧪 Verify the Environment
📁 Virtual Environment Directory Structure
✅ Steps to Setup a Project
🧾 Sample Program: main.py
💡 Bonus Tips
📌 Conclusion

🔍 What is a Python Virtual Environment?

A virtual environment is an isolated environment for Python projects. It allows you to manage dependencies separately for each project, preventing conflicts between libraries.

A virtual environment helps you keep each Python project separate on the same computer.

It lets you use specific versions of packages for each project without interfering with other projects or your system.

This logical separation makes it easy to manage multiple projects with different requirements at the same time.

⚙️ Prerequisites

Ensure Python is installed:

python --version    # or python3 --version

If not, download Python.

💻 Virtual Environment Setup by OS

🖥 Windows

Open Command Prompt or PowerShell
Create a virtual environment

python -m venv env

Replace env with your desired environment name.

🔧 Creating a Python Virtual Environment with a Specific Version

Setting up a virtual environment with a specific Python version ensures your project dependencies remain isolated and compatible. Below are different ways to create a Environment using the version you want:

✅ Using python3.x (Linux/macOS)

python3.10 -m venv venv

This creates a virtual environment named venv using Python 3.10 (if installed).

✅ Using py -3.x (Windows)

py -3.10 -m venv venv

This is the preferred way on Windows when managing multiple Python versions via the Python Launcher (py).

Activate the environment

.\env\Scripts\activate

Command Prompt : env\Scripts\activate.bat
Powershell : env\Scripts\Activate.ps1

🍎 macOS / 🐧 Linux

Open Terminal
Create the virtual environment

python3 -m venv env

Activate the environment

source env/bin/activate

🧪 Verify the Environment

which python # Linux/macOS
where python # Windows

You should see the path pointing to your local env folder.

📁 Virtual Environment Directory Structure

project-folder/
│
├── env/                     # Virtual environment directory
│   ├── bin/ or Scripts/     # Executables (python, pip)
│   ├── include/             # Header files
│   ├── lib/                 # Installed packages
│   └── pyvenv.cfg           # Config file
│
├── main.py                  # Your Python script
└── requirements.txt         # Project dependencies (optional)

🐾 Steps to Setup a Project

Create a project folder

mkdir myproject && cd myproject

Create the virtual environment

python -m venv env

Activate it

### Windows
.\env\Scripts\activate

### macOS/Linux
source env/bin/activate

Install packages

pip install requests

Freeze requirements

pip freeze > requirements.txt

Run your Python program

python main.py

After you activate environment it will show as shown in image:

🧾 Sample Program: main.py

import requests

def getpost():
    # Make a GET request to a public API
    url = "https://jsonplaceholder.typicode.com/posts/1"
    response = requests.get(url)

    # Print the response content Json
    #print(response.json())
    if response.status_code == 200:
        print("Request was successful!")
        data = response.json()
        print("User ID{user_id} Title: {title} Body: {body}".format(user_id=data['userId'], title=data['title'], body=data['body']))
    else:
        print("Request failed with status code:", response.status_code)
    # Check the status code
    print(f"Status Code: {response.status_code}")

if __name__ == "__main__":
    getpost()

💡 Bonus Tips

To deactivate the environment:

deactivate

To delete the virtual environment:

rm -rf env     # macOS/Linux
rmdir /s env   # Windows

Use requirements.txt to share dependencies with teammates:

pip install -r requirements.txt

Conclusion

Using a virtual environment keeps your Python projects clean and manageable. It’s an essential skill for every developer.

One does not simply pip install without a virtual environment

🚀 Fixing Tailwind Init Error in React (Vite) Projects

Khushal Sarode — Mon, 26 May 2025 19:04:29 +0000

Integrating Tailwind CSS with a React + Vite project is usually smooth — but if you’ve run into an error during the tailwindcss init process, don’t worry. This guide walks you through the right way to set up Tailwind, what causes the init error, and how to fix it quickly.

✅ Step 1: Create a React + Vite Project

First, set up your React app using Vite:

npm create vite@latest <project_name> --template react

Prompts to follow:

Project name: project_name
Framework: React
Variant: JavaScript

Then, navigate into your project and install dependencies:

cd tech-stack-suggestor
npm install

✅ Step 2: Install Tailwind CSS

Here’s where many developers hit the error. The standard command is:

npm install -D tailwindcss postcss autoprefixer

However, you may see an error during tailwindcss init, especially if the Tailwind CLI version is mismatched or if PostCSS isn’t configured properly.

❌ The Problem: Tailwind Init Error

In some cases, running:

npx tailwindcss init -p

Results in an error like:
Fails silently without generating the tailwind.config.js and postcss.config.js files.

Error:

npm ERR! could not determine executable to run
npm ERR! A complete log of this run can be found in: C:\Users\HP.KHUSHALSARODE.000\AppData\Local\npm-cache\_logs\2025-05-26T16_52_47_671Z-debug-0.log

💡 Cause:

The init command is no longer available in Tailwind CSS v4. For v3, 
make sure to use the correct version qualifier during installation.

✅ The Fix: Specify Tailwind Version Explicitly

npm install -D tailwindcss@3.4.1 postcss autoprefixer
npx tailwindcss init -p

This will correctly generate the tailwind.config.js and postcss.config.js files, resolving the init error.

✅ Step 3: Configure Tailwind

Update tailwind.config.js like this:

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Then, update ./src/index.css:

@tailwind base;
@tailwind components;
@tailwind utilities;

Make sure this CSS file is imported in your main.jsx or main.tsx:

import './index.css';

✅ Step 4: Run Your App

Now start the development server:

npm run dev

Your Tailwind-powered React app should be live at:

http://localhost:5173

Easily Manage Node.js Versions with NVM — Complete Setup + Tips (macOS, Linux, Windows)

Khushal Sarode — Sat, 19 Apr 2025 21:06:47 +0000

⚡ Manage Node.js Versions Easily with NVM

Need to switch between different Node.js versions for different projects? NVM (Node Version Manager) makes it quick and painless. With just a few commands, you can install, switch, and manage multiple Node versions on your system.

Let’s get right to it — installation, usage, and some handy tips.

🔧 What is NVM?

NVM is a CLI tool to manage multiple Node.js versions — perfect for switching between projects or testing on different versions.

✅ NVM supports:
Windows, Linux, macOS, WSL, Cygwin, and MSYS

📦 Installation/Setup

⚠ Always restart your terminal after installation or configuration changes

On macOS/Linux:

Install NVM using curl or wget:

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash

Or:

wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash

Add to your shell config (if not auto-added):

export NVM_DIR="$([ -z "${XDG_CONFIG_HOME-}" ] && printf %s "${HOME}/.nvm" || printf %s "${XDG_CONFIG_HOME}/nvm")"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"

Then reload your shell:

source ~/.bashrc  # or ~/.zshrc, depending on your shell

To verify installation:
```
nvm --version
```

On Windows:

NVM-Windows (Recommended)

https://github.com/coreybutler/nvm-windows

⬇️ [ Download nvm for windows ]

Download the .exe installer.
Run it and follow the setup steps.
Open a new terminal and check:

nvm --version

That's it! You're ready to manage Node.js versions on Windows.

Other Version Available for Node.js Version Managers for Windows

nodist – Manages Node and npm versions.
nvs – Cross-platform manager with auto-switch and profiles.

🚀 Using NVM to Manage Node.js

Check nvm version
```
nvm --version
```

Install a Specific Node.js Version

nvm install <node specific version>
            or 
nvm install --lts
            or 
nvm install node

List Installed Versions
```
nvm ls or nvm ls-remote
```
Switch Between Node Versions
```
nvm use 16
```
Set a default version globally:
```
Set a default version globally:
```

Update Node to the Latest Version

nvm install node --reinstall-packages-from=current
nvm alias default node

Show the currently active Node.js version
```
nvm current
```

Run a file using a specific Node.js version

nvm run <version> <file.js>
usage: nvm run 14 app.js

Execute a command using a specific Node.js version

nvm exec <version> <command>
usage: nvm exec 16 npm install

Show the path to the Node.js binary for a version
```
nvm which <version>
nvm which 18
```
Uninstall a Version
```
nvm uninstall 14.21.3
```

⚙️ Using Into project directory

If need to switch version for project using node:
Use a .nvmrc file in your project directory to specify which Node version it requires:
```
echo "18.17.1" > .nvmrc
```
Then:
```
nvm use
```

Based on .nvmrc config file you want to change version runtime need to use node version switch with tool like https://github.com/wbyoung/avn [auto version switching]

To install avn and its plugin for nvm:

npm install -g avn avn-nvm avn-n
avn setup

Let’s focus on writing code — version conflicts? NVM’s got it covered! 😉

DEV Community: Khushal Sarode

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

💡 Inspiration

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

Varan bati — the heart of it 💛

Bharit — soul of the side plate 🔥

Bhakri and thecha — rustic power 🌶️

🏡 When you leave home — the craving begins

🗺️ The idea behind Annapurna's Kitchen

🛠️ What I Built

🚀 Demo — Try It Yourself!

Code

Khushalsarode / flavours-of-bharat

dev.to Landing page Challenege

Annapurna's Kitchen

Table of contents

About

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

🧺 Order — build your comfort tiffin

🛤️ Journey

🗺️ Building the Comfort Food Atlas

🧺 Comfort Tiffin — home taste, wherever you are

✨ Craft choices

💌 A note for my family

📄 License

Nukkad Chat Corner 🍵 | Comfort Food Isn’t a Restaurant — It’s a Thela. That’s Where the Soul Gets Comfort. I Sculpted Mine in CSS.

Inspiration

Chai — the anytime drink 🍵

With friends — the real comfort menu 🌙

At home — mother's kitchen 🏠

Why I built Nukkad Chat Corner ✨

A note for my hometown friends 💛

Demo

Journey

Why a thela, not a gallery? 🏮

CSS is the star ⭐

Light JavaScript, on purpose ⚡

Lighting and atmosphere 🌙

What I'm proud of 💛

Code

Khushalsarode / css-art-food-challenge

dev.to CSS Food Art Challenege

Nukkad Chat Corner

Table of contents

About

Passion Uncorked — I Built an App That Ages Your Passion Into Wine or Forges It Into Steel

What I Built

Demo

Code

Khushalsarode / dev.to-challenge

DEV Weekend Challenge: Passion Edition Submission

🍷🔥 Passion Uncorked

Why we built this

Video Explanation

How I Built It

Prize Categories

Are you Facing ‘Docker Permission Denied’ error! Let’s fix it and get you started with your shipping! 😵😕🔍

Stop typing 'sudo' before every single Docker command. Learn how to instantly and securely fix the docker.sock permission denied error.

How to Fix the Docker Permission Denied Error (docker.sock)

The Issue

Why This Happens

What exactly is /var/run/docker.sock?

Two Ways to Fix It

1. The Proper Way (Recommended)

2. The Quick Way

Conclusion

Python Virtual Environment Setup: Commands, Structure, and Sample Program 🐍👩‍💻👨‍💻

📚 Table of Contents

🔍 What is a Python Virtual Environment?

⚙️ Prerequisites

💻 Virtual Environment Setup by OS

🖥 Windows

🔧 Creating a Python Virtual Environment with a Specific Version

🍎 macOS / 🐧 Linux

🧪 Verify the Environment

📁 Virtual Environment Directory Structure

🐾 Steps to Setup a Project

🧾 Sample Program: main.py

💡 Bonus Tips

Conclusion

How to Fix the Docker Permission Denied Error (`docker.sock`)

What exactly is `/var/run/docker.sock`?