Chalupa Za Kútom: dřevěnice v srdci lesa, která si rezervace vyřizuje sama
Chalupa Za Kútom
Chalupa Za Kútom je 130 let stará dřevěnice ve Slovinkách, v okrese Spišská Nová Ves, která se pronajímá celá: až pro osm hostů, s venkovní vířivkou, finskou saunou a altánem s ohništěm. Majitel měl web na Webnode, na který byli hosté zvyklí, ale rezervace z něj chodily jen jako formulář bez kalendáře a bez platby. Jeho vlastní prezentační video bylo na stránce vložené jako soukromé video z YouTube, takže ho návštěvník nikdy neviděl. Postavili jsme nový web v duchu jeho původního designu, jen čistší, a pod něj vlastní rezervační systém: kalendář obsazenosti, ve kterém se den odjezdu dá znovu prodat jako den příjezdu, platbu přes Stripe, doplňkové služby, nákup na firmu, automatický e-mail dva dny před příjezdem a administraci, ve které majitel mění termíny a blokuje data z telefonu. Web mluví slovensky, anglicky a německy. Celý projekt zabral 12 dní práce s rozpočtem €400.
Web chaty + rezervační systém s platbami a administrací
Typ projektu
Přímé online rezervace se zaplacením bez zprostředkovatele
Hlavní cíl
€400
Cena tohoto projektu
Vybrané obrazovky ze živého webu
Vizuální náhled projektu ukazuje, jak vypadá web na různých zařízeních. Responzivní design zajišťuje perfektní zobrazení na mobilech, tabletech a desktopech.
Hero s videem majitele: brána s vyřezávanou tabulí, pod ní pás faktů 8 osob, vířivka, sauna, od 110 € / noc.
Netriviální úlohy projektu
Web na pronájem chaty vypadá jednoduše, dokud se nezačnou prodávat skutečné noci. Pak je potřeba vyřešit, kdy den končí, kdo zaplatil dřív, jakou cenu má noc na Silvestra a co dostane majitel do knihy ubytovaných. Tady je šest úloh, na kterých projekt stál.
Den odjezdu musí být zároveň dnem příjezdu
Odjezd je do 10:00 a příjezd od 14:00, takže den mezi dvěma pobyty se prodává dvakrát. Majitel to napsal vlastními slovy: „ta nedeľa by mala byt voľná keďže odchod je do 10:00 a malo by sa dať rezervovať od nedele do pondelka“. Kalendář s celými dny by mu každý víkend zbytečně zamkl jednu noc.
Den v kalendáři přestal být nedělitelný a má pět stavů: volný, obsazený, den odjezdu vhodný k příjezdu, den příjezdu vhodný k odjezdu a minulost. Půldny jsou vybarvené úhlopříčkou podle snímku, který poslal majitel („napr 8-9 októbra je to iba na polovicu cervene zelene“). Server a prohlížeč si posílají data ve formátu ISO, ne časové značky, takže obsazenost se neposune ani mezi serverem v UTC a hostem v bratislavském čase.
Technologie a implementace
Pět stavů dne, ISO data mezi serverem a klientem
Dva hosté, jeden termín, jedna sekunda
Chata je jedna a každá noc se dá prodat jen jednou. Pokud dva hosté kliknou na stejný víkend ve stejné chvíli, běžná kontrola „podívej se do databáze a zapiš“ pustí oba. Na serverless hostingu, kde každý požadavek běží jinde, to není teorie.
Překrytí pobytů zakazuje omezení EXCLUDE přímo v Postgresu, takže druhý zápis databáze odmítne sama a host dostane srozumitelnou zprávu místo chyby. Termín se při odchodu do pokladny podrží o pět minut déle, než žije samotná pokladna Stripe, a za zaplacený se považuje až po podepsaném webhooku, ne po návratu hosta na stránku. Stejnému omezení podléhají i termíny importované z externích kalendářů přes iCal.
Technologie a implementace
Postgres EXCLUDE, Stripe Checkout, podepsaný webhook, Vercel Cron
Cena, která závisí na datu i na doplňcích
Noc stojí 110 € přes týden, 130 € o víkendu a 200 € o Vánocích, Silvestru a Valentýnu. Majitel chtěl, aby se vyšší částka ukázala sama: „dať do aj do cenníka a aj do kalendára aby automaticky keď niekto zaklikne ten termín sa mu zobrazila ta vyššia suma“. K tomu doplňky s různými jednotkami: za pobyt, za osobu, za každé ráno, i úplně zdarma.
Cenu každé noci i doplňků počítá jedna funkce a z ní čerpá ceník, kalendář, součet ve formuláři, položky ve Stripe, e-mail majiteli i administrace. Server částku přepočítá znovu a nikdy nevěří číslu z prohlížeče. Snídaně se počítají jako osoby × rána a strop rán vychází z počtu nocí. Bezplatná dětská postýlka se vypisuje slovem „Zdarma“, ne jako „+0 €“, a zůstává v objednávce, protože zdarma neznamená, že ji netřeba připravit.
Technologie a implementace
Jediný zdroj ceny, serverový přepočet částky
Prezentační video, které návštěvník neviděl
Majitel si nechal natočit vlastní film o chatě a dal ho na úvodní stránku, jenže jako soukromé video z YouTube. Návštěvník místo dřevěnice viděl výzvu k přihlášení. Nejsilnější materiál, jaký o místě existoval, tak na webu fakticky nebyl.
Z originálu ze střižny jsme sestříhali 12,4sekundovou smyčku ze šesti záběrů. Začíná i končí záběrem z dronu, takže přechod smyčky působí jako další střih. Vodoznak vypálený do obrazu jsme ořízli. Nastavení kódování jsme vybrali podle 118 měření VMAF, ne od oka: 9,4 MB na šířku a 3,4 MB na výšku pro mobil. Video se přehrává z vlastní domény, bez YouTube.
Technologie a implementace
ffmpeg, měření VMAF, dva ořezy videa
Web, na který jsou hosté zvyklí
Majitel chtěl zůstat u svého designu, „jen lepšího“. Původní web na Webnode však měl bílé písmo na tlačítku s kontrastem 2,4 : 1, mobilní menu utíkající mimo obrazovku, nadpis lámaný uprostřed slova na 390 px, dva stejné formuláře pod sebou, zástupné kontakty ze šablony a prázdnou stránku podmínek s textem „Vložte svoj text“.
Vzhled jsme změřili přímo ze živé stránky a zachovali ho: písmo, barvy, tvar tlačítek, pořadí menu. Opravy se týkaly jen toho, co bylo rozbité. Hlavní tlačítko dostalo tmavou pilulku, která už v jeho vlastním designu existovala, formulář zůstal jeden a všeobecné podmínky majitele jsou na webu v plném znění ve třech jazycích. Původní autorský koncept s motivem řezby jsme uložili do archivu projektu, když se majitel rozhodl pro kontinuitu.
Technologie a implementace
Měření stylů v headless Chromiu, WCAG kontrast
Kniha ubytovaných, faktury a firemní hosté
Majitel je povinen vést knihu ubytovaných a vystavuje faktury. Formulář se jménem, e-mailem a telefonem mu nedával údaje ani do jednoho, ani do druhého, a firemní host potřebuje fakturu na IČO, ne na soukromou osobu.
Formulář se ptá na adresu trvalého bydliště a otevřeně říká proč: „Potrebujeme ju do knihy ubytovaných a na faktúru“. Zaškrtnutím „Nakupujem na firmu“ se rozbalí název, IČO, DIČ a adresa firmy a server je přečte jen tehdy, když je volba opravdu zapnutá. Majitel dostane adresu v e-mailu jedním řádkem a v administraci ji najde v bloku „Fakturačné údaje“.
Technologie a implementace
Serverová validace po polích, migrace schématu Drizzle
Podobné problémy ve vašem byznysu? Pomůžeme vám je vyřešit moderním tech stackem.
Výsledná struktura
Kompletní webová struktura navržená pro maximální konverzi a user experience. Každá stránka má jasný účel a optimalizovanou navigaci.
Nejdůležitější sekce webu
Každá sekce řešila konkrétní byznys problém a zvyšovala konverze
Hero s videem majitele
Z původního filmu majitele jsme sestříhali 12,4sekundovou smyčku ze šesti záběrů: dron, brána s vyřezávanou tabulí, lucerna s čísly domu, vířivka, houpačka s altánem a znovu dron. Pod titulkem „Objav miesto, kde splynieš s prírodou.“ stojí pás faktů: 8 osob, venkovní vířivka, finská sauna, od 110 € za noc.
Rezervace: kalendář, formulář, platba
Na desktopu stojí kalendář vedle formuláře, takže host vidí zvolený termín a součet během vyplňování. Formulář rozděluje dospělé a děti, ptá se na adresu do knihy ubytovaných, nabízí doplňky a před odesláním vyžaduje souhlas se všeobecnými podmínkami. Pak následuje Stripe Checkout.
Ceník se sezónou
Pracovní dny 110 €, víkendy 130 € a sezónní cena 200 € za noc od 20. prosince do 1. ledna a od 13. do 15. února. Pod ceníkem jsou podmínky pronájmu a blok „Dôležité informácie“ o příjezdu autem 4x4 a o tom, že na místě není obchod ani restaurace.
Fotogalerie ve čtyřech skupinách
22 fotografií majitele v pravidelné mřížce, rozdělených na Exteriér, Interiér, Wellness a Zahradu, s lightboxem na kliknutí. Kredit „Obrázky poskytol Pexels“, který na původním webu zůstal ze šablony u jeho vlastních fotografií, jsme odstranili.
Voucher
Samostatná stránka dárkového poukazu s náhledem poukazu s logem chaty a objednávkovým formulářem na počet osob a nocí. Text popisu je doslova majitelův.
Kontakt s mapou
Mapa Google na bodě, který poslal sám majitel, a vedle ní fotografie brány, aby host věděl, jak místo vypadá naživo. Tlačítko „Otvoriť trasu v Google Maps“ na telefonu otevře navigaci.
Použitý stack
Frontend a design
App Router, serverové komponenty a design postavený na vizuálním jazyce původního webu majitele: PT Serif, tlumená břidlicová paleta, tlačítka ve tvaru pilulky a fotografie se zaoblením.
Rezervace a platby
Rezervace nejdřív podrží termín, pak hosta pošle do Stripe Checkout. Dvojitou rezervaci fyzicky vylučuje omezení přímo v databázi, ne kontrola v aplikaci. Cenu noci i doplňků počítá jedna funkce pro ceník, kalendář, součet ve formuláři, pokladnu i e-mail.
Administrace a e-maily
Heslem chráněná administrace se seznamem rezervací, detailem rezervace, blokacemi termínů a nastavením. E-maily jdou hostovi v jeho jazyce a majiteli vždy slovensky, včetně rozpisu doplňků a fakturačních údajů.
SEO, AI a soulad
Tři jazyky s prefixem v adrese, hreflang a canonical na každé stránce, BreadcrumbList na podstránkách a llms.txt generovaný ze stejných slovníků jako samotný web. GA4 a GTM se zapínají až po souhlasu v cookie liště se dvěma rovnocennými tlačítky.
Frontend a design
App Router, serverové komponenty a design postavený na vizuálním jazyce původního webu majitele: PT Serif, tlumená břidlicová paleta, tlačítka ve tvaru pilulky a fotografie se zaoblením.
Rezervace a platby
Rezervace nejdřív podrží termín, pak hosta pošle do Stripe Checkout. Dvojitou rezervaci fyzicky vylučuje omezení přímo v databázi, ne kontrola v aplikaci. Cenu noci i doplňků počítá jedna funkce pro ceník, kalendář, součet ve formuláři, pokladnu i e-mail.
Administrace a e-maily
Heslem chráněná administrace se seznamem rezervací, detailem rezervace, blokacemi termínů a nastavením. E-maily jdou hostovi v jeho jazyce a majiteli vždy slovensky, včetně rozpisu doplňků a fakturačních údajů.
SEO, AI a soulad
Tři jazyky s prefixem v adrese, hreflang a canonical na každé stránce, BreadcrumbList na podstránkách a llms.txt generovaný ze stejných slovníků jako samotný web. GA4 a GTM se zapínají až po souhlasu v cookie liště se dvěma rovnocennými tlačítky.
💡 Moderní tech stack = rychlý web + jednoduchá údržba + dlouhodobá podpora
Průběh realizace
Majitel posílal požadavky přes WhatsApp v krátkých dávkách. Každou jsme rozepsali na body s jeho citáty, zapracovali a vrátili ke schválení. Pořadí práce jsme s ním domluvili předem: design, kalendář, platby.
10.–13. září
Podklady a první koncept
2 dnySesbírali jsme obsah a 24 fotografií z původního webu, postavili autorský koncept na osmi stránkách a nastavili nasazování na Vercel přes GitLab CI.
14.–16. září
Web ve stylu majitele a video v hero
2 dnyNa přání majitele jsme web postavili ve vizuálním jazyce jeho původní stránky a ve druhém průchodu vylepšili typografii a rytmus. Přibylo video v hero, celé znění podmínek, stránka Voucher, mapa v kontaktu a kalendář dostupnosti.
17.–19. září
Rezervační systém
3 dnyDatabáze s ochranou proti dvojité rezervaci, platby přes Stripe, administrace a ověření celého toku na živé databázi. K tomu sezónní ceny, dospělí a děti zvlášť, doplňkové služby a tři jazyky: slovenština, angličtina a němčina.
20.–22. září
E-maily, fakturace a příprava na spuštění
3 dnyE-mail hostovi dva dny před příjezdem, který se po přesunu termínu odešle znovu podle nových dat. Adresa hosta a režim nákupu na firmu. llms.txt, cookie lišta, BreadcrumbList a audit Lighthouse: 100 v přístupnosti, best practices a SEO na všech stránkách.
23.–24. září
Analytika, půldny a předání
2 dnyGA4 a GTM zapojené až po souhlasu návštěvníka. Podle posledních podnětů majitele dostal kalendář půldny výměny a dětská postýlka se stala bezplatnou. Tím byl projekt po 12 dnech práce předán.
FAQ k projektu
Pronajímáte chatu, chalupu nebo apartmán?
Postavíme web s rezervacemi, které se dají rovnou zaplatit, s kalendářem, který rozumí dni výměny, a s administrací, kterou zvládnete z telefonu. Bez provize zprostředkovateli za každou noc.
Nechte nám kontakt (stačí e-mail nebo telefon)
✨ Vlastní rezervace • Online platby • Více jazyků