San Jose city skyline at dusk
OpenSense LabsFrontend Developer

SAN
JOSE

Role

Frontend Developer

Timeline

Maintainance

Platform

Drupal + JavaScript

Role & Contribution

What I Delivered

Joined an existing San Jose city portal codebase and took ownership of ongoing feature development — building custom Angular-based API integrations for live events and restaurant data, implementing advanced filtering logic, and delivering targeted performance and accessibility improvements across 100+ page types.

  • check_circleBuilt a custom Angular event integration pulling live city event data from an external API, with filtering by category, date, and location.
  • check_circleDeveloped a restaurant discovery feature with real-time filtering, lazy-loaded listings, and structured data for SEO.
  • check_circleDelivered targeted logical changes across the existing codebase — improving WCAG 2.1 compliance, CLS stability, and overall code maintainability.
Key Achievement

Features Shipped

Live

trending_up

"Took ownership of an existing portal and shipped meaningful feature additions — live events, restaurant filtering, and measurable performance gains." — Developer

Architectural Solution

view_quilt

100+ Page Scalable UI

Built dynamic views and custom UI components to display real-time event and restaurant data, integrating external APIs for seamless, always-fresh content updates.

tune

Advanced JS Interactivity

Developed advanced JavaScript functionality including interactive filters, modals, and content toggles to enhance user interaction and site usability across all pages.

integration_instructions

Angular Event & Restaurant API

Built custom Angular components integrating live city event and restaurant APIs — featuring category/date/location filters, structured error handling, and in-memory caching to prevent redundant API calls on repeat interactions.

image

Drupal Image Styles

Leveraged Drupal's Image Styles system to auto-generate responsive image derivatives for every breakpoint — eliminating oversized image delivery and reducing average page payload significantly across the 100+ page types.

slow_motion_video

JavaScript Lazy Loading

Implemented native browser lazy loading and Intersection Observer-based deferred rendering for listing sections — ensuring content below the fold never blocked initial page load or contributed to LCP regression.

Innovation Spotlight

Key Features

Event listing with live filters

Interactive Event Filters

filter_list

Real-time event and restaurant filters powered by external APIs, with loading states, error handling, and data caching for optimal performance under heavy traffic.

Accessible interface with keyboard navigation

WCAG 2.1 Accessibility

accessibility_new

Implemented WCAG 2.1 best practices ensuring keyboard navigation, screen reader support, and inclusive design patterns across all 100+ page types.

Technical Highlights

The San Jose portal was a data-heavy city directory — restaurants, events, and city services all needed to feel fast and filterable in real time. Making 100+ page types consistent while passing Core Web Vitals under live API data was the central engineering challenge.

restaurantRestaurant & Events API Layer

Built a unified JavaScript API layer that fetched and normalised data from multiple city data sources — restaurants, upcoming events, and city services — with in-memory caching so repeated filter interactions never hit the network twice.

straightenLayout Reservation for CLS

Dynamic API content caused layout shifts that failed Core Web Vitals. Fixed by reserving explicit height placeholders in CSS before API data loaded — bringing CLS from 0.42 to under 0.1 without sacrificing layout flexibility.

filters.js
// Async filter with loading state + caching
const cache = new Map();

async function filterEvents(category, date) {
  const cacheKey = `${category}:${date}`;

  if (cache.has(cacheKey)) {
    return renderEvents(cache.get(cacheKey));
  }

  showLoader();
  try {
    const res = await fetch(
      `/api/events?category=${category}&date=${date}`
    );
    const data = await res.json();
    cache.set(cacheKey, data);
    renderEvents(data);
  } catch (err) {
    showError('Unable to load events. Please try again.');
  } finally {
    hideLoader();
  }
}

Lessons Learned

01

Inheriting a Codebase Requires Humility First

Jumping into an existing portal with 100+ page types meant reading code before writing it. Understanding existing patterns before adding Angular integrations prevented architectural conflicts that would have been costly to unwind.

02

Drupal Image Styles Are Underused

Most projects handroll responsive image logic in CSS or JS. Using Drupal's native Image Styles to auto-generate breakpoint-specific derivatives was simpler, faster, and reduced page payload without touching a single component.

03

API Caching is UX, Not Just Performance

The restaurant filter felt broken without caching — identical requests re-triggered loaders on every interaction. In-memory caching made the feature feel instant and transformed how users perceived the entire listing experience.

04

Lazy Loading Needs Intersection Observer, Not Just the Attribute

Native lazy loading alone wasn't enough for dynamically injected Angular content. Pairing it with Intersection Observer ensured off-screen listing cards were genuinely deferred until the user scrolled close — not just marked as lazy.

Ready to Build?

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

Launch InquiryView All Work