WASHINGTON
DC
Role
Frontend Developer
Timeline
5 Months
Platform
Drupal + Storybook
Role & Contribution
What I Delivered
Spearheaded a fully custom frontend architecture for the Washington DC government tourism portal — delivering a Storybook-documented component system, a custom real-time search solution, and GTMetrix scores of 90+ with 40% performance improvement.
- check_circleDeveloped a full Pattern UI + Storybook documentation system for team-wide component consistency.
- check_circleBuilt a custom search solution with real-time indexing, boosting content discoverability by 80%.
- check_circleAchieved GTMetrix 90+ scores through custom module caching and advanced asset optimisation.
GTMetrix Score Achieved
90+
"A well-documented, high-performance component system delivered on a government-grade portal — on time and to spec." — Lead Developer
Architectural Solution
Pattern UI + Storybook
Led the development of a fully custom frontend architecture in Pattern UI and Storybook, enhancing visual consistency and developer collaboration across the team.
Custom Search Solution
Engineered a custom search solution with real-time indexing and filtering logic, improving content discoverability and boosting user engagement by 80%.
Performance to GTMetrix 90+
Optimized site performance by 40% through custom module development, advanced caching, and asset optimisation — achieving GTMetrix scores of 90+.
Custom Multi-level Navigation
Built a fully custom multi-level mega menu with complex nested state management — preserving the active menu path and expanded state across page refreshes using sessionStorage, ensuring seamless navigation continuity for the user.
Drupal Layout Builder
Configured Drupal's Layout Builder with a library of reusable custom block types, enabling the government content team to restructure and update pages post-delivery without any developer involvement.
Custom Interactive Map
Built a fully custom JavaScript map for the DC tourism portal — featuring clickable location markers, dynamic info panels populated from Drupal content, and smooth zoom transitions to surface attractions, hotels, and landmarks for visitors.
Key Features
Storybook Documentation
auto_storiesEvery UI component documented in Storybook with live controls — eliminating screenshot-based handoffs and accelerating developer onboarding.
Responsive Architecture
devicesDeveloped and implemented a fully responsive layout, improving mobile retention by 20% across all device breakpoints.
Performance Metrics
GTMetrix Score
Page performance
Accessibility
WCAG 2.1 compliant
LCP
Largest Contentful Paint
Engagement
Via custom search
Technical Highlights
The critical decisions were around establishing a shared component vocabulary early — Storybook ensured every component was tested and documented before it touched the CMS, while custom Drupal module caching drove the GTMetrix 90+ scores under real government-scale traffic.
integration_instructionsReact with Drupal
Integrated React with Drupal, enabling seamless real-time data exchange and boosting frontend scalability while meeting strict delivery deadlines.
verified_userWCAG Accessibility
Ensured WCAG-compliant accessibility across all components, improving usability and inclusivity for a diverse global user base.
// Real-time search with debounce + Drupal Views filter
function initSearch(inputSelector, viewsEndpoint) {
const input = document.querySelector(inputSelector);
let timer;
input.addEventListener('input', (e) => {
clearTimeout(timer);
timer = setTimeout(async () => {
const results = await fetch(
`${viewsEndpoint}?search=${e.target.value}`
).then(r => r.json());
renderResults(results);
}, 300);
});
}Lessons Learned
Document Before You Build
Setting up Storybook at the start saved weeks of miscommunication and enabled parallel design and development workflows.
Search UX is Core UX
Investing in a custom real-time search was the single highest-impact change for user engagement across the entire portal.
Cache at Module Level
Custom Drupal module caching strategies — not just page caching — were key to hitting GTMetrix 90+ scores under real-world traffic.
Mobile First Saves Retrofitting
A mobile-first layout strategy from day one eliminated device-specific bug-fixing sprints that would have consumed two full weeks of the timeline.
Ready to Build?
From complex backend architecture to award-winning front-end experiences. Let's build the future together.