INSPIRATIONAL
CRUISE
Role
Frontend Developer
Timeline
8 Months
Platform
Drupal + React (Decoupled)
Role & Contribution
What I Delivered
Built the Inspirational Cruise tourism site from scratch — architecting a decoupled Drupal setup where React components handle specific frontend routes, are embedded as Drupal blocks, and are composed through Layout Builder by the editorial team for full post-delivery content control.
- check_circleDesigned a decoupled architecture: React components handle key UI routes, compiled and embedded into Drupal as custom blocks.
- check_circleIntegrated backend APIs into React components for live cruise itineraries, destination data, and availability — fully driven from BE.
- check_circleConfigured Layout Builder with the React-backed blocks, giving editors the power to build and update pages without developer involvement.
- check_circleEngineered formatting pipelines for transactional communications, designing responsive HTML emails for booking confirmations and dynamic PDF generation for articles and itineraries.
Architecture
Decoupled
"React routes embedded as Drupal blocks, composed through Layout Builder — editorial freedom without sacrificing frontend control." — Developer
Architectural Solution
Decoupled React in Drupal Blocks
Architected a decoupled pattern where specific React components handle frontend routes independently, then are compiled and registered as Drupal blocks — bridging modern React UX with Drupal's content and permissions layer.
Layout Builder for Editorial Control
Registered the React-backed blocks within Drupal's Layout Builder, enabling the content team to assemble, rearrange, and publish pages post-delivery — with zero developer involvement for routine content updates.
Backend API Integration
Integrated cruise itinerary, destination, and availability data from backend APIs into React components — with loading states, error boundaries, and response caching to ensure consistent UX even under variable API latency.
Accessibility & Performance
Improved WCAG 2.1 compliance across the component library — keyboard navigation, ARIA roles, focus management — alongside performance gains through lazy loading and optimised React bundle delivery.
Editor-Controlled Dynamic Styling
Engineered a dynamic theming system where content editors pick accent colours and style options directly in Drupal fields — the frontend maps these values to CSS custom properties, making every event page visually unique without touching code.
Key Features
Decoupled Cruise Engine
routeEngineered a dedicated React frontend engine for cruise exploration. It securely queries backend booking APIs for live itineraries, cabin availability, and pricing — rendering lightning-fast, paginated results independent of the CMS lifecycle.
Hybrid Layout Builder
dashboard_customizeTransformed Drupal's Layout Builder into a hybrid composition tool. Content editors can drop high-performance React applications (packaged as custom blocks) directly into marketing layouts, marrying rich interactive features with editorial freedom.
Content-Driven Theming
format_paintBuilt a clever styling bridge where editors define accent colours via Drupal fields on specific landing pages. The Drupal theme layer parses these and injects CSS custom properties to dynamically reskin React components on the fly, entirely code-free.
Automated PDF & Email Systems
picture_as_pdfDesigned and integrated robust automated document pipelines — producing fully-responsive, heavily-styled HTML emails for booking confirmations and dynamically generating polished, downloadable PDFs for cruise itineraries and long-form articles.
Performance Metrics
Performance
Frontend speed gain
Accessibility
WCAG 2.1 compliant
LCP
Largest Contentful Paint
Architecture
React + Drupal hybrid
Technical Highlights
The core architectural challenge was bridging React's component model with Drupal's block and layout system — so editors could assemble pages visually while React handled the interactive, API-driven UI. Every technical decision served that boundary.
codeReact-to-Drupal Block Bridge
Each React app is compiled to a self-contained bundle, registered as a Drupal custom block with a mount point, and hydrated client-side. This pattern kept React and Drupal concerns cleanly separated while making every component available in Layout Builder.
cachedAPI Response Caching in React
Backend API calls in React components are wrapped with a lightweight cache layer — preventing duplicate requests across block re-renders and Layout Builder previews, keeping the editorial experience fast and the API load minimal.
// React component registered as a Drupal block
// Drupal renders <div id="cruise-listings" /> in the block template
// React hydrates it client-side with API data
import { useEffect, useState } from 'react';
export default function CruiseListings({ apiEndpoint, limit = 9 }) {
const [cruises, setCruises] = useState([]);
const [loading, setLoading] = useState(true);
useEffect(() => {
fetch(`${apiEndpoint}?limit=${limit}`)
.then(r => r.json())
.then(data => { setCruises(data); setLoading(false); })
.catch(() => setLoading(false));
}, [apiEndpoint, limit]);
if (loading) return <CruiseSkeleton count={limit} />;
return (
<ul className="cruise-grid" role="list">
{cruises.map(c => <CruiseCard key={c.id} cruise={c} />)}
</ul>
);
}Lessons Learned
Decoupled Doesn't Mean Disconnected
React and Drupal need clear contracts at their boundary. Defining the block mount point, data props, and hydration strategy upfront prevented integration rework that would have consumed the final sprint.
Layout Builder Changes the Scope Conversation
Once editors could build pages themselves via Layout Builder, they stopped requesting developer changes for content updates — which freed the team to focus on new feature delivery rather than routine maintenance.
API Errors Need UI Contracts Too
Backend API failures during build caused blank React components in Layout Builder previews. Adding error boundaries and skeleton states made failures visible and manageable — not silent and confusing for editors.
Accessibility in Hybrid Architectures Needs Extra Attention
When React manages focus and Drupal manages routing, focus management can fall through the gap. Explicitly handling focus restoration after React-driven route transitions was essential for WCAG 2.1 keyboard compliance.
Ready to Build?
From complex backend architecture to award-winning front-end experiences. Let's build the future together.