Chalupa Za Kútom: drevenica v srdci lesa, ktorá si rezervácie vybavuje sama
Chalupa Za Kútom
Chalupa Za Kútom je 130-ročná drevenica v Slovinkách, v okrese Spišská Nová Ves, ktorá sa prenajíma celá: až pre osem hostí, s vonkajšou vírivkou, fínskou saunou a altánkom s ohniskom. Majiteľ mal web na Webnode, na ktorý boli hostia zvyknutí, no rezervácie z neho chodili len ako formulár bez kalendára a bez platby. Jeho vlastné prezentačné video bolo na stránke vložené ako súkromné video z YouTube, takže ho návštevník nikdy nevidel. Postavili sme nový web v duchu jeho pôvodného dizajnu, len čistejší, a pod neho vlastný rezervačný systém: kalendár obsadenosti, v ktorom sa deň odchodu dá znova predať ako deň príchodu, platbu cez Stripe, doplnkové služby, nákup na firmu, automatický e-mail dva dni pred príchodom a administráciu, v ktorej majiteľ mení termíny a blokuje dátumy z telefónu. Web hovorí po slovensky, anglicky a nemecky. Celý projekt zabral 12 dní práce s rozpočtom €400.
Web chaty + rezervačný systém s platbami a administráciou
Typ projektu
Priame online rezervácie so zaplatením bez sprostredkovateľa
Hlavný cieľ
€400
Cena tohto projektu
Vybrané obrazovky zo živého webu
Vizuálny náhľad projektu ukazuje, ako vyzerá web na rôznych zariadeniach. Responzívny dizajn zabezpečuje perfektné zobrazenie na mobiloch, tabletoch a desktopoch.
Hero s videom majiteľa: brána s vyrezávanou tabuľou, pod ňou pás faktov 8 osôb, vírivka, sauna, od 110 € / noc.
Netriviálne úlohy projektu
Web na prenájom chaty vyzerá jednoducho, kým sa nezačnú predávať skutočné noci. Potom treba vyriešiť, kedy sa deň končí, kto zaplatil skôr, akú cenu má noc na Silvestra a čo dostane majiteľ do knihy ubytovaných. Tu je šesť úloh, na ktorých projekt stál.
Deň odchodu musí byť zároveň dňom príchodu
Odchod je do 10:00 a príchod od 14:00, takže deň medzi dvoma pobytmi sa predáva dvakrát. Majiteľ to napísal vlastnými slovami: „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ár s celými dňami by mu každý víkend zbytočne zamkol jednu noc.
Deň v kalendári prestal byť nedeliteľný a má päť stavov: voľný, obsadený, deň odchodu vhodný na príchod, deň príchodu vhodný na odchod a minulosť. Poldni sú vyfarbené uhlopriečkou podľa snímky, ktorú poslal majiteľ („napr 8-9 októbra je to iba na polovicu cervene zelene“). Server a prehliadač si posielajú dátumy vo formáte ISO, nie časové značky, takže obsadenosť sa neposunie ani medzi serverom v UTC a hosťom v bratislavskom čase.
Technológie a implementácia
Päť stavov dňa, ISO dátumy medzi serverom a klientom
Dvaja hostia, jeden termín, jedna sekunda
Chata je jedna a každá noc sa dá predať iba raz. Ak dvaja hostia kliknú na rovnaký víkend v tej istej chvíli, bežná kontrola „pozri do databázy a zapíš“ pustí oboch. Na serverless hostingu, kde každá požiadavka beží inde, to nie je teória.
Prekrytie pobytov zakazuje obmedzenie EXCLUDE priamo v Postgrese, takže druhý zápis databáza odmietne sama a hosť dostane zrozumiteľnú správu namiesto chyby. Termín sa pri odchode do pokladne podrží o päť minút dlhšie, než žije samotná pokladňa Stripe, a za zaplatený sa považuje až po podpísanom webhooku, nie po návrate hosťa na stránku. Rovnakému obmedzeniu podliehajú aj termíny importované z externých kalendárov cez iCal.
Technológie a implementácia
Postgres EXCLUDE, Stripe Checkout, podpísaný webhook, Vercel Cron
Cena, ktorá závisí od dátumu aj od doplnkov
Noc stojí 110 € cez týždeň, 130 € cez víkend a 200 € cez Vianoce, Silvester a Valentína. Majiteľ chcel, aby sa vyššia suma 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 doplnky s rôznymi jednotkami: za pobyt, za osobu, za každé ráno, aj úplne zadarmo.
Cenu každej noci aj doplnkov počíta jedna funkcia a z nej čerpá cenník, kalendár, súčet vo formulári, položky v Stripe, e-mail majiteľovi aj administrácia. Server sumu prepočíta znova a nikdy neverí číslu z prehliadača. Raňajky sa počítajú ako osoby × rána a strop rán vychádza z počtu nocí. Bezplatná detská postieľka sa vypisuje slovom „Zdarma“, nie ako „+0 €“, a zostáva v objednávke, pretože zadarmo neznamená, že ju netreba pripraviť.
Technológie a implementácia
Jediný zdroj ceny, serverový prepočet sumy
Prezentačné video, ktoré návštevník nevidel
Majiteľ si nechal natočiť vlastný film o chate a dal ho na úvodnú stránku, lenže ako súkromné video z YouTube. Návštevník namiesto drevenice videl výzvu na prihlásenie. Najsilnejší materiál, aký o mieste existoval, tak na webe fakticky nebol.
Z originálu zo strižne sme zostrihali 12,4-sekundovú slučku zo šiestich záberov. Začína aj končí záberom z dronu, takže prechod slučky pôsobí ako ďalší strih. Vodoznak vpálený do obrazu sme orezali. Nastavenia kódovania sme vybrali podľa 118 meraní VMAF, nie od oka: 9,4 MB na šírku a 3,4 MB na výšku pre mobil. Video sa prehráva z vlastnej domény, bez YouTube.
Technológie a implementácia
ffmpeg, meranie VMAF, dva orezy videa
Web, na ktorý sú hostia zvyknutí
Majiteľ chcel zostať pri svojom dizajne, „len lepšom“. Pôvodný web na Webnode však mal biele písmo na tlačidle s kontrastom 2,4 : 1, mobilné menu utekajúce mimo obrazovku, nadpis lámaný uprostred slova na 390 px, dva rovnaké formuláre pod sebou, zástupné kontakty zo šablóny a prázdnu stránku podmienok s textom „Vložte svoj text“.
Vzhľad sme zmerali priamo zo živej stránky a zachovali ho: písmo, farby, tvar tlačidiel, poradie menu. Opravy sa týkali len toho, čo bolo pokazené. Hlavné tlačidlo dostalo tmavú pilulu, ktorá už v jeho vlastnom dizajne existovala, formulár zostal jeden a všeobecné podmienky majiteľa sú na webe v plnom znení v troch jazykoch. Pôvodný autorský koncept s motívom rezby sme odložili do archívu projektu, keď sa majiteľ rozhodol pre kontinuitu.
Technológie a implementácia
Meranie štýlov v headless Chromiu, WCAG kontrast
Kniha ubytovaných, faktúry a firemní hostia
Majiteľ je povinný viesť knihu ubytovaných a vystavuje faktúry. Formulár so zadaním mena, e-mailu a telefónu mu nedával údaje ani do jedného, ani do druhého, a firemný hosť potrebuje faktúru na IČO, nie na súkromnú osobu.
Formulár si pýta adresu trvalého bydliska a otvorene hovorí prečo: „Potrebujeme ju do knihy ubytovaných a na faktúru“. Zaškrtnutím „Nakupujem na firmu“ sa rozbalí názov, IČO, IČ DPH a adresa firmy a server ich prečíta len vtedy, keď je voľba naozaj zapnutá. Majiteľ dostane adresu v e-maile jedným riadkom a v administrácii ju nájde v bloku „Fakturačné údaje“.
Technológie a implementácia
Serverová validácia po poliach, migrácia schémy Drizzle
Podobné problémy vo vašom biznise? Pomôžeme vám ich vyriešiť moderným tech stackom.
Výsledná štruktúra
Kompletná webová štruktúra navrhnutá pre maximálnu konverziu a user experience. Každá stránka má jasný účel a optimalizovanú navigáciu.
Najdôležitejšie sekcie webu
Každá sekcia riešila konkrétny biznis problém a zvyšovala konverzie
Hero s videom majiteľa
Z pôvodného filmu majiteľa sme zostrihali 12,4-sekundovú slučku zo šiestich záberov: dron, brána s vyrezávanou tabuľou, lampáš s číslami domu, vírivka, hojdačka s altánkom a znova dron. Pod titulkom „Objav miesto, kde splynieš s prírodou.“ stojí pás faktov: 8 osôb, vonkajšia vírivka, fínska sauna, od 110 € za noc.
Rezervácia: kalendár, formulár, platba
Na desktope stojí kalendár vedľa formulára, takže hosť vidí zvolený termín a súčet počas vypĺňania. Formulár rozdeľuje dospelých a deti, pýta si adresu do knihy ubytovaných, ponúka doplnky a pred odoslaním vyžaduje súhlas so všeobecnými podmienkami. Potom nasleduje Stripe Checkout.
Cenník so sezónou
Pracovné dni 110 €, víkendy 130 € a sezónna cena 200 € za noc od 20. decembra do 1. januára a od 13. do 15. februára. Pod cenníkom sú podmienky prenájmu a blok „Dôležité informácie“ o prístupe autom 4x4 a o tom, že na mieste nie je obchod ani reštaurácia.
Fotogaléria v štyroch skupinách
22 fotografií majiteľa v pravidelnej mriežke, rozdelených na Exteriér, Interiér, Wellness a Záhradu, s lightboxom na kliknutie. Kredit „Obrázky poskytol Pexels“, ktorý zostal na pôvodnom webe zo šablóny pri jeho vlastných fotografiách, sme odstránili.
Voucher
Samostatná stránka darčekového poukazu s náhľadom poukazu s logom chaty a objednávkovým formulárom na počet osôb a nocí. Text popisu je doslovne majiteľov.
Kontakt s mapou
Mapa Google na bode, ktorý poslal sám majiteľ, a vedľa nej fotografia brány, aby hosť vedel, ako miesto vyzerá naživo. Tlačidlo „Otvoriť trasu v Google Maps“ na telefóne otvorí navigáciu.
Použitý stack
Frontend a dizajn
App Router, serverové komponenty a dizajn postavený na vizuálnom jazyku pôvodného webu majiteľa: PT Serif, tlmená bridlicová paleta, tlačidlá v tvare piluly a fotografie so zaoblením.
Rezervácie a platby
Rezervácia najprv podrží termín, potom hosťa pošle do Stripe Checkout. Dvojitú rezerváciu fyzicky vylučuje obmedzenie priamo v databáze, nie kontrola v aplikácii. Cenu noci aj doplnkov počíta jedna funkcia pre cenník, kalendár, súčet vo formulári, pokladňu aj e-mail.
Administrácia a e-maily
Heslom chránená administrácia so zoznamom rezervácií, detailom rezervácie, blokáciami termínov a nastaveniami. E-maily idú hosťovi v jeho jazyku a majiteľovi vždy po slovensky, vrátane rozpisu doplnkov a fakturačných údajov.
SEO, AI a súlad
Tri jazyky s prefixom v adrese, hreflang a canonical na každej stránke, BreadcrumbList na podstránkach a llms.txt generovaný z tých istých slovníkov ako samotný web. GA4 a GTM sa zapínajú až po súhlase v cookie lište s dvoma rovnocennými tlačidlami.
Frontend a dizajn
App Router, serverové komponenty a dizajn postavený na vizuálnom jazyku pôvodného webu majiteľa: PT Serif, tlmená bridlicová paleta, tlačidlá v tvare piluly a fotografie so zaoblením.
Rezervácie a platby
Rezervácia najprv podrží termín, potom hosťa pošle do Stripe Checkout. Dvojitú rezerváciu fyzicky vylučuje obmedzenie priamo v databáze, nie kontrola v aplikácii. Cenu noci aj doplnkov počíta jedna funkcia pre cenník, kalendár, súčet vo formulári, pokladňu aj e-mail.
Administrácia a e-maily
Heslom chránená administrácia so zoznamom rezervácií, detailom rezervácie, blokáciami termínov a nastaveniami. E-maily idú hosťovi v jeho jazyku a majiteľovi vždy po slovensky, vrátane rozpisu doplnkov a fakturačných údajov.
SEO, AI a súlad
Tri jazyky s prefixom v adrese, hreflang a canonical na každej stránke, BreadcrumbList na podstránkach a llms.txt generovaný z tých istých slovníkov ako samotný web. GA4 a GTM sa zapínajú až po súhlase v cookie lište s dvoma rovnocennými tlačidlami.
💡 Moderný tech stack = rýchly web + jednoduchá údržba + dlhodobá podpora
Priebeh realizácie
Majiteľ posielal požiadavky cez WhatsApp v krátkych dávkach. Každú sme rozpísali na body s jeho citátmi, zapracovali a vrátili na odsúhlasenie. Poradie práce sme s ním dohodli vopred: dizajn, kalendár, platby.
10.–13. september
Podklady a prvý koncept
2 dniZozbierali sme obsah a 24 fotografií z pôvodného webu, postavili autorský koncept na ôsmich stránkach a nastavili nasadzovanie na Vercel cez GitLab CI.
14.–16. september
Web v štýle majiteľa a video v hero
2 dniNa želanie majiteľa sme web postavili vo vizuálnom jazyku jeho pôvodnej stránky a v druhom prechode vylepšili typografiu a rytmus. Pribudlo video v hero, celé znenie podmienok, stránka Voucher, mapa v kontakte a kalendár dostupnosti.
17.–19. september
Rezervačný systém
3 dniDatabáza s ochranou proti dvojitej rezervácii, platby cez Stripe, administrácia a overenie celého toku na živej databáze. K tomu sezónne ceny, dospelí a deti zvlášť, doplnkové služby a tri jazyky: slovenčina, angličtina a nemčina.
20.–22. september
E-maily, fakturácia a príprava na spustenie
3 dniE-mail hosťovi dva dni pred príchodom, ktorý sa po presune termínu odošle znova podľa nových dátumov. Adresa hosťa a režim nákupu na firmu. llms.txt, cookie lišta, BreadcrumbList a audit Lighthouse: 100 v prístupnosti, best practices a SEO na všetkých stránkach.
23.–24. september
Analytika, poldni a odovzdanie
2 dniGA4 a GTM zapojené až po súhlase návštevníka. Podľa posledných podnetov majiteľa kalendár dostal poldni výmeny a detská postieľka sa stala bezplatnou. Tým bol projekt po 12 dňoch práce odovzdaný.
FAQ k projektu
Prenajímate chatu, chalupu alebo apartmán?
Postavíme web s rezerváciami, ktoré sa dajú rovno zaplatiť, s kalendárom, ktorý rozumie dňu výmeny, a s administráciou, ktorú zvládnete z telefónu. Bez provízie sprostredkovateľovi za každú noc.
Nechajte nám kontakt (stačí e-mail alebo telefón)
✨ Vlastné rezervácie • Online platby • Viac jazykov