This is a submission for Frontend Challenge - Comfort Food Edition, Perfect Landing
Comfort food isn't just food. It's a memory, a mood, and sometimes a little piece of home. ❤️
For the Perfect Landing: Comfort Food Dev Challenge, I built PatricStars — an interactive comfort-food discovery platform designed to help users discover dishes that match their taste, region, mood, and cravings.
🌟 What is PatricStars?
PatricStars combines a playful food experience with a modern, polished landing page and personalized discovery flow.
The journey starts with a cinematic food-focused hero section and continues into a personalized experience guided by Patrick, our friendly food companion. 🩷
✨ Key Features
🎬 Cinematic food-video hero with Netflix-style rotating food previews
🔐 Login & Signup experience
🌎 Regional food discovery
🍴 Personalized food preferences
🩷 Interactive Patrick onboarding walkthrough
🤖 Comfort-food recommendations
🔎 Search and filtering
🍝 Detailed recipe pages
🥤 Drinks section
🍰 Dessert/Sweets section
👨🍳 Culinary Stars / Chef profiles
❤️ Favorites & collections
🧠 Comfort Match quiz
🏆 Achievements and food-explorer progress
👤 Personal profile
⚙️ Personalized settings
📱 Responsive interface
✨ Smooth micro-interactions and animations
🎨 The Design
I wanted PatricStars to feel:
Playful + Warm + Premium + Food-focused
The visual language uses soft cream backgrounds, vibrant pink accents, rounded cards, playful typography, food imagery, and Patrick-inspired illustrations.
The goal wasn't simply to create another recipe website. I wanted the experience to feel like opening a food app that already knows what kind of comfort you're looking for.
🩷 Meet Patrick
One of the main parts of the experience is Patrick.
Instead of throwing a traditional onboarding tutorial at the user, Patrick appears through interactive popups and guides users through the platform:
"Hey! Let me help you find something delicious." 🍴
He introduces the regional preferences, food preferences, recommendations, recipes, favorites, and other parts of the application.
🛠️ Built With
HTML
CSS
JavaScript
Responsive design
CSS animations
Video backgrounds / autoplay media
Interactive UI components
I also focused heavily on frontend fundamentals, visual hierarchy, responsiveness, accessibility, and meaningful interactions rather than making the page purely decorative.
🎯 The Goal
The idea behind PatricStars is simple:
Discover comfort food that feels like home.
Whether you're craving something from your region, trying a completely new cuisine, looking for a quick recipe, or simply asking "What should I eat today?" — PatricStars is designed to make that discovery fun.
🚀 Built for the Dev Challenge
Challenge: Perfect Landing: Comfort Food
Project: PatricStars ⭐
Theme: Comfort Food 🍜🍕🍰
Focus: Interactive frontend + personalized food discovery
I'd love to hear what you think!
What feature would you want to try first? 👀
DevChallenge #PerfectLanding #ComfortFood #WebDevelopment #Frontend #HTML #CSS #JavaScript #WebDesign #UIDesign #FoodTech #PatricStars
Demo
Top comments (0)