스마코스: 현대적인 폴란드식 컴포트 키친 — 어워드 티어 다이닝 체험 🍽️✨

Frontend Challenge Perfect Landing Submission 🍲🥧

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:

1. Doppelrand (Double-Bezel) Physical Architecture: Physical, machined hardware aesthetic featuring nested cards with concentric radii (.card-outer and .card-inner), subtle inner highlights, and ambient depth.
2. 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).
3. 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).
4. 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.
5. Dual Theme Engine: Seamless toggle between Dark Forest (#08140c) and Warm Stone (#f6f2eb) color profiles with strict WCAG AAA/AA contrast parity.
6. 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 from 320px to 2560px displays 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.