This is a submission for Frontend Challenge - Comfort Food Edition, Perfect Landing.
What I Built
Smakosz (Polish for "connoisseur" or "lover of fine food") is an editorial, fine-dining digital experience celebrating the comforting heritage of Polish cuisine in Warsaw's historic Old Town.
Central European comfort food is defined by centuries of living fermentations, wild forest foraging, and hearth-simmered warmth. Smakosz reimagines these grounding heritage recipes โ from 72-hour wild sourdough ลผurek to hand-crimped August chanterelle pierogi and 4-day slow-braised hunter's stew โ with contemporary plating, seasonal storytelling, and an Awwwards-tier interface.
Key Features & Architectural Innovations:
-
Doppelrand (Double-Bezel) Physical Architecture: Physical, machined hardware aesthetic featuring nested cards with concentric radii (
.card-outerand.card-inner), subtle inner highlights, and ambient depth. -
Interactive Tasting Tray Builder: Guests can build a bespoke dining flight by adding dishes directly from the menu showcase with a live floating price counter in Polish Zลoty (
PLN). - Signature ลปurek Breakdown Stage: Interactive sticky explorer detailing the 4 core artisanal pillars of Poland's iconic soup (72h Rye Zakwas, Artisanal Biaลa Kieลbasa, 6-Minute Soft-Boiled Farm Egg, and Carved Sourdough Boule).
- Table Reservation System & Ticket Generator: Complete booking workflow with guest steppers, atmosphere seating zones (Hearthside Dining, Chef's Counter, Garden Alcove), time slot selectors, and instant confirmation ticket code generator with one-click copying.
-
Dual Theme Engine: Seamless toggle between Dark Forest (
#08140c) and Warm Stone (#f6f2eb) color profiles with strict WCAG AAA/AA contrast parity. -
Accessible Keyboard Lightbox: Masonry gallery with category filters, counter indicators (
1 / 6), and keyboard controls (Escape,ArrowLeft,ArrowRight).
Demo
- ๐ Live Demo (GitHub Pages): https://johnnylemonny.github.io/smakosz-comfort-kitchen/
- ๐ GitHub Repository: https://github.com/johnnylemonny/smakosz-comfort-kitchen
johnnylemonny
/
smakosz-comfort-kitchen
Smakosz - Modern Polish Comfort Kitchen. An editorial luxury dining landing page featuring interactive tasting flights, sourdough ลผurek explorer, and reservation system.
Smakosz: Modern Polish Comfort Kitchen ๐ฒโจ
DEV.to Frontend Challenge (Comfort Food Edition) โ Perfect Landing Category Submission
Author: johnnylemonny
๐ Concept & Culinary Inspiration
Smakosz (Polish for "connoisseur" or "lover of fine food") is an immersive digital dining experience celebrating the rich, underappreciated soul of Polish comfort food.
Central European comfort food is defined by centuries of living fermentations, wild forest foraging, and hearth-simmered warmth. Smakosz reimagines these grounding heritage recipes with contemporary plating, seasonal ingredients, and an Awwwards-tier digital interface.
Featured Culinary Treasures:
- ลปurek Staropolski w Chlebie: 72-hour wild rye starter broth with seared white sausage, 6-minute farm egg, and fresh marjoram in a carved sourdough boule.
- Pierogi z Kurkami: Hand-crimped dumplings filled with August chanterelles, sweet caramelized onion jam, and farmhouse twarรณg.
- Bigos Myลliwski: 4-day slow-braised hunter's stew with forest porcini, juniper berries, and smoked meats in black enamel cast iron.
- Plackiโฆ
Journey
1. Zero-Bloat Engineering Philosophy
Rather than relying on heavy UI component libraries, Smakosz is handcrafted with:
- TypeScript 7.0 (Strict Mode) for robust type safety and state management.
-
Modern Vanilla CSS & Fluid Clamp Math (
clamp(2.4rem, 5vw, 4.2rem)) ensuring flawless responsive scaling from320pxto2560pxdisplays without layout breakage. - Fast Tooling: Bundled with Vite 8.2.1 for lightning-fast build performance and tree-shaking.
2. Quality, Testing & Performance
- Automated Vitest Test Suite: 26 / 26 passing automated unit and contrast tests verifying WCAG relative luminance contrast ratios, menu calculations, gallery navigation, and responsive media query breakpoints.
- Lighthouse Scores: 100/100 SEO, 100/100 Best Practices, and 93/100 Accessibility verified directly in headless Chrome audits.
- Code Quality: Formatted and linted with Biome across the entire codebase.
What's Next
I plan to add Progressive Web App (PWA) capabilities with offline menu caching and ambient background soundscapes (crackling wood fire and gentle restaurant murmur) for tablet and mobile dining table displays.
License
Copyright ยฉ 2026 johnnylemonny. Source code is made available for viewing and educational evaluation as part of the DEV.to Frontend Challenge.
Top comments (0)