Umbrella Slovakia: prezentační web, který dorostl na rezervační systém

1. 1Problém #1

   Web byl cizí charitativní šablona a rezervace žily jinde

   Na doméně byla nedokončená WordPress instalace s demo stránkami, rozbitou položkou menu a vymyšlenými recenzemi; objednávky se vyřizovaly přes externí SimplyBook.me.

   Naše řešení

   Postavili jsme web od nuly a rezervaci přesunuli na vlastní doménu do vlastní databáze, takže firma vlastní své objednávky i historii.

   Technologie a implementace

   Next.js + Drizzle ORM + PostgreSQL

2. 2Problém #2

   Kolik je to vlastně dní pronájmu?

   Klient neúčtuje podle kalendářních dat, ale podle času vrácení: vrácení po 12:00 znamená další účtovaný den.

   Naše řešení

   Přepočet dní jsme vytáhli do samostatného modulu, doplnili časovou hranici 12:00 a pokryli testy; kalkulačka na webu i server počítají ze stejného zdroje.

   Technologie a implementace

   TypeScript modul + Vitest

3. 3Problém #3

   „Bez depozitu“ platí jen při delším pronájmu

   Volba bez depozitu patří jen k pronájmu nad pět dní. Je to tarifní pravidlo, které přímo mění částku ve formuláři, takže musí platit stejně v prohlížeči i na serveru.

   Naše řešení

   Podmínku jsme zapsali do cenové logiky, takže se volba u kratšího pronájmu vůbec nenabídne a částku nelze obejít z prohlížeče.

   Technologie a implementace

   Cenová logika + validace na serveru

4. 4Problém #4

   Rezervace si vyžádá fotografie dokladů přímo ve formuláři

   Zákazník přikládá občanský i řidičský průkaz. Snímek z telefonu má běžně několik megabajtů, takže dvě přílohy znamenají několik desítek megabajtů na jeden požadavek — a odeslání z mobilního internetu musí zůstat spolehlivé.

   Naše řešení

   Obrázky se zmenšují přímo v prohlížeči ještě před odesláním, orientace z EXIF zůstává zachovaná a pro starší mobilní prohlížeče je připravená záložní cesta. Firma dostává čitelné skeny a zákazník nemusí nic ručně konvertovat.

   Technologie a implementace

   Canvas API + kontrola velikosti přílohy

5. 5Problém #5

   Vlastní fotografie vozového parku ještě nebyly k dispozici

   Stránka potřebovala jednotný vizuál aut dříve, než klient stihl nafotit vlastní vozidla. Stažené fotky cizích aut z fotobank byly vyloučené.

   Naše řešení

   Vizuál parku jsme nasnímali podle jednotného fotoprotokolu „NOČNÁ GALÉRIA“ a v datech je označený jako reprezentativní; po dodání reálných snímků se vymění bez zásahu do kódu.

   Technologie a implementace

   Typovaný obsah v TS + příznak representative

6. 6Problém #6

   Rezervace nesmí skončit e-mailem ve schránce

   Personál potřebuje vidět všechny žádosti na jednom místě, žádná se nesmí ztratit a obsazenost vozidel se nemá ověřovat ručně.

   Naše řešení

   Rezervace žijí ve vlastní databázi — v izolovaném schématu v PostgreSQL. Zákazník i firma dostanou transakční e-mail, potvrzený termín se zapíše do Google kalendáře a personál má uzavřenou administraci se seznamem rezervací. Vozidlo lze předvolit odkazem ve tvaru /sk/rezervacia?vozidlo=skoda-kodiaq-rs, takže ze stránky konkrétního auta přichází člověk do formuláře s už vybraným vozidlem.

   Technologie a implementace

   Drizzle ORM + PostgreSQL + Resend + Google Calendar

Podobné problémy ve vašem byznysu? Pomůžeme vám je vyřešit moderními technologiemi.

• Domů
• Vozidla
• Detail vozidla (Tesla Model S, Škoda Kodiaq RS, Toyota Corolla Hybrid a další)
• Ceník
• Transfery
• Rezervace (i s předvoleným vozidlem)
• Kontakt
• Ochrana osobních údajů
• Cookies
• Anglická verze celého webu
• Uzavřená administrace pro personál

1. 01

   Úvodní blok s obloukem nad autem

   Titulek „Prémiové autá, cesta bez starostí.“ a pod ním pás: pojištění v ceně, dálniční známka v ceně, servis v ceně, přistavení po celé SR. Zlatý oblouk se dokresluje nad autem jako přístřešek.

2. 02

   Vozový park a detail vozidla

   Karty aut s filtrem podle typu pohonu a karoserie; detail obsahuje techniku, ceny své třídy a tlačítko, které otevře rezervaci už s předvoleným vozidlem.

