This is a submission for Frontend Challenge - Comfort Food Edition, Perfect Landing
What I Built
For the Frontend Challenge: Comfort Food Edition, I decided to build around one of my favorite comfort foods: pasta. 🍝
Instead of creating a simple recipe landing page, I wanted to make something people could actually explore.
So I built Pasta Shape Guide, an interactive guide to different pasta shapes, their origins, cooking times, recommended sauces, recipes, and cooking tips.
You can:
🔍 Search pasta by name or sauce
🍝 Browse different pasta shapes
🌍 Learn about their origins
⏱️ Check recommended cooking times
🍅 Discover sauce pairings
📖 Read detailed recipes and cooking tips
Built With
React
Vite
Tailwind CSS
React Router
JavaScript
Vercel
Pexels for the pasta imagery
Demo
Journey
This project was especially interesting for me because it was my first React project.
I'm more familiar with Flutter development, so moving into React gave me a chance to learn a different approach to building interfaces.
During the project, I learned about component-based architecture, React state, client-side routing, dynamic URLs, filtering data, responsive design, and deploying a production React application.
One thing I particularly enjoyed was making the application data-driven.
The pasta information is separated from the UI, so adding another pasta doesn't require creating an entirely new component. The same components can render the new information automatically.
What I'm Proud Of
I'm most proud that I turned what could have been a static landing page into an actual little interactive experience.
The user isn't just looking at a pasta image.
They can:
Discover → Search → Explore → Learn → Find a Sauce → Try a Recipe
That was the experience I wanted to create.
I'd love to know: what pasta shape would you add to the guide? 🍝
Top comments (4)
Hey @gulrez, I saw your app (pasta-guide). If you fix up the CSS, I think it’ll look really good! Just wanted to let you know 😊
Thanks! You’re absolutely right. I’m mostly into app development, so I only have a little experience with JS, and I haven’t really worked much with HTML/CSS. I know the CSS part isn’t that difficult, but with my work schedule, I was mainly able to focus on getting the React app functional. I’ll definitely polish up the CSS when I get some time!
Are you Interested F1 ?
Yeah, I am! I saw your F1 dashboard work and it reminded me of my own F1 project. Great work btw!