Wilczy Dół.Tawerna, do której schodzi się scrollem.
Strona tematycznej tawerny w piwnicach Starego Miasta w Krakowie: medalion 3D obracany przewijaniem, księga menu do kartkowania, dukat w WebGL i minigra — a pod spodem własny system rezerwacji stołów z panelem dla obsługi.
Koncepcja
Strona, która zachowuje się jak zejście do piwnicy
Wilczy Dół to tawerna fantasy przy Szpitalnej w Krakowie: świece, futra, eliksiry warzone przy stole i płacenie dukatami. Zwykła wizytówka z galerią zabiłaby ten klimat — więc strona jest opowieścią czytaną przewijaniem, a każda sekcja to kolejny rozdział wieczoru.
Teksty pisane są archaizowanym językiem karczmy („Wejdź, wędrowcze"), pergamin i przybrudzone złoto wracają w każdym elemencie — od menu po formularz rezerwacji.
Rozdziały strony
Każda sekcja robi coś, zamiast tylko wyglądać
Medalion, który obraca się scrollem
Srebrny medalion z logo tawerny wykonuje pełny obrót podczas przewijania i „odkłada się" do paska nawigacji — 120 klatek wyrenderowanych z własnego modelu 3D.
Księga menu do kartkowania
Pełna karta — 16 działów, ceny w złotych i dukatach — przepisana z 61-stronicowego PDF-u na strony księgi, którą wertuje się strzałkami albo zakładkami.
Dukat w WebGL
Moneta tawerny odtworzona w three.js ze zdjęć prawdziwego żetonu — obok zasady kantoru: kurs, minimalna sakiewka, co zrobić z resztą.
Tarcza do rzutu toporem
Cennik strzelnicy z klikalną tarczą — gość „rzuca" toporem, zanim przyjdzie zrobić to naprawdę.
Minigra w przeglądarce
Trzy zagadki w trójwymiarowej izbie — zapowiedź escape roomu, w którą gra się bez instalowania czegokolwiek.
Mapa w stylu pergaminu
OpenStreetMap (Leaflet) przefiltrowana na stary pergamin, z dojściem od Rynku, godzinami kuchni i radą o kolejkach w weekend.
Księga rezerwacji
Stół rezerwuje się w pięciu krokach — bez telefonu do karczmy
Rezerwacja wygląda jak wpis do skórzanej księgi z zakładkami, ale pod spodem liczy prawdziwą dostępność: widełki godzin każdej sali, wielkość stołów, wyjątki w kalendarzu i minimalny czas wyprzedzenia.
I
Dzień
Kalendarz pokazuje tylko dni z wolnymi stołami.
II
Komnata
Trzy sale ze zdjęciem, opisem i liczbą wolnych pór.
III
Stół
Mniejszy (2–3 osoby) albo biesiadny (5–6).
IV
Pora
Sloty wynikają z widełek danej sali na ten dzień.
V
Pergamin
Dane gościa, zgoda i lakowa pieczęć — potwierdzenie przychodzi mailem.
Panel obsługi
Karczmarz widzi cały wieczór na jednym ekranie
Rezerwacje ze strony i z telefonu trafiają do jednego grafiku. Panel działa w przeglądarce na komputerze przy barze i na telefonie kelnera — bez instalowania zewnętrznego systemu i bez prowizji od rezerwacji.
Grafik dnia
Sale, stoły i pory w jednej tabeli — wolna komórka to od razu „+ dopisz". Na telefonie ten sam grafik w kartach.
Rezerwacje telefoniczne
Obsługa dopisuje gościa z telefonu — trafia do tej samej puli co rezerwacje ze strony, bez ryzyka dubla.
Widełki per sala
Każda sala ma własne okna na każdy dzień tygodnia, wersjonowane od daty. Zmiana nigdy nie rusza istniejących rezerwacji.
Wyjątki i blokady
Zamknięcie dnia, własne godziny na wydarzenie albo zdjęcie stołu z puli — z ostrzeżeniem o kolidujących rezerwacjach.
Wydruk dnia
Lista rezerwacji na A4 dla zmiany, która woli kartkę przy barze.
Wstrzymanie jednym przełącznikiem
Tawerna może w każdej chwili zawiesić przyjmowanie rezerwacji online — strona od razu to komunikuje.
Niezawodność i RODO
Dwóch gości przy jednym stole to nie klimat, tylko błąd
Najważniejsza zasada systemu: ten sam stół w tej samej porze nie może trafić do dwóch osób — nawet gdy dwie rezerwacje przyjdą w tej samej sekundzie, jedna ze strony i jedna z telefonu.
- lockUnikalny indeks w bazie jako twarda gwarancja braku podwójnej rezerwacji tego samego stołu
- mark_email_readRezerwacja online ważna dopiero po potwierdzeniu linkiem z maila (double opt-in)
- keyHasła Argon2id, sesja w ciasteczku z ochroną CSRF, limity zapytań na formularzach
- auto_deleteDane osobowe gości anonimizowane automatycznie 30 dni po wizycie — statystyka zostaje
- cookieGoogle Analytics ładowany dopiero po zgodzie w banerze cookies
Przebieg projektu
Od researchu do produkcji w dwa miesiące
Lipiec
Research i koncepcja
Historia lokalu, menu, zdjęcia, kierunek artystyczny i cztery koncepty animowanego hero.
Lipiec–sierpień
Strona i księga rezerwacji
Sekcje-opowieść, pipeline klatek 3D, menu z PDF, front rezerwacji na makiecie.
Sierpień
Backend i panel
API, silnik dostępności, panel obsługi, maile, zadania w tle i testy.
Wrzesień
Produkcja
Strona i system rezerwacji na własnym hostingu tawerny, potem widełki godzin osobno dla każdej sali.
Stack technologiczny
Efekty z gier, zaplecze jak w systemie rezerwacyjnym
Strona
- check_circleReact 18 + Vite
- check_circlethree.js — dukat i minigra
- check_circlemotion — animacje
- check_circleLeaflet — mapa
- check_circleWersja EN z prerenderem (hreflang, canonical)
- check_circleDane strukturalne Restaurant
Rezerwacje (API)
- check_circleNode.js + Fastify + TypeScript
- check_circlePostgreSQL (lokalnie PGlite)
- check_circle7 migracji bazy
- check_circleNodemailer — maile w stylu pergaminu
- check_circleZadania w tle: wygaszanie, anonimizacja
Jakość i warsztat
- check_circle77 testów (node:test)
- check_circleTesty E2E w przeglądarce
- check_circlePipeline: model GLB → klatki → AVIF
- check_circleAudyt UI/UX wdrożony przed startem
Masz lokal z charakterem?
Zbudujmy stronę, po której chce się przyjść
Restauracja, pub, escape room, sala eventowa — strona z klimatem i rezerwacjami na własnym systemie, bez prowizji od każdego stolika.