3. 03

   Vlajková loď — Škoda Kodiaq RS

   Samostatný blok pro vozidlo vyšší třídy: SUV pro 5 až 7 osob ve verzi RS, obrysová silueta pod zlatým obloukem a technické parametry v mono písmu.

4. 04

   Jak to funguje a transfery

   Tři kroky 01–03 (vyberete vozidlo a ozveme se do 30 minut → přistavíme kamkoli po Slovensku → sednete a jedete) a samostatná stránka letištních transferů s vlastním formulářem.

5. 05

   Rezervace a administrace

   Rezervační obrazovka s kalendářem, časem převzetí a vrácení, nahráním dokladů a průběžnou částkou; na druhé straně uzavřená administrace se seznamem rezervací, cenami, odstávkami vozidel a napojením na Google kalendář.

• Frontend

  Dvojjazyčné rozhraní se segmentem [lang], serverovým renderováním a animacemi, které respektují prefers-reduced-motion.

  • App Router a struktura src/
  • Ruční lokalizace SK/EN bez next-intl
  • Plynulé posouvání a dokreslování oblouku
  • TypeScript
  • React 19
  • Next.js 16.2
  • Tailwind CSS v4
  • framer-motion 12
  • Lenis

• Rezervace a data

  Rezervace, poptávky, odstávky vozidel a ceny žijí ve vlastní databázi. Cena se vždy přepočítá na serveru, částka z požadavku se nebere na víru.

  • Izolované schéma umbrella v Supabase
  • Validace vstupů přes Zod
  • Testy cenové a datové logiky
  • Drizzle ORM
  • PostgreSQL
  • Supabase
  • Zod
  • Vitest

• E-maily a kalendář

  Klient dostane potvrzení, personál dostane e-mail s tlačítky Potvrdit a Zrušit. Potvrzená rezervace se zapíše do Google kalendáře zaměstnance.

  • Lokalizované šablony e-mailů SK/EN
  • Schvalování rezervace přímo z e-mailu
  • Zápis do Google kalendáře
  • Resend
  • Google Calendar API
  • OAuth 2.0

• Nasazení a provoz

  Každá větev má náhledové nasazení, hlavní větev jde do produkce. Obsah je v TypeScriptu, takže změna textu projde stejnou kontrolou jako změna kódu.

  • Náhled pro každou větev
  • Bez CMS — obsah typovaný v TS
  • Uzavřená administrace mimo index
  • Vercel
  • GitLab CI/CD
  • ESLint

Moderní technologie = rychlý web + jednoduchá údržba + dlouhodobá podpora

1. Fáze 1

   Audit starého webu a reálná fakta

   7.–8. července

   Prošli jsme nedokončenou WordPress instalaci, sepsali, co je demo obsah cizí šablony a co lze zachránit, a sesbírali ověřitelné údaje firmy: IČO 53 949 871, DIČ, adresu Trnovec 101, telefon +421 911 44 22 99 a e-mail info@umbrellaslovakia.sk. Vymyšlené recenze jsme na nový web nepřevzali.

2. Fáze 2

   Designový systém a motiv „OBLÚK“

   8.–10. července

   Dříve než se psal kód, vznikla paleta uhlu a zlata, typografická škála a jeden pojmenovaný motiv: zlatý vlasový oblouk odvozený z kupole deštníku v logu. Zároveň jsme určili pět míst, kde se motiv objeví, a fotoprotokol pro snímky aut.

3. Fáze 3

   Prezentační web a stránky vozidel

   10.–16. července

   Postavili jsme domovskou stránku, vozový park s filtry, detail každého vozidla, ceník, transfery a kontakt. V této fázi přišla první přání klienta: do parku jsme doplnili Teslu Model X a použili logo klienta pro OG obrázky, sociální sítě a JSON-LD.

4. Fáze 4

   Rezervační systém, e-maily, kalendář a administrace

   13.–27. července

   Tady se projekt změnil z webu na aplikaci: vlastní databáze rezervací a poptávek, kalendář s obsazeností, nahrávání dokladů, transakční e-maily se schvalovacími tlačítky, zápis do Google kalendáře a uzavřená administrace pro personál s cenami a odstávkami vozidel. Sem patří i dvě pravidla klienta: „bez depozitu“ jen nad pět dní a účtování dalšího dne při vrácení po 12:00.

5. Fáze 5

   Přání klienta, GDPR a spuštění

   28. července – 5. srpna

   Zobrazení ceníku jsme sjednotili s kalkulačkou, takže web ukazuje přesně tu částku, se kterou zákazník vstupuje do rezervace. 3. 8. přibylo zmenšování dokladů přímo v prohlížeči a 5. 8. jsme na přání klienta zvýraznili logo a telefonní číslo v hlavičce. Doplnili jsme cookie lištu, zásady cookies a GDPR stránku a web nasadili do produkce.