Umbrella Slovakia: a presentation website that grew into a booking system
Umbrella Slovakia s.r.o.
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 for €650.
Company website + custom booking system
Project type
Replace a borrowed WordPress theme with an owned site and owned bookings
Main goal
€650
Project price
Selected screens and visuals
Visual project preview shows how the website looks on different devices. Responsive design ensures perfect display on mobiles, tablets and desktops.
The hero “Prémiové autá, cesta bez starostí.” — a golden arc draws itself above the car, with a strip of inclusions below: insurance, motorway vignette, servicing, and delivery anywhere in Slovakia.
The non-trivial parts of the project
The design was not what took the most time — the operating rules were. The client sent over how days and deposits are actually counted, and those rules had to be transcribed exactly into the booking logic; otherwise the site would promise numbers the company does not invoice.
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.
We 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 implementation
Next.js + Drizzle ORM + PostgreSQL
How many rental days is that, exactly?
The client does not bill by calendar dates but by return time. The rule arrived over WhatsApp: a return after 12:00 adds one more billed day.
We 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 implementation
TypeScript module + Vitest
The “no deposit” option applies only to longer rentals
On 22 July the client specified that 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.
We 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 implementation
Pricing logic + server-side validation
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.
Images 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 implementation
Canvas API + attachment size checks
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.
The 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 implementation
Typed TS content + a representative flag
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.
Reservations 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 implementation
Drizzle 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 maximum conversion and user experience. Each page has clear purpose and optimized navigation.
Most important website sections
Each section solved specific business problem and increased conversions
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.
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.
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.
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.
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.
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.
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.
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.
Frontend
A bilingual interface with a [lang] route segment, server rendering, and animations that respect prefers-reduced-motion.
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.
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.
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.
💡 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: on 15 July 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: on 22 July, “no deposit” only above five days, and on 27 July, 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
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