Comfort Food Companion 🍲

A warm, interactive comfort-food experience created for the DEV Frontend Challenge — Comfort Food Edition: Perfect Landing.

🔗 Live Demo: https://dev-challenge-comfort-food-companio.vercel.app/
💻 GitHub: https://github.com/NandhuTee/dev-challenge-comfort-food-companion

What I Built

For this challenge, I wanted to create more than a traditional food landing page.

I built Comfort Food Companion, an interactive experience where users can explore familiar comfort foods while learning about their approximate nutrition values.

The design focuses on warmth, simplicity, playful interactions, and a food-inspired visual style.

The landing page includes:

🍕 Popular comfort food exploration
🔎 Food search
🥗 Vegetarian and non-vegetarian filtering
🔢 Calorie-range filtering
➕ Portion quantity controls
🧮 Live calorie and macronutrient calculations
📊 Sortable nutrition comparison
💚 Healthier food alternatives
🍽️ Interactive Build Your Plate experience
💡 Healthy eating tips
❓ FAQ accordion
🌙 Light and dark mode
📱 Responsive mobile design
⬆️ Scroll-to-top interaction
🍽️ Build Your Plate

The Build Your Plate section is the feature I am most proud of.

Users can add foods to a virtual plate, change quantities, and see their selected foods and nutrition totals update dynamically.

I wanted this section to feel more interactive than simply displaying a nutrition table. The goal was to make the user feel like they were actually building a meal.

Journey

This challenge gave me an opportunity to focus on both frontend development and interaction design.

I used React state to keep food quantities and the plate contents synchronized. This allowed the same quantity selected in the food cards to be reflected in the plate and nutrition calculations.

I explored responsive layouts, dark-mode styling, interactive controls, animations, and accessible keyboard navigation.

One of the more interesting parts was balancing the number of interactive features with a clean landing-page experience. I wanted the page to feel engaging without making it overwhelming.

I used Framer Motion for subtle animations and Tailwind CSS for responsive styling and visual consistency.

What I Learned

Through this project, I strengthened my understanding of:

React state management
Derived state and real-time calculations
Responsive UI design
Component-based architecture
Interactive filtering and sorting
Accessibility considerations
Micro-interactions and animations
Designing a landing page around a specific visual theme

I learned that a good landing page does not have to be static. Small interactions can make the experience much more memorable when they support the main purpose of the page.

Tech Stack
React
Vite
JavaScript
Tailwind CSS
Framer Motion
Lucide React
Nutrition Disclaimer

The nutrition and calorie values displayed in this project are approximate estimates intended for demonstration and educational purposes.

Actual nutritional values can vary depending on ingredients, preparation methods, brands, cooking techniques, and serving sizes.

This project is not intended to provide medical, nutritional, or dietary advice.

Links

Live Demo: Live Demo
GitHub Repository: Live Demo

Thanks to the DEV Community for organizing the Frontend Challenge — Comfort Food Edition!

I had a lot of fun turning the idea of comfort food into an interactive frontend experience.