OpenSense LabsLead Developer

VISIT FORT
MYERS

Role

Lead Developer

Timeline

7 Months

Platform

Drupal + React + Pattern Lab

Role & Contribution

What I Delivered

Redesigned and rebuilt the Visit Fort Myers tourism site from the ground up — introducing a Component Base system with Pattern Lab, live API-powered weather, events, and map content, eliminating 40+ weekly manual editor updates.

check_circleArchitected a Component Base system with Pattern Lab for scalable, reusable page assembly.
check_circleBuilt custom Drupal modules integrating live weather, events, and maps APIs — fully automated.
check_circleBridged React with Drupal data layers to deliver seamless, real-time content experiences.

Key Achievement

Manual Updates Eliminated

+40%

trending_up

"A complete site rebuild delivering live, automated content with zero manual editorial overhead." — Lead Developer

Architectural Solution

grid_view

Component Base + Pattern Lab

Redesigned the site with a Component Base system and Pattern Lab for scalable, component-driven development that editors and developers could both work with confidently.

api

Real-time API Integration

Developed and integrated custom Drupal modules to fetch and render external API data, powering live content such as weather forecasts, events listings, and interactive maps.

sync

React + Drupal Live Events

Integrated React components with Drupal to enhance the Current Events section with real-time updates and seamless UI transitions using optimized API data pipelines.

Innovation Spotlight

Key Features

Live Events Section

event

React-powered Current Events section with real-time API updates and efficient caching mechanisms to ensure fast, consistent content delivery.

Live Weather & Maps

map

Custom Drupal modules rendering live weather data and interactive maps, keeping tourism content always accurate without manual editorial intervention.

speed

Performance Metrics

Performance

+40%

↑ Post-optimisation

Page speed gain

Accessibility

↑ Full compliance

WCAG 2.1 compliant

LCP

<2.5s

↑ from 5.8s

Largest Contentful Paint

API Cache

300ms

↓ from 1.8s

Avg. cached response

Technical Highlights

The core engineering challenge was building a live-data platform where external APIs — weather, events, and maps — had to be reliable enough to replace manual editorial updates entirely. Every technical decision centred on caching, error resilience, and editorial independence.

storagePattern Lab Component Pipeline

Designed the Component Base system in Pattern Lab so every pattern — from atoms to full page templates — could be assembled independently of the CMS. This decoupling let frontend and backend teams work in parallel throughout the project.

cachedLayered API Caching Strategy

Implemented a two-tier caching approach: Drupal's cache bins held API responses for 5-minute TTLs, with a fallback to stale data on API failure — ensuring zero blank sections for visitors even during third-party outages.

events.module

<?php
// Custom Drupal module: fetch live events from external API
function visitftm_events_get_current(int $limit = 10): array {
  $cache_key = 'visitftm_events:current';
  $cached = \Drupal::cache()->get($cache_key);

  if ($cached) return $cached->data;

  $response = \Drupal::httpClient()->get(
    getenv('EVENTS_API_URL'),
    ['query' => ['limit' => $limit]]
  );

  $data = json_decode($response->getBody(), TRUE);
  \Drupal::cache()->set($cache_key, $data, time() + 300);
  return $data;
}

Lessons Learned

Cache External APIs Aggressively

Third-party API rate limits and outages made caching non-negotiable. A 5-minute TTL cache on all external calls ensured zero user-facing downtime even during API hiccups.

Component Systems Accelerate Teams

Pattern Lab meant new page types could be assembled in hours rather than days, because every building block already existed and was documented.

Real-time UX Sets User Expectations

Once users experienced live event and weather data, they expected it everywhere. Planning data freshness requirements upfront prevented scope creep post-launch.

Drupal Performance Standards Matter

Adhering to Drupal best practices — hook systems, cache bins, proper module architecture — made the codebase maintainable by any Drupal developer who joined the team.

Ready to Build?

From complex backend architecture to award-winning front-end experiences. Let's build the future together.

Launch Inquiry View All Work