This is a submission for Frontend Challenge - Comfort Food Edition, Perfect Landing
What I Built
I built The Comfort Table, an interactive food-memory experience inspired by the meals that make an ordinary day feel like home.
Instead of creating a traditional restaurant landing page, I wanted to make the landing page itself feel like a small digital dining room.
The experience combines:
- A responsive editorial-style landing page
- An interactive Comfort Finder based on mood and moment
- A searchable world menu
- Country filtering
- Detailed dish cards with ingredients, preparation, taste and serving notes
- A dish-details modal with keyboard-accessible interaction
- Multilingual UI support for English, Hindi, Spanish, French, Japanese, Korean and Arabic
- Responsive layouts for mobile, tablet and desktop
- CSS-generated hero artwork
- Reduced-motion support
- Semantic HTML and accessibility-focused interaction
The central idea is simple:
Comfort food has no passport.
Whether it is khichdi in India, ramen in Japan, pasta in Italy or tacos in Mexico, food can carry memory, place and emotion.
Demo
Live Demo:
https://the-comfort-table.vercel.app/
Source Code:
https://github.com/pawansatoshi/the-comfort-table
Journey
I started with the idea of building something that felt more personal than a conventional food website.
The challenge was not only to make the page visually polished, but to make the experience useful and enjoyable to interact with.
The Comfort Finder became the core interaction: users can choose how their day feels and the moment they are eating, and the interface recommends a dish from the collection.
I also spent significant time on responsive behavior because the experience should work equally well on a phone, tablet and desktop.
One part I am particularly proud of is the accessibility work around the dish-details modal. A visually attractive modal is not enough if keyboard users can escape into the background content or lose their place after closing it.
The modal interaction was therefore hardened with:
- focus management
- focus restoration
- Tab and Shift+Tab containment
- Escape-to-close behavior
- inert background content
- proper modal lifecycle handling
This made accessibility part of the interaction model rather than an afterthought.
Another challenge was keeping the interface expressive without making it dependent on a large frontend framework. The project uses semantic HTML, CSS and purposeful JavaScript to keep the experience lightweight and understandable.
What I Learned
This project reinforced an important frontend lesson for me:
A landing page is not just a visual composition. It is an interaction system.
Typography, spacing, responsive layout, keyboard behavior, focus management, loading behavior and content hierarchy all contribute to whether the experience actually works.
I also learned that small details can have a large impact. A remembered focus target, a properly contained modal, a reduced-motion fallback or a thoughtful empty state can make the difference between something that merely looks good and something that feels finished.
What I'm Proud Of
I'm particularly proud of combining visual storytelling with practical frontend engineering.
The project is intentionally designed to feel like a warm editorial food experience while still behaving like a real interactive product.
The goal was not to build the biggest food website.
It was to build a small experience that makes people want to explore one more dish.
What's Next
I'd like to continue expanding the experience with richer food stories, more regional dishes, stronger discovery interactions and additional accessibility testing.
Ultimately, I'd like The Comfort Table to become less like a collection of recipes and more like a digital map of the memories people associate with food.
Thanks for checking it out.This is a submission for Frontend Challenge - Comfort Food Edition, Perfect Landing
Top comments (0)