Umbrella Slovakia: prezentačný web, ktorý dorástol na rezervačný systém

1. 1Problém #1

   Web bol cudzia charitatívna šablóna a rezervácie žili inde

   Na doméne bola nedokončená WordPress inštalácia s demo stránkami, rozbitou položkou menu a vymyslenými recenziami; objednávky sa vybavovali cez externý SimplyBook.me.

   Naše riešenie

   Postavili sme web od nuly a rezerváciu presunuli na vlastnú doménu do vlastnej databázy, takže firma vlastní svoje objednávky aj históriu.

   Technológie a implementácia

   Next.js + Drizzle ORM + PostgreSQL

2. 2Problém #2

   Koľko je to vlastne dní prenájmu?

   Klient neúčtuje podľa kalendárnych dátumov, ale podľa času vrátenia: vrátenie po 12:00 znamená ďalší účtovaný deň.

   Naše riešenie

   Prepočet dní sme vytiahli do samostatného modulu, doplnili časovú hranicu 12:00 a pokryli testami; kalkulačka na webe aj server počítajú z rovnakého zdroja.

   Technológie a implementácia

   TypeScript modul + Vitest

3. 3Problém #3

   „Bez depozitu“ platí len pri dlhšom prenájme

   Voľba bez depozitu patrí len k prenájmu nad päť dní. Je to tarifné pravidlo, ktoré priamo mení sumu vo formulári, takže musí platiť rovnako v prehliadači aj na serveri.

   Naše riešenie

   Podmienku sme zapísali do cenovej logiky, takže sa voľba pri kratšom prenájme vôbec neponúkne a suma sa nedá obísť z prehliadača.

   Technológie a implementácia

   Cenová logika + validácia na serveri

4. 4Problém #4

   Rezervácia si vyžiada fotografie dokladov priamo vo formulári

   Zákazník prikladá občiansky aj vodičský preukaz. Snímka z telefónu má bežne niekoľko megabajtov, takže dve prílohy znamenajú niekoľko desiatok megabajtov na jednu požiadavku — a odoslanie z mobilného internetu musí zostať spoľahlivé.

   Naše riešenie

   Obrázky sa zmenšujú priamo v prehliadači ešte pred odoslaním, orientácia z EXIF zostáva zachovaná a pre staršie mobilné prehliadače je pripravená záložná cesta. Firma dostáva čitateľné skeny a zákazník nemusí nič ručne konvertovať.

   Technológie a implementácia

   Canvas API + kontrola veľkosti prílohy

5. 5Problém #5

   Vlastné fotografie vozového parku ešte neboli k dispozícii

   Stránka potrebovala jednotný vizuál áut skôr, než klient stihol nafotiť vlastné vozidlá. Stiahnuté stockové fotky cudzích áut boli vylúčené.

   Naše riešenie

   Vizuál parku sme nasnímali podľa jednotného art-protokolu „NOČNÁ GALÉRIA“ a v dátach je označený ako reprezentatívny; po dodaní reálnych snímok sa vymení bez zásahu do kódu.

   Technológie a implementácia

   Typovaný obsah v TS + príznak representative

6. 6Problém #6

   Rezervácia sa nesmie skončiť e-mailom v schránke

   Personál potrebuje vidieť všetky žiadosti na jednom mieste, žiadna sa nesmie stratiť a obsadenosť vozidiel sa nemá overovať ručne.

   Naše riešenie

   Rezervácie žijú vo vlastnej databáze — v izolovanej schéme v PostgreSQL. Zákazník aj firma dostanú transakčný e-mail, potvrdený termín sa zapíše do Google kalendára a personál má zatvorenú administráciu so zoznamom rezervácií. Vozidlo sa dá predvoliť odkazom v tvare /sk/rezervacia?vozidlo=skoda-kodiaq-rs, takže zo stránky konkrétneho auta prichádza človek do formulára s už vybraným vozidlom.

   Technológie a implementácia

   Drizzle ORM + PostgreSQL + Resend + Google Calendar

Podobné problémy vo vašom biznise? Pomôžeme vám ich vyriešiť moderným tech stackom.

• Domov
• Vozidlá
• Detail vozidla (Tesla Model S, Škoda Kodiaq RS, Toyota Corolla Hybrid a ďalšie)
• Cenník
• Transfery
• Rezervácia (aj s predvoleným vozidlom)
• Kontakt
• Ochrana osobných údajov
• Cookies
• Anglická verzia celého webu
• Zatvorená administrácia pre personál

1. 01

   Hero s oblúkom nad autom

   Titulok „Prémiové autá, cesta bez starostí.“ a pod ním pás: poistenie v cene, diaľničná známka v cene, servis v cene, pristavenie po celej SR. Zlatý oblúk sa dokresľuje nad autom ako navrhnutý prístrešok.

2. 02

   Vozový park a detail vozidla

   Karty áut s filtrom podľa typu pohonu a karosérie; detail obsahuje techniku, ceny svojej triedy a tlačidlo, ktoré otvorí rezerváciu už s predvoleným vozidlom.

