Case study · Hospitality · Sarajevo
HedonaWine Club.
From a WordPress site to its own platform for reservations, card payments and content management.
- Client
- Hedona Wine Club, a winery, fine dining and apartments in a vineyard above Sarajevo.
- Role
- Web design
- UI/UX
- Frontend
- Backend
- Admin panel & CMS
- Monri integration
- Migration from WordPress
- Team
- Two people: Ruba Velagić, SEO and copy. Via Creativa (Armin Zimić), design, UI/UX, development and everything else.
- Stack
- React 19 · TypeScript · Tailwind 4 · Firebase · Monri · Google Calendar API · Gemini
- Live
- hedona.ba
(01) · Starting point
Why notWordPress.
Hedona doesn’t sell a product. It sells an evening for 15 guests. The site had to work as a reservation system, not a brochure.
The old site ran on WordPress. For a winery that welcomes guests by reservation only, that meant arranging dates by hand, depending on a theme and plugins, and content that knew nothing about capacity, deposits or cancellation rules. Instead of patching business rules with plugins, the site was rebuilt from scratch as its own application on Firebase.
Before
WordPress
- Theme and plugins decide what’s possible
- Reservations by email and phone, tracked by hand
- No online deposit and no automatic confirmation
- Constant maintenance and security updates
After
Its own platform
- React SPA on Firebase Hosting
- Reservations with daily capacity and a 21-day rule
- Card deposit through Monri, confirmed without a human hand
- Custom admin panel and CMS, the client edits it
(02) · Web design
Quietluxury.
The visual language comes from the place itself: stone, vine, cellar and the view of the city. A warm paper background, dark text and two accents: gold for details, wine for key actions. A serif display face carries the elegance, a geometric sans keeps forms and the admin readable. Animations (Framer Motion) are slow and restrained: preloader, section entrances, galleries.
Hedona palette
- Paper#F9F8F6
- Stone#F0EFEA
- Cellar#2C2A29
- Gold#A48650
- Wine#722F37
Display
Come as a stranger
Cormorant Garamond · headings, quotes, numbers
Text
LEAVE AS A FRIEND
Montserrat · text, navigation, forms, admin
- Site sections
- Hero slideshow
- Our Story
- Experiences
- Vineyard Stay
- Hedona Journeys (B2B tours)
- Blog
- Reviews and TripAdvisor
- FAQ in six categories
- Booking
- Contact
- Plus
- Cookie consent, a security and privacy page, international phone input with country codes.
(03) · UI/UX
Bookingin five steps.
The most important screen on the site. The guest always sees where they are, can go back to a previous step by clicking the progress bar, and the system won’t let them continue until the details are valid (email validation, required phone).
Experience
Wine Tasting, 5-course or Signature 8-course, with price per person and duration.
Schematic of the booking flow · values left blank on purpose
Behind the simple flow sit real business rules, translated into logic:
15guests
Shared daily capacity for all experiences, adjustable per date.
21days
Online booking up to 21 days ahead; for later dates the guest sends an inquiry.
30 €/ person
A deposit (60 KM) paid upfront that confirms the slot.
3hours
An unpaid reservation is released automatically and doesn’t block a place.
(04) · Monri
Payment withoutmanual confirmation.
The Monri WebPay integration is built so the secret key is never sent to the browser. The order signature (SHA-512 digest) is computed by a Cloud Function, and payment confirmation arrives through a webhook directly on the server: the reservation becomes confirmed even if the guest closes the tab right after paying.
(05) · Automation
A system thatruns itself.
Five Cloud Functions cover everything a person used to do: from the guest’s confirmation to the entry in the staff calendar.
generateMonriDigestTrigger: Call from the formSigns the order on the server; the key stays hidden.monriWebhookTrigger: Monri callbackConfirms the payment and changes the reservation status.sendReservationEmailTrigger: Change in the databaseSends the right email for each situation (confirmation, inquiry, payment link), notifies staff and adds the slot to Google Calendar.cancelAbandonedBookingsTrigger: Every 30 minCancels unpaid reservations older than 3 hours, groups attempts by the same guest and tells staff whom to call.sendContactEmailTrigger: Contact formForwards the inquiry with the guest’s reply-to address.
(06) · Automation
The journey ofone reservation.
This is a reservation from the click to the guest’s arrival. Every step below happens on its own: staff only look at the calendar.
- Payment and confirmation
- Every other step
Guest clicks “Book”
The reservation is created
- Checks free capacity for that day
- Statuspending_deposit
- Monri signature on the server
Date more than 21 days away
An inquiry instead of payment
- Email to guest:Inquiry Received
- Email to staff:NEW INQUIRY
- Calendar: inquiry event
Payment goes through (payment step)
Monri tells the server
- Webhook finds the reservation by attempt number
- Statusconfirmed
- Monri response stored with the reservation
Right after confirmation (payment step)
Confirmation everywhere
- Email to guest:Your Hedona Wine Experience Is Confirmed
- Email to staff:BOOKING CONFIRMED
- Calendar: confirmed event with details
A day and an hour before
Reminders for staff
- Email reminder 24 h before
- Phone notification 1 h before
If the guest doesn’t pay
The slot goes back on offer
- Check every 30 min
- Cancellation after 3 h
- Email to staff:UNPAID BOOKING+ number of attempts
- Silent if the guest paid in another attempt
Booking by phone, Instagram or through an agency
Manual entry in the admin
- Email to guest with a payment link
- Email to staff:MANUAL LINK SENT
- Excluded from automatic cancellation
(07) · Google Calendar API
A calendar thatfills itself.
Reservations are written to the “Hedona Reservation” calendar through the Google Calendar API and a service account: no manual copying and no shared passwords. Every event carries the guest’s name, number of people, experience, phone, email, allergies and notes, location and the Europe/Sarajevo time zone. Staff see the schedule on their phones, in an app they already use.
Event details
Guest B (6 pax)
- Status
- Paid and confirmed
- Experience
- Dinner 8 course
- When
- Fri 18:00 · Europe/Sarajevo
- Phone
- Allergies and notes
- Location
- Gornji Kromolj 9, Sarajevo
- Reminders
- Email 24 h before · phone 1 h before
Tap an event in the week to see what staff see.
Illustration, guest names invented
(08) · Email system
The right emailfor every situation.
Emails go out from reservation@hedona.ba in a branded HTML template. The system tracks what has already been sent (flags on the reservation), so a guest never gets the same email twice.
To the guest
Your Hedona Wine Experience Is Confirmed
After a successful deposit payment
Inquiry Received: [date] · Hedona Sarajevo
An inquiry for a date more than 21 days away
Your Hedona Reservation · Payment Required
A manual reservation with a payment link
To staff
BOOKING CONFIRMED
A paid reservation
NEW INQUIRY
A new inquiry or a payment pending
MANUAL LINK SENT
A payment link was sent
UNPAID BOOKING
The guest didn’t finish paying, worth calling
New Inquiry from …
Contact form; the reply goes straight to the guest
(09) · Admin panel & CMS
Control inthe client’s hands.
Instead of a WordPress admin with dozens of options they don’t need, Hedona got a panel with six modules: exactly as much as the business needs.
Reservations
- Search by name, phone, email
- Filter by country, sortable columns
- Manual entry with source: phone, Instagram, agency, walk-in
- Sending a payment link to the guest
Capacity
- Special capacity for a given date (events, weddings)
- Blocking a date range with one click
- Overview of active blocks
Analytics
- Revenue by experience type
- Overview of confirmed and open reservations
Media
- Upload images to Firebase Storage
- Hero slideshow, Our Story, apartments, galleries per experience
- Changes without a developer and without a new deploy
Blog
- Publishing and deleting posts
- Title, summary, image, date
Settings
- Export reservations to CSV
- Protected system reset
(10) · AI assistant
Concierge24/7.
A chatbot on the Gemini 2.5 Flash model answers questions about experiences, prices, apartments and B2B tours, in the language the guest writes in.
- Knows the 21-day rule and the deposit policy
- Doesn’t invent prices
- When it doesn’t know the answer, it points the guest to contact or WhatsApp
Koliko košta degustacija za 4 osobe?
Hedona Wine Tasting Experience je 125 KM po osobi, za četiri osobe 500 KM. Uključuje pet vina iz našeg podruma, šetnju vinogradom i posjetu podrumu (60-90 min). Termin možete rezervisati direktno na stranici.
Example conversation, in Bosnian
(11) · Latest upgrades
What wasimproved.
The latest cycle of work after launch focused on payment reliability, automation and tools for staff.
95
Files
+2,696
Lines added
−1,457
Lines removed
- 01AutomationGoogle Calendar syncEvery inquiry and every paid reservation is written automatically to the staff calendar, marked by status, with all guest details and reminders.
- 02AutomationStaff notificationsBesides the guest, the system now also emails reservation@hedona.ba for every new reservation, inquiry, confirmation and manual link.
- 03PaymentsAutomatic release of unpaid slotsReservations without a deposit are cancelled after 3 hours; several attempts by the same guest are merged into one notification, and if the guest paid in another attempt, the cancellation goes through silently.
- 04PaymentsRetrying payment without duplicatesA guest who gives up and tries again uses the same reservation; each attempt has its own Monri order number.
- 05PaymentsA more robust Monri webhookDifferent response and status formats are supported, so no successful payment stays unconfirmed.
- 06AdminAdmin panel redesignNew layout, manual reservations with source and payment link, filters, sorting, date-range blocking, CSV export.
- 07CMSMedia manager and Firebase StoragePhotos moved out of the code into Storage: the client changes them, and the app is lighter by more than fifty images.
- 08UXClearer rules in the booking flowA message about the 21 days, the non-refundable deposit and paying the rest on site; an inquiry for later dates with its own email.
- 09UXAI assistant on GeminiKeyword rules replaced with a real language model with the context of the whole offer.
- 10UXRefreshed site sectionsHero, Our Story, Experiences, Vineyard Stay, navigation, contact modal and footer.
- 11HandoverDocumentation for the clientA user guide (what may be changed and what may not) and an agreement on technical support and responsibility.
(12) · Technology
The stack,front to back.
Frontend
- 01React 19
- 02TypeScript
- 03Vite
- 04Tailwind CSS 4
- 05Framer Motion
- 06React Router
- 07React Calendar
Backend
- 01Firebase Firestore
- 02Cloud Functions (Node 22)
- 03Firebase Storage
- 04Firebase Hosting
Integrations
- 01Monri WebPay
- 02Google Calendar API
- 03Gmail (Nodemailer)
- 04Gemini API
- 05TripAdvisor
(13) · Result
What Hedonagot.
Reservations without the phone
The guest picks a slot, pays the deposit and gets a confirmation, without a single call or email with staff.
No empty seats
Daily capacity is respected automatically, and unpaid slots go back on offer.
Independence
Photos, blog, capacity and manual reservations are edited by the Hedona team, no developer needed.
A brand at the level of the experience
The site looks and behaves like an evening at Hedona: calm, precise, nothing extra.
Hedona Wine Club · Gornji Kromolj 9, SarajevoDesign, UI/UX and development: Via Creativa · SEO and copy: Ruba Velagić
Via Creativa
Your guests book.The system does the rest.
Booking, payments, automation and a site that feels like the place itself. Let’s talk about yours.