Miso Memory: A Tactile CSS Ramen Lab & Comfort Food Journal

Live Preview: https://3000-i8ihvar1779rigjijpim1-9c5700f7.us3.manus.computer

Introduction

For the DEV Community Frontend Challenge: Comfort Food Edition, we wanted to build something that goes beyond standard grid cards and placeholder text. We asked ourselves: What does comfort actually feel like on a screen?

The result is Miso Memory—an award-grade editorial web experience built under the Ember Cartography design philosophy. It treats the browser viewport like a warm kitchen drawer filled with tactile recipe notes, vintage stamps, scented ink trails, and a fully interactive CSS ramen bowl that responds in real-time to your culinary choices.

---

Key Features & Craft

• Hero Proof of Craft (CSS Ramen Bowl): Built entirely with semantic CSS layers, organic SVGs, and kinetic steam animations. The bowl features floating noodles, a jammy egg with a coral yolk, sweet corn kernels, scallions, and chopsticks resting at a natural angle.
• Interactive Ingredient Builder: Visitors can tap through pantry items (Miso Tare, Sweet Corn, Jammy Egg, Scallions, Toasted Sesame) to instantly season the bowl and update their comfort notes in real-time.
• Ambient Simmering Broth Audio: A zero-dependency Web Audio API sound engine that generates gentle simmering bubbles, lowpass-filtered steam noise, and smooth volume controls on demand (with zero autoplay).
• Ember Cartography Aesthetic: Rich plum ink (#221920), warm parchment (#f4e9d6), saffron accents, and ember coral CTAs paired with Bricolage Grotesque and Mulish typography.
• Accessibility & Responsiveness: Fully compliant with reduced-motion queries, keyboard navigation skip links, and fluid responsive layouts for mobile and desktop screens.

---

Tech Stack

• Frontend: React 19, TypeScript, Tailwind CSS 4, and Lucide icons.
• Audio Engine: Native browser Web Audio API oscillator and noise buffer nodes.
• Design System: Custom token-driven CSS architecture with zero generic AI-slop layouts.

We invite you to explore the live app, build your own custom bowl, and let the broth simmer!