This is a submission for Frontend Challenge - Comfort Food Edition, Perfect Landing
What I Built
Ichiraku Ramen β Where Every Bowl T...
For further actions, you may consider blocking this person and/or reporting abuse
OMG, I love the idea! π₯Ήβ€οΈ "Naruto" was my comfort anime back in high school. I rewatched it many times, especially when the world felt heavy. So nostalgic to see it here on DEV! Also, the page is really lovely with the cherry blossom petals falling down the screen πΈ Good job!
This comment made my day honestly π₯Ή Naruto as a comfort anime when the world felt heavy is exactly the energy Ichiraku Ramen carries, that little shop was always where things got quieter and safer for a moment. The fact that it resonates across so many people and stages of life like that is what makes it so special.
Really glad the cherry blossoms landed too, that was the detail I was most unsure about and it ended up being the one everyone mentions first. Thank you so much for reading and for sharing that! πΈπ₯
pls how ican open thise app and run it plsπ
The βwhat Iβm most proud of isnβt the code, itβs the feelingβ part is spot on.
Good frontend work isn't just about making a page look nice. It's about making someone instantly understand what the page is supposed to feel like.
Exactly, and I think that's the part that's hardest to teach because it doesn't show up in a linter or a performance audit. You can have perfectly accessible, fast, well-structured code and still land on a page that feels like nothing. The feeling is a design decision that has to be made intentionally, and for Ichiraku it was clear from the start, it had to feel warm and safe and like somewhere you'd actually want to sit down. The code was just the way to get there.
Itβs a nice, cozy, and welcoming website. However, one point stood out to me which was the text on the image is hard to read. I thought it might be a colorβcontrast issue, so I checked using accessibility toolsβincluding IBMβsβbut none of them flagged anything. Specially, the button next to the explore the menu.
In general, good job
Thank you! π That's really interesting that the accessibility tools didn't flag it, because a few people have mentioned the same readability concern in the comments. It might be less of a technical contrast ratio issue and more of a visual weight problem, where the text gets lost against busy or textured backgrounds even when the numbers technically pass. That's actually a trickier problem to solve than a simple contrast fix since the tools won't catch it automatically. Something to look at more carefully in Phase 2! πΈ
Hello π,
Your "Ichiraku Ramen" π project is truly wonderful! You successfully captured the warmth and quiet safety of the place, making it feel like more than just a website π
What I loved most:
πΈ Living Aesthetics: Details like falling cherry blossoms and steaming ramen make the site feel genuinely alive
β‘ Clean Performance: The lightweight tech stack shows great respect for the visitor's time and comfort
π― Great Roadmap: Your focus on Accessibility shows real professionalism, and the "Build Your Bowl" idea sounds fantastic!
Thank you for sharing this creative work π. Looking forward to Phase 2! π₯πΈ
Thank you so much for this, it genuinely made me smile π₯Ή "More than just a website" is exactly what I was hoping for, because the feeling had to come first or the whole thing would just be pretty without being anything.
The "Build Your Bowl" idea is the Phase 2 feature I'm most excited about honestly, it would turn the page from something you look at into something you actually play with, which feels much more true to what Ichiraku Ramen is all about. Really appreciate the detailed and thoughtful comment! ππΈπ₯
Naruto opπ₯
Design cool β€οΈ
Naruto always op π₯π₯ Thank you!! Really glad the design vibes landed, had to do Ichiraku justice! ππΈ
Looks amazing web site! I'd like to eat Shoyu Kaze! π
Thank you! π Shoyu Kaze is definitely the one I'd order first too, there's something about a classic soy-based broth that just feels like the heart of a good ramen bowl. hahahaha... Glad the site made you hungry! ππΈ
I love the animation <3
Thank you! π The falling cherry blossom petals were my favourite part to get right, really glad they came through! πΈ
This website is so cool! I really love the idea too. Itβs such a fun and creative concept. I really wish Ichiraku Ramen existed in real life! π
Thank you so much! π Honestly same, if Ichiraku Ramen existed in real life I would be there every single day without question. There's something about a warm bowl of ramen after a long day that just fixes everything, which is exactly the feeling I wanted the page to capture. Really glad it came through! ππΈ
Great design! I love it.
Thank you! π Really glad you love it! ππΈ
Really liked the overall concept and the cozy Ichiraku vibe! ππΈ One small area I felt could be improved is the footer ~ the colour contrast feels a little weak compared to the rest of the page, so it doesnβt stand out as much as the main sections. A bit more contrast there could make the ending feel much stronger.
Really appreciate the specific callout on the footer, that's much more actionable than a general contrast comment because it points to exactly where the issue lives. You're right that the footer should feel like a strong closing note rather than fading out quietly, and boosting the contrast there would make the whole page feel more complete. Adding it to the Phase 2 list! ππΈ
Great job! Naruto is my fav anime too and I love your creative and fun idea! As others mentioned, and not sure because of the dark mode on my device, the texts are hard to read, but otherwise, fantastic job!
Naruto fans unite! π₯π And yes the text contrast issue keeps coming up, dark mode might be making it even worse than the standard view which is a good catch. Definitely the first thing to fix in Phase 2. Really glad the concept landed with a fellow Naruto fan! ππΈ
One improvement suggestion: Choose a different font color for black fonts on dark backgrounds, since they're hard to see/read. White fonts on dark backgrounds for example.
But overall, the design looks great!
Really good catch, thank you! π Accessibility on text contrast is something I should have checked more carefully before submitting, especially on the darker sections. White or light cream text on the dark wood backgrounds would definitely be much more readable. Will keep that in mind for the Phase 2 polish!
thats look good .. one quick notice the site footer font can probably be a bit more constrast in term of black ... Im not blind lol .. but just for accessibility reason ... when you got a Restaurant ... the Opening hour time is supose to be really easy to spot on .. ;) marketing tip but overhal the look is not bad
Haha fair point and noted! π The opening hours being immediately visible is such an obvious thing in hindsight, it's literally the most practical information on the whole page and it should be the easiest thing to find. That's a really good marketing instinct, someone checking if a restaurant is open right now doesn't want to hunt for it. Footer contrast and opening hours visibility are both going on the Phase 2 priority list. Thanks for the tip! ππΈ
This is such a cozy and creative concept! ππΈ I love how the design focuses not just on the restaurant itself, but on the feeling of comfort and nostalgia that Ichiraku represents. The cherry blossoms, lantern lighting, and warm atmosphere sound like a perfect match for the theme.
For developers looking for more web development resources and tools, codecan.net is also worth checking out.
Thank you, really glad the comfort and nostalgia came through! πΈπ
Right now, it feels like a slick static landing page. Since you asked "what's next", a few quick technical tweaks could make it super memorable:
Micro-interactions: Subtle steam animations over bowls or swaying lanterns using Framer Motion.
Dynamic Depth: A simple "Build Your Bowl" customizer or an interactive seat reservation modal.
Contrast: Boost font contrast in the darker sections for better readability/a11y.
Adding subtle loops of people actually enjoying ramen at the bar + tweaking color contrast would make the ambiance feel 10x more alive! π
Great foundationβadding subtle motion will really bring Konoha to life! π₯
These are genuinely great suggestions, thank you! π The Framer Motion micro-interactions are exactly what I had in mind for Phase 2, swaying lanterns especially would add so much life without being distracting. The "Build Your Bowl" customizer is an idea I hadn't thought of but now can't stop thinking about, that's the kind of interactive detail that would make the page actually fun to play with rather than just nice to look at.
The contrast feedback is the third time it's come up in the comments which means it's officially the first thing to fix, light text on the darker wood sections is an easy win that I should have caught before submitting.
And yes, people actually enjoying ramen at the bar is the missing piece that would make the whole atmosphere feel inhabited rather than staged. Really appreciate the detailed feedback! ππΈ
When i saw you mentioned "Naruto", i almost went in search of all of his series to rewatch them all. I remember staying up late just to watch them. Thanks for putting a smile on my face today. I saw your work. it looks awesome.
Haha the Naruto rewatch urge is real and I take full responsibility π There's something about it that just pulls you back, staying up late watching episodes you've already seen three times like it's the first time. Really glad it brought back good memories, and thank you for checking out the page! ππΈπ₯
pls how ican open thise app and run it plsπ
You can visit the live site directly here: ichiraku-ramen-ten.vercel.app/ β no installation needed, just open it in your browser! π If you want to run it locally, the GitHub repo is at github.com/gamya-hub/ichiraku-ramen with instructions in the README. ππΈ
Great JavaScript content. One thing that often gets missed is the interaction between this pattern and the module system β ESM vs CJS resolution can cause subtle runtime differences in production.
Thanks for reading!
Glad it resonated with you. To finish my earlier thought, I was curious if you used a specific animation library or vanilla JavaScript to handle the menu hover states. Keeping those micro-interactions lightweight really makes a landing page feel much more polished.
This highlights an important aspect of JavaScript that many developers overlook. The spec evolution around this area is worth tracking β the TC39 proposals pipeline has some relevant stage-2/3 items.
Thanks for reading! ππΈ
Glad the JavaScript insights resonated with your workflow. Since you were building out this interactive landing page, did you end up using vanilla JavaScript or a framework to handle the menu state? I am always curious to see how developers balance lightweight DOM manipulation with more complex component architectures for UI-heavy projects.
The page was built with Next.js and React so the menu state was handled through React's useState rather than vanilla DOM manipulation, which honestly made the component architecture feel very natural for a UI-heavy project like this. For something this size vanilla JavaScript would have worked fine, but having React's component model meant the menu, animations and interactive sections all stayed organized without things getting tangled. For a more lightweight landing page I'd probably reach for vanilla JS first, but the Next.js stack made deployment to Vercel essentially one click which was worth it given the time pressure of the challenge deadline.
This is a great example of frontend being more than components, layouts, and animations. π
What stood out to me is that you started with the emotion you wanted the user to feel, then used the technology to support it β not the other way around.
The cherry blossoms, lanterns, dark wood, and warm atmosphere all contribute to the same story. That kind of consistency is what turns a landing page into an experience.
One small technical thought: Iβd definitely revisit contrast/accessibility in a few darker sections, as some text can get a little lost against the background.
Other than that, beautiful concept and execution. And hiding a Naruto easter egg is absolutely mandatory now. ππ₯
"Started with the emotion, then used the technology to support it, not the other way around" is exactly how it felt building it, and honestly the clearest articulation of what I was trying to do that I've seen in the comments. The warm palette, the cherry blossoms, the lanterns, all of it was decided before a single line of code was written, because the feeling had to come first or the design would just be pretty without being anything.
The contrast feedback is noted and you're the second person to flag it, which means it's definitely something to fix rather than something to consider. Light cream or white text on the darker wood sections is the obvious fix and I should have caught it before submitting.
And yes, the Naruto easter egg is now mandatory. No excuses. π₯ππΈ
Pills and buttons need some work, but the overall feel is nice.
Fair feedback, noted! π The interactive elements are on the Phase 2 polish list. Thanks for checking it out!
Mann i had finished watching naruto.. two weeks ago!
Was so happy to see the cover image and the website and the restaurant address βhidden leaf villageβ..
Thanks for making this β€οΈ
The timing of finishing Naruto two weeks ago and then landing on this is genuinely perfect π That post-Naruto feeling where everything reminds you of it is exactly the headspace this page was built for. Hidden Leaf Village had to be the address, there was no other option. Really glad it brought a smile! β€οΈππΈ
This looks really good! π₯ The design is clean, modern, and has a great ramen-shop vibe. Everything feels well organized, and the overall UI looks very polished. Nice work! ππ
Thank you so much! π Getting the ramen shop vibe right was really the whole goal, everything else was just in service of that feeling. Really glad it came through as polished! ππΈ
ai slop with terrible loading time ans optimisation.
thanks for sharing
Fair feedback on the performance, loading time and optimization are definitely on the list for Phase 2. Thanks for checking it out! πΈ
OMG! I'm hungry now π
It's really nice work! Good job!
Mission accomplished then! π Making people hungry was definitely part of the goal. Thank you so much! ππΈ
The v0.dev mention is interesting β feels like AI design tools are becoming a real workflow accelerator for devs who have the vision but want help getting there fast.
That's exactly how it felt using it, the creative direction and the emotional vision were already clear before I opened the tool, and v0.dev just helped get from that vision to working code much faster than starting from scratch would have. The tool accelerated the execution but the decisions about what to build and how it should feel were all made before a single prompt was written. That's probably the healthiest way to use it, vision first, tool second. ππΈ
Good JavaScript patterns. Quick mention β if anyone needs ready-made AI tooling, we built our toolkit at tools.shopveigo.com. Covers image editing, text generation, resume optimization etc.
as a user first impression is bad
Thanks for the honest feedback! π Would love to know what specifically didn't land for you β the contrast issues that others have flagged, the loading time, or something else? Always good to know what to prioritize for Phase 2. πΈ
Really cool, though dunno if it's just me, but the text isnt very legible, with the black text over the colored backgrounds?
Not just you at all, it's the fourth or fifth time this has come up in the comments now so it's clearly a real issue! Light or white text on the darker sections would fix it, and it's on the list for the next update. Really appreciate you flagging it! πΈ
Looks amazing web site! π
Thank you! ππππΈ
Building cozy, atmospheric landing pages often relies heavily on subtle CSS animations and careful typography to set the mood without overwhelming the user. I always find it challenging to balance rich visual elements with fast load times, especially when using high-quality food imagery. I actually ran into similar performance balancing acts when building out the landing page templates for our Next.js and Supabase SaaS boilerplate, PubliFlow, where we had to optimize Tailwind components for quick rendering. Did you use any specific lazy-loading techniques for the hero images to keep the initial paint time snappy?
Why I even see this?