Balan Coffee & Roastery — A Slow-Drip Vietnamese Coffee Landing Page
This is a submission for Frontend Challenge - Comfort Food Edition, Perfect Landing What I Built I created Balan Coffee & Roastery , a polished landing page for a fictional Vietnamese comfort café in Saigon. The concept is inspired by the quiet comfort of slow phin coffee, butter toast, and small sweet treats. Rather than treating coffee as a quick purchase, I wanted the site to feel like a calm…
This submission is for the Frontend Challenge - Comfort Food Edition, a beautifully crafted landing page called Balan Coffee & Roastery. It depicts a fictional Vietnamese comfort café in Saigon, inspired by the slow, comforting ritual of drinking phin coffee, butter toast, and indulging in sweet treats. The site aims to create a calm, familiar, and personal experience for visitors.
Upon entering the site, users are greeted with an editorial-style coffee shop landing page, complete with sections for the menu, café story, ritual, and visiting information. The navigation is clear and the interactive controls are easily accessible. The site maintains consistent typography for numbers and prices throughout, adding to the cohesive feel.
A standout feature of the site is the Pixel Phin Brew mini-game. This interactive experience allows users to dose beans into the phin, grind the beans, bloom the coffee, let the phin drip, and finally serve the finished cup. Each step of the brewing process is clearly explained through buttons, with the pixel scene, progress indicator, and feedback message updating in real-time to reflect the user's actions.
The visual direction of the site is warm and inviting, with cream tones, deep coffee browns, generous spacing, subtle textures, and an editorial layout that evokes the serenity of a morning at a Saigon café. The design pays attention to small details like consistent tabular numerals for prices and opening hours, responsive layouts, visible interaction states, and reduced-motion support for accessibility.
The project was built using React, TypeScript, Vinext/Vite, and custom CSS. The developer kept the implementation lightweight, avoiding large dependencies for animation or the game. The Manhattan Café illustration assets in the site retain the original creator's watermark as indicated in the source files. Overall, this submission showcases a thoughtful and engaging take on a fictional café experience, combining a relaxing visual style with interactive elements that make the site feel like a true coffee ritual.
Written by urgent.news from Dev.to's reporting — not their text. Machine-written — may contain errors; check the original before relying on it.
