Santa-Cruz Travel Agency
Natalia Trusova
Santa-Cruz Travel Agency
A bilingual travel site and admin panel for a family-run agency in Odesa, Ukraine. Designed and built from scratch.
Role: Design Engineer (design, front-end, back-end, deployment)
Client: Santa-Cruz Travel Agency, Odesa, in business since 1999
Year: 2026
Live: santacruz.od.ua
At a glance
26+ pages, including 8 destination guides and 5 SEO articles
2 languages (Ukrainian / English)
13 admin sections so non-technical staff can run the site
5 serverless functions (AI chat, transactional email, newsletter, price alerts)
21 routes prerendered for search engines and link previews
5.0 ★ Google rating, shown live from 24 real reviews
The brief
Santa-Cruz sells package holidays to Turkey, Egypt, Spain, the UAE, Greece, Cyprus, the Maldives and Tunisia. They don't sell online. A manager calls every lead back within two hours and closes the sale by phone.
So the site isn't a booking engine. It's the top of a human-led funnel. Every conversion point (tour request, price alert, booking card, chat) ends in a conversation with a real person, never a checkout. New leads flow straight into the team's existing Telegram and WhatsApp channels, and the owner is notified the moment one arrives.
"Since before Google Maps" — established and personal, never corporate and self-service. Every visual decision should read as a person you call, not a booking platform. — Design north star
From prototype to an owned stack
The project started as a Base44 prototype. It made visitors create an account before they could send an inquiry, which doesn't fit an agency that calls every lead back within two hours. Once the site also needed real integrations and full control over its infrastructure, I migrated it to Cloudflare Pages and Supabase. Now every form works for anonymous visitors in a single submission.
I ported the server logic (newsletter sending, price-alert matching) into Supabase Edge Functions. Data is protected by row-level security, so customer leads can only be read by a signed-in admin, even through the public API.
A designed identity, not a template
I built and documented a full design system: a warm navy and sunshine-yellow palette with amber accents, a Lora + Montserrat type pairing chosen for full Ukrainian Cyrillic coverage, pill-shaped controls and 24px cards. A woolly mammoth mascot plays on the agency's 25+ years with a bit of self-aware warmth.
Integrations that do real work
AI travel assistant. The chat widget runs on the Anthropic Claude API through a serverless function. It answers questions about destinations, prices and visas in the visitor's language and hands off to a manager when it isn't sure.
Transactional email (Resend). Tour requests, price-drop alerts and newsletter confirmations send real email, and the agency's team gets notified about every new lead.
Price alerts. Visitors set a destination and budget. An admin-triggered function matches them against current hot deals and emails the matches.
Live weather (OpenWeatherMap). Current conditions for each destination.
Memory Gallery: clients become the brochure
A feature most agency sites don't have: travellers share their own trip photos, and nothing goes live without the owner's approval.
memory gallery
Travel agency websites tend to look alike: stock beaches, the same hotel renders, a "reviews" block nobody believes. Santa-Cruz has something stock photos can't fake: 25+ years of real families coming back from real trips. The Memory Gallery turns that into content. Any client can send a photo from their holiday straight from the site, and the agency's own travellers become its most convincing advertising.
How it works
The client submits. On the Memory Gallery page they upload a photo and pick the destination. A name, email and caption are optional. Consent to data processing is required and links to the privacy policy.
It waits in a private queue. The submission is saved as pending in a separate table. Database rules let anyone add a photo, but only the admin can see the queue. An unreviewed photo never reaches the public site.
The owner moderates. In the admin panel, Photo Submissions shows each photo with its caption, sender, destination and email. One click on Approve publishes it to the end of the gallery. Reject deletes it for good.
Full control afterwards. Published photos can be hidden and shown again, re-captioned or re-ordered at any time.
"Moderation was the point. Open user uploads on a business site are a liability. A queue plus one-click approval makes them an asset."
Why it matters
Social proof that can't be faked: real clients in real places, not stock.
Content that grows itself: the gallery fills up without the team producing anything.
Safe by design: server-side rules, not just a hidden button, keep unapproved photos private.
Privacy-compliant: explicit consent is collected before any personal data is stored.
What visitors get
A multi-slide hero with WebGL transitions, a hot deals feed, 8 destination pages, a cost calculator, visa requirements by country, a tour request form, price-drop alerts, a newsletter, a moderated customer photo gallery, a wishlist, a travel tips blog, live weather, a vacation countdown and a packing checklist generator.
SEO and sharing
The site is a React single-page app, so search crawlers and Telegram/WhatsApp link previews only saw empty generic tags. I added build-time prerendering: 21 key pages now ship real titles, descriptions and preview images in the raw HTML.
The admin panel
A sign-in-protected internal tool where staff manage everything without code: hot deals, a tour-request inbox, site images (168+ photos), a moderated customer photo gallery, newsletter and price-alert subscribers, visa info per country, calculator pricing, hero texts and a blog.
Process
Design system first: product truths and visual rules written down, so every later decision builds on them
Full-site audit: accessibility, performance, responsiveness, scored and prioritised by impact
Iterative polish: dozens of small fixes, each checked live on desktop and mobile
Ship discipline: build → check in the browser → deploy → check on production → commit
Tools
React, Vite, Tailwind CSS, Framer Motion, React Router, custom UA/EN i18n, Supabase (Postgres, Auth, RLS, Edge Functions), Resend, Anthropic Claude API, OpenWeatherMap, Cloudflare Pages, Puppeteer, Claude Code, Base44 (prototype)
Like this project
Posted Oct 5, 2026
Developed a bilingual website for Santa-Cruz Travel Agency
