Challenge and Context
The client needed a digital platform to showcase and sell curated travel experiences including wellness retreats, adventure packages, and destination tours. The requirements included multi-language support for Arabic and English markets, a content-managed system for non-technical staff to update packages and pricing, and a performant frontend that loads quickly across varying network conditions in the region.
The existing solution was a static website that required developer intervention for every content update. Marketing teams needed autonomy to add new packages, update destination details, and manage retreat offerings without relying on engineering resources.
Architecture and System Design
The system consists of two interconnected applications. The backend is built on Laravel 12 with PHP 8.2, serving a RESTful API that exposes package, destination, retreat, FAQ, and support endpoints. The frontend is a Next.js 15 application written in TypeScript, consuming these APIs and rendering server-side rendered pages for SEO optimization.
The backend uses SQLite for development with a schema designed for easy migration to MySQL in production. Data models include Package, Destination, Retreat, FAQ, and Support, with many-to-many relationships between packages and both destinations and retreats. The admin panel is built with Filament 3, providing a ready-made interface for content management without custom development.
The frontend follows a repository pattern for API communication, with factory classes creating appropriate repository instances based on locale. Data mappers transform API responses into TypeScript interfaces, ensuring type safety throughout the client-side application.
Key Engineering Decisions
Choosing Laravel 12 with Filament 3 provided immediate admin panel functionality out of the box. The Filament ecosystem includes built-in support for localization through the filament-translatable-fields package, which was leveraged to enable Arabic and English content management without custom form components.
Spatie Media Library handles all image assets for packages and destinations. This decision provides automatic optimization, responsive image generation, and a clean interface for associating multiple images with each content type. The media collections are defined in each model, ensuring consistent behavior across the admin panel.
The frontend uses next-intl for internationalization, with routing configured to support locale-based URLs. Middleware ensures locale detection and redirection, while the i18n configuration centralizes translation loading. API requests include locale parameters, allowing the backend to return appropriately localized content.
Type safety was prioritized by defining comprehensive TypeScript interfaces for all data types. The mappers transform raw API responses into typed objects, catching potential data inconsistencies during development rather than at runtime.
The backend implements observers for automatic cache invalidation and SEO-related tasks when content changes. The TagParser service provides consistent parsing of comma-separated values into arrays for fields like activities, stay options, and IV drip offerings.
Delivery and Outcomes
The platform launched with full Arabic and English support, enabling the client to serve both language markets from a single codebase. Content managers can now add packages, update destinations, and modify retreat details through the Filament admin panel without developer assistance.
The Next.js frontend provides fast page loads through server-side rendering, while the API-first architecture allows for future mobile applications or third-party integrations. The clean separation between content management and presentation enables independent scaling of each layer.
PostHog integration was added for analytics, providing insight into user behavior and package popularity. The modular structure allows for straightforward addition of new features such as booking flow, user accounts, or payment processing in subsequent phases.