Fort Jesus Ticketing Website: A React Client for Heritage Tourism
What Is Fort Jesus Mombasa?
Fort Jesus is a 16th-century Portuguese military fortification and a UNESCO World Heritage Site in Mombasa, Kenya. This project is the official tourism website designed to digitise the visitor experience.
The platform allows local and international visitors to learn about the fort's history, book tickets for day tours, reserve spots for the immersive Night Tour (Sound & Light Show), inquire about hosting events, and browse a media gallery.
Tech Stack
| Layer | Technology |
|---|---|
| Frontend | React 19 + TypeScript |
| Build Tool | Vite |
| Styling | Tailwind CSS (@tailwindcss/vite) |
| UI Primitives | Radix UI Components |
| Routing | React Router v7 |
| Date Handling | date-fns & react-day-picker |
| Icons | lucide-react |
Architecture & Features
The application is structured as a client-side Single Page Application (SPA) focusing on a seamless booking experience and fast load times (<3 seconds). It pairs with a dedicated backend (like the Fort Jesus Server) to handle secure payments and QR code generation.
Ticketing & Booking Flows
The core of the application revolves around distinct booking pipelines:
- Day Tours: Tiered pricing structure separating East African residents (Adult: KES 525, Child: KES 225) from Non-Residents (Adult: KES 1,570, Child: KES 850). The flow includes a quantity selector, date picker (
react-day-picker), and secure checkout. - Night Tours (Sound & Light Show): A specialized flow for the 60-minute night experience featuring fireworks and illuminated pathways. This runs only Thursday to Sunday at 8:00 PM and has strict booking rules enforced by the UI.
Component Architecture
The project leverages Radix UI primitives (Accordion, Dialog, Select, Tabs, etc.) to build accessible, unstyled components that are then styled rapidly with Tailwind CSS. This combination allows for a highly customized, mobile-first design without sacrificing keyboard navigation or screen reader support.
Event Hosting & Content
Beyond ticketing, the site acts as a marketing hub. It includes an inquiry form for hosting corporate events, cultural dinners, and weddings. A dynamic gallery with a lightbox viewer filters content between day, night, and event photography.
What I Learned / Engineering Decisions
A major technical challenge was handling the complex state of booking requirements—different pricing tiers, specific operating days (e.g., Night tours only Thu-Sun), and calculating access fees dynamically. Using a robust date library like date-fns alongside react-day-picker ensured that users couldn't select invalid dates, preventing validation errors from reaching the payment gateway.
The decision to use React 19 and Vite provides an exceptionally fast developer experience and optimized production bundles, aligning with the requirement for fast loading times on mobile networks common in the region.