Umbrella Slovakia: a presentation website that grew into a booking system
Umbrella Slovakia s.r.o.
2026-08-05
Umbrella Slovakia rents cars across Slovakia — from a Toyota Corolla Hybrid through a Škoda Kodiaq RS to a Tesla — and also runs airport transfers. The brief started as a premium presentation website to replace an unfinished WordPress install whose menu still showed demo pages from an unrelated charity theme. Over a month of work, the presentation grew into a full system: its own reservation database, transactional emails, Google Calendar sync, and a closed admin area for staff. Booking moved off the external SimplyBook.me widget and onto the company’s own domain. The site runs at umbrellaslovakia.sk in Slovak and English. The project was delivered in 30 days.
Company website + custom booking system
Project type
Replace a borrowed WordPress theme with an owned site and owned bookings
Main goal
What we delivered:
- A booking system on the company’s own domain instead of an external SimplyBook.me widget
- A custom range calendar that marks dates already taken
- Server-side price recalculation — the amount from the browser is never trusted
- Day counting by time of day: a return after 12:00 bills as one extra day
- The “bez depozitu” option available only for rentals longer than five days
- Document upload with automatic in-browser image downscaling (3 Aug)
- A staff email with Confirm and Cancel buttons; the customer is notified automatically
- Confirmed reservations written into the staff member’s Google Calendar
- An admin area with email-link sign-in and staff access management
- A Tesla Model X added to the fleet at the client’s request
- The client logo used for OG images, social previews, and JSON-LD structured data
- A more prominent logo and phone number in the header at the client’s request (5 Aug)
- SK/EN bilingual content, including the email templates
- A cookie banner, cookie policy, and GDPR page with the company’s real details
Selected screens and visuals
Visual project preview shows how the website looks on different devices. Responsive design ensures clear display on mobiles, tablets and desktops.
Screenshot 1 of 5
The non-trivial parts of the project
The design was not what took the most time — the operating rules were. The company counts days and deposits its own way, and those rules had to be transcribed exactly into the booking logic; otherwise the site would promise numbers the company does not invoice.
- Problem #1
The website was someone else’s charity theme and bookings lived elsewhere
The domain hosted an unfinished WordPress install with demo pages, a broken menu item, and invented reviews; orders went through an external SimplyBook.me.
Our solutionWe rebuilt the site from scratch and moved booking onto the company’s own domain and database, so it owns its orders and their history.
Technologies and implementationNext.js + Drizzle ORM + PostgreSQL
- Problem #2
How many rental days is that, exactly?
The client does not bill by calendar dates but by return time: a return after 12:00 adds one more billed day.
Our solutionWe extracted the day calculation into a standalone module, added the 12:00 threshold, and covered it with tests; the on-site calculator and the server compute from the same source.
Technologies and implementationTypeScript module + Vitest
- Problem #3
The “no deposit” option applies only to longer rentals
The no-deposit option belongs only to rentals longer than five days. It is a tariff rule that directly changes the amount in the form, so it has to hold identically in the browser and on the server.
Our solutionWe wrote the condition into the pricing logic, so the option is not offered for shorter rentals and the total cannot be bypassed from the browser.
Technologies and implementationPricing logic + server-side validation
- Problem #4
The booking asks for photos of the documents inside the form
The customer attaches both an ID card and a driving licence. A phone shot usually weighs several megabytes, so two attachments add up to tens of megabytes in a single request — and the upload has to stay reliable over mobile data.
Our solutionImages are downscaled right in the browser before they are sent, EXIF orientation is preserved, and older mobile browsers get a fallback path. The company receives readable scans and the customer never has to convert anything by hand.
Technologies and implementationCanvas API + attachment size checks
- Problem #5
The client’s own fleet photos were not available yet
The site needed a consistent visual language for the cars before the client could photograph the actual vehicles. Stock photos of other people’s cars were ruled out.
Our solutionThe fleet visuals were produced under a single “NOČNÁ GALÉRIA” art protocol and are flagged in the data as representative; once the client supplies real shots, they can be swapped without touching the code.
Technologies and implementationTyped TS content + a representative flag
- Problem #6
A booking must not end its life as an email in an inbox
Staff need every request in one place, none of them may go missing, and vehicle availability should not be cross-checked by hand.
Our solutionReservations live in a database of their own — an isolated schema in PostgreSQL. Both the customer and the company get a transactional email, a confirmed date is written into Google Calendar, and staff have a closed admin area listing every reservation. A car can be preselected through a link such as /sk/rezervacia?vozidlo=skoda-kodiaq-rs, so a visitor moves from a specific vehicle page into the form with that car already chosen.
Technologies and implementationDrizzle ORM + PostgreSQL + Resend + Google Calendar
Similar problems in your business? We will help you solve them with modern tech stack.
Final structure
Complete web structure designed for clear navigation and a simple path to contact or order. Each page has clear purpose and optimized navigation.
- Home
- Vehicles
- Vehicle detail (Tesla Model S, Škoda Kodiaq RS, Toyota Corolla Hybrid and others)
- Pricing
- Transfers
- Booking (with an optional preselected car)
- Contact
- Privacy policy
- Cookies
- Full English version of the site
- Closed admin area for staff
Most important website sections
Each section solved specific business problem and increased conversions
- 01
Hero with an arc above the car
The headline “Prémiové autá, cesta bez starostí.” sits above a strip of inclusions: insurance, motorway vignette, servicing, and delivery anywhere in Slovakia. A golden arc draws itself above the car like a canopy.
- 02
Fleet and vehicle detail
Vehicle cards with filters by drivetrain and body type; each detail page carries the specs, the pricing for its class, and a button that opens the booking form with the car already selected.
- 03
Flagship — Škoda Kodiaq RS
A dedicated block for the upper-class car: a five- to seven-seat SUV in the RS version, a line-art silhouette under the golden arc, and specs set in a mono typeface.
- 04
How it works, and transfers
Three steps, 01 to 03 (choose a car and we reply within 30 minutes → we deliver it anywhere in Slovakia → get in and drive), plus a separate airport-transfer page with its own form.
- 05
Booking and admin
A booking screen with a calendar, pickup and return times, document upload, and a running total; on the other side, a closed admin area listing reservations, prices, vehicle downtime, and the Google Calendar connection.
Project stack
Frontend
A bilingual interface with a [lang] route segment, server rendering, and animations that respect prefers-reduced-motion.
- App Router and src/ structure
- Hand-written SK/EN localization, no next-intl
- Smooth scroll and the self-drawing arc
- TypeScript
- React 19
- Next.js 16.2
- Tailwind CSS v4
- framer-motion 12
- Lenis
Bookings and data
Reservations, inquiries, vehicle downtime, and pricing live in a dedicated database. The price is always recalculated on the server; the amount sent by the browser is never trusted.
- Isolated umbrella schema on Supabase
- Input validation with Zod
- Tests for the pricing and date logic
- Drizzle ORM
- PostgreSQL
- Supabase
- Zod
- Vitest
Email and calendar
The customer gets a confirmation, staff get an email with Confirm and Cancel buttons, and a confirmed reservation is written into the staff member’s Google Calendar.
- Localized SK/EN email templates
- Approve a booking straight from the email
- Writes events into Google Calendar
- Resend
- Google Calendar API
- OAuth 2.0
Deployment and operations
Every branch gets a preview deployment and the main branch goes to production. Content lives in TypeScript, so a copy change passes the same checks as a code change.
- Preview for every branch
- No CMS — content typed in TS
- Admin area kept out of the index
- Vercel
- GitLab CI/CD
- ESLint
Modern tech stack = fast website + easy maintenance + long-term support
Delivery process
The work ran in four waves across 30 days and 63 commits. The first half was about presenting the company; the second was about making the site actually take and process bookings.
- Phase 1
Audit of the old site and the real facts
7–8 JulyWe went through the unfinished WordPress install, recorded what was demo content from the borrowed theme and what could be saved, and collected the verifiable company data: company number 53 949 871, VAT details, the Trnovec 101 address, the phone number +421 911 44 22 99, and info@umbrellaslovakia.sk. The fabricated reviews were not carried over.
- Phase 2
Design system and the “OBLÚK” motif
8–10 JulyBefore any code, we set the charcoal-and-gold palette, the type scale, and one named motif: a golden hairline arc derived from the umbrella dome in the logo. We also fixed the five places where the motif appears and the art protocol for the car photography.
- Phase 3
Presentation site and vehicle pages
10–16 JulyWe built the home page, the filterable fleet, each vehicle detail page, the price list, transfers, and contact. The first client wishes arrived here: we added a Tesla Model X to the fleet and used the client logo for OG images, social previews, and JSON-LD.
- Phase 4
Booking system, emails, calendar, and admin
13–27 JulyThis is where the project turned from a website into an application: a dedicated reservations and inquiries database, an availability calendar, document upload, transactional emails with approval buttons, Google Calendar writes, and a closed staff admin covering prices and vehicle downtime. Two client rules landed here too: “no deposit” only above five days, and one extra billed day for returns after 12:00.
- Phase 5
Client wishes, GDPR, and launch
28 July – 5 AugustWe aligned the price list with the calculator, so the site shows exactly the amount the customer carries into the booking. On 3 August in-browser document downscaling was added, and on 5 August the header logo and phone number were made more prominent at the client’s wish. We added the cookie banner, cookie policy, and GDPR page, and deployed to production.
Project FAQ
How does the booking work and what is included in the price?
The customer picks a car and dates on the site, sees the running total, uploads documents, and submits the booking. Staff receive an email with Confirm and Cancel buttons, and the customer gets a confirmation. According to the site, insurance, the motorway vignette, and servicing are included in the rental price, and the car is delivered anywhere in Slovakia.
Where is the car delivered?
The site covers the whole of Slovakia — step two of “Ako to funguje” states that the car is delivered anywhere in the country. The registered address is Trnovec 101, 908 51 Trnovec, but handover is not tied to a single location. Airport transfers are a separate track with their own page and form.
How are rental days counted?
Per the client’s rule, billing follows the return time rather than calendar dates: if the car comes back after 12:00, one more day is added. The rule sits directly in the booking logic and is covered by tests, so the on-site calculator and the server total cannot drift apart.
When does the “no deposit” option apply?
Only for rentals longer than five days — a tariff rule of the client. For shorter bookings the option is not offered at all, and the server-side recalculation rejects it even if someone tries to send it from the browser.
Why is the site built without a CMS?
Content is typed directly in TypeScript, so the page structure cannot be broken by accident and every copy change passes the same checks as a code change. What changes often in daily operations — vehicle prices, promotions, and downtime — is managed in the admin area without a deployment. A CMS remains open as a next step if the client wants one.
Need a website that also takes bookings?
For service businesses we build both the presentation site and a custom inquiry or booking system — running on the rules you actually invoice by, with staff notifications and an admin area where you change prices and availability yourself.
Leave your contact (email or phone is enough)
Owned bookings • Rules that match your practice • SK/EN