The latest articles on DEV Community by Arnav Nair (@arnav_nair_d942880de6378a). https://dev.to/arnav_nair_d942880de6378a https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F3781387%2Fcf8ca480-cde5-40b6-8339-d6234fbd83c8.png https://dev.to/arnav_nair_d942880de6378a en Arnav Nair Sun, 16 Aug 2026 08:29:19 +0000 https://dev.to/arnav_nair_d942880de6378a/ghar-ka-swad-a-little-taste-of-home-1ei3 https://dev.to/arnav_nair_d942880de6378a/ghar-ka-swad-a-little-taste-of-home-1ei3 <p>_# 🍲 Ghar Ka Swad — A Little Taste of Home</p> <p><em>This is a submission for <a href="https://dev.to/challenges/frontend-2026-07-29">Frontend Challenge - Comfort Food Edition, Perfect Landing</a>.</em></p> <h2> What I Built </h2> <p>I built <strong>Ghar Ka Swad</strong>, a modern and interactive landing page celebrating Indian comfort food and the memories associated with homemade meals.</p> <p>The idea behind the project is simple: sometimes food is more than just food — it reminds us of home, family, and familiar moments.</p> <p>The website lets users explore different comfort-food categories and discover dishes based on what they are craving.</p> <h3> ✨ Features </h3> <ul> <li>🍛 Indian comfort-food themed landing page</li> <li>🔥 Interactive comfort-food picker</li> <li>🥘 Dynamic food cards</li> <li>⭐ Food ratings and pricing</li> <li>❤️ Favorite food interactions</li> <li>📱 Responsive design for desktop, tablet, and mobile</li> <li>✨ Smooth hover effects and animations</li> <li>🧭 Simple and intuitive navigation</li> <li>♿ Accessibility-focused interactive elements</li> <li>🎨 Warm, Indian-inspired visual design</li> </ul> <h2> Demo </h2> <p>🌐 <strong>Live Demo:</strong><br><br> [ghar-ka-swad-liart.vercel.app]</p> <p>💻 <strong>GitHub Repository:</strong><br><br> <a href="https://github.com/Arnavnair15/ghar-ka-swad" rel="noopener noreferrer">https://github.com/Arnavnair15/ghar-ka-swad</a></p> <h2> Screenshots </h2> <h3> 🏠 Hero Section </h3> <p><a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2F9kbuhqcsomxk576km0gn.PNG" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2F9kbuhqcsomxk576km0gn.PNG" alt=" " width="799" height="405"></a></p> <h3> 🥘 Food Menu </h3> <p><a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fymmcu9faumbq2qgr68zy.PNG" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fymmcu9faumbq2qgr68zy.PNG" alt=" " width="799" height="249"></a></p> <h2> Journey </h2> <p>I wanted to create a project that connected frontend development with something personal and familiar.</p> <p>I chose Indian comfort food because dishes such as dal, paratha, rajma chawal, paneer, and traditional sweets are strongly connected with memories of home.</p> <p>One of the main features I focused on was the <strong>Comfort Food Picker</strong>. Instead of making the landing page completely static, I wanted users to interact with the experience and discover food based on their mood.</p> <p>During development, I focused on:</p> <ul> <li>Creating reusable React components</li> <li>Managing interactive UI with React state</li> <li>Building responsive layouts using CSS</li> <li>Creating smooth animations and hover interactions</li> <li>Improving accessibility</li> <li>Maintaining a consistent visual design</li> <li>Organizing the project into reusable components and data</li> </ul> <p>I'm particularly proud of how the interactive food picker turns the landing page into more than just a collection of food images.</p> <h2> 🛠️ Tech Stack </h2> <ul> <li>React</li> <li>Vite</li> <li>JavaScript</li> <li>HTML5</li> <li>CSS3</li> </ul> <h2> 🎯 What I Learned </h2> <p>This challenge helped me improve my understanding of:</p> <ul> <li>React component architecture</li> <li>State-based UI interactions</li> <li>Responsive CSS</li> <li>Reusable components</li> <li>User experience and visual hierarchy</li> <li>Building a complete frontend project from scratch</li> </ul> <h2> 🚀 Future Improvements </h2> <p>If I continue developing Ghar Ka Swad, I would like to add:</p> <ul> <li>🔎 Food search and filtering</li> <li>❤️ Persistent favorite dishes</li> <li>📖 Individual recipe pages</li> <li>🌎 Regional Indian cuisine categories</li> <li>🛒 Online ordering</li> <li>🌙 Dark mode</li> <li>🤖 Personalized food recommendations</li> </ul> <h2> 👨‍💻 Author </h2> <p><strong>Arnav Nair</strong></p> <p>GitHub: <a href="https://github.com/Arnavnair15" rel="noopener noreferrer">https://github.com/Arnavnair15</a></p> <h2> License </h2> <p>This project was created for educational purposes and for the DEV Frontend Challenge.</p> <p>Made with ❤️ and a little taste of home. 🍲</p> frontendchallenge devchallenge css