3. 03

   Vlajková loď — Škoda Kodiaq RS

   Samostatný blok pre vozidlo vyššej triedy: SUV pre 5 až 7 osôb vo verzii RS, line-art silueta pod zlatým oblúkom a technické parametre v mono písme.

4. 04

   Ako to funguje a transfery

   Tri kroky 01–03 (vyberiete vozidlo a ozveme sa do 30 minút → pristavíme kamkoľvek po Slovensku → sadnete a idete) a samostatná stránka letiskových transferov s vlastným formulárom.

5. 05

   Rezervácia a administrácia

   Rezervačná obrazovka s kalendárom, časom prevzatia a vrátenia, nahratím dokladov a priebežnou sumou; na druhej strane zatvorená administrácia so zoznamom rezervácií, cenami, odstávkami vozidiel a napojením na Google kalendár.

• Frontend

  Dvojjazyčné rozhranie so segmentom [lang], serverovým renderovaním a animáciami, ktoré rešpektujú prefers-reduced-motion.

  • App Router a src/ štruktúra
  • Ručná lokalizácia SK/EN bez next-intl
  • Plynulý scroll a dokreslovanie oblúka
  • TypeScript
  • React 19
  • Next.js 16.2
  • Tailwind CSS v4
  • framer-motion 12
  • Lenis

• Rezervácie a dáta

  Rezervácie, dopyty, odstávky vozidiel a ceny žijú vo vlastnej databáze. Cena sa vždy prepočíta na serveri, suma z requestu sa neberie na vieru.

  • Izolovaná schéma umbrella v Supabase
  • Validácia vstupov cez Zod
  • Testy cenovej a dátovej logiky
  • Drizzle ORM
  • PostgreSQL
  • Supabase
  • Zod
  • Vitest

• E-maily a kalendár

  Klient dostane potvrdenie, personál dostane e-mail s tlačidlami Potvrdiť a Zrušiť. Potvrdená rezervácia sa zapíše do Google kalendára zamestnanca.

  • Lokalizované šablóny e-mailov SK/EN
  • Schvaľovanie rezervácie priamo z e-mailu
  • Zápis do Google kalendára
  • Resend
  • Google Calendar API
  • OAuth 2.0

• Nasadenie a prevádzka

  Každá vetva má preview nasadenie, hlavná vetva ide do produkcie. Obsah je v TypeScripte, takže zmena textu prejde tou istou kontrolou ako zmena kódu.

  • Preview pre každú vetvu
  • Bez CMS — obsah typovaný v TS
  • Zatvorená administrácia mimo indexu
  • Vercel
  • GitLab CI/CD
  • ESLint

Moderný tech stack = rýchly web + jednoduchá údržba + dlhodobá podpora

1. Fáza 1

   Audit starého webu a reálne fakty

   7. – 8. júla

   Prešli sme nedokončenú WordPress inštaláciu, spísali, čo je demo obsah cudzej šablóny a čo sa dá zachrániť, a vyzbierali overiteľné údaje firmy: IČO 53 949 871, DIČ, adresu Trnovec 101, telefón +421 911 44 22 99 a e-mail info@umbrellaslovakia.sk. Vymyslené recenzie sme na nový web neprevzali.

2. Fáza 2

   Dizajnový systém a motív „OBLÚK“

   8. – 10. júla

   Skôr než sa písal kód, vznikla paleta uhľa a zlata, typografická škála a jeden pomenovaný motív: zlatý vlasový oblúk odvodený z kupoly dáždnika v logu. Zároveň sme určili päť miest, kde sa motív objaví, a art-protokol pre fotografie áut.

3. Fáza 3

   Prezentačný web a stránky vozidiel

   10. – 16. júla

   Postavili sme domovskú stránku, vozový park s filtrami, detail každého vozidla, cenník, transfery a kontakt. V tejto fáze prišli prvé želania klienta: do parku sme doplnili Teslu Model X a použili logo klienta pre OG obrázky, sociálne siete a JSON-LD.

4. Fáza 4

   Rezervačný systém, e-maily, kalendár a administrácia

   13. – 27. júla

   Tu sa projekt zmenil z webu na aplikáciu: vlastná databáza rezervácií a dopytov, kalendár s obsadenosťou, nahrávanie dokladov, transakčné e-maily so schvaľovacími tlačidlami, zápis do Google kalendára a zatvorená administrácia pre personál s cenami a odstávkami vozidiel. Sem patria aj dve pravidlá klienta: „bez depozitu“ len nad päť dní a účtovanie ďalšieho dňa pri vrátení po 12:00.

5. Fáza 5

   Želania klienta, GDPR a spustenie

   28. júla – 5. augusta

   Cenníkové zobrazenie sme zosúladili s kalkulačkou, takže web ukazuje presne tú sumu, s ktorou zákazník vstupuje do rezervácie. 3. 8. pribudlo zmenšovanie dokladov priamo v prehliadači a 5. 8. sme na želanie klienta zvýraznili logo a telefónne číslo v hlavičke. Doplnili sme cookie lištu, cookie politiku a GDPR stránku a web nasadili do produkcie.