OpenSense LabsFrontend Developer

CARBON
CHECK

Role

Frontend Developer

Timeline

6 Months

Platform

Full-stack · JavaScript

Role & Contribution

What I Delivered

Delivered full-stack web solutions for Carbon Check — building a fully responsive UI, live CSV-powered interactive map visualisations, and achieving a 40% reduction in page load times for an environmental data platform.

check_circleBuilt end-to-end full-stack integration connecting frontend components with backend data services.
check_circleDeveloped dynamic map visualisations powered by real-time CSV data for non-technical users.
check_circleCut page load times by 40% through lazy loading, asset optimisation, and resource minimisation.

Key Achievement

Page Load Time Reduction

−40%

trending_up

"Full-stack delivery — responsive UI, live data maps, and a 40% performance gain — on an environmental data platform." — Lead Developer

Architectural Solution

integration_instructions

Full-stack Integration

Delivered seamless integration between frontend components and backend services, ensuring full platform functionality and consistent data delivery end-to-end.

map

Dynamic Map Visualisation

Integrated interactive data visualisations including a dynamic map feature powered by real-time CSV data, enriching content presentation and user engagement.

speed

40% Performance Reduction

Boosted website performance by reducing page load times by 40% through advanced optimisation, lazy loading, and resource minimisation techniques.

Innovation Spotlight

Key Features

Live Carbon Map

travel_explore

Dynamic map feature powered by real-time data from external CSV sources — giving environmental stakeholders immediate visual access to carbon metrics across geographies.

Fully Responsive UI

devices

Designed and implemented a fully responsive UI ensuring consistent, smooth experiences across mobile, tablet, and desktop devices for all user types.

speed

Performance Metrics

Performance

−40%

↓ Load time

Page load reduction

Accessibility

↑ Full compliance

WCAG 2.1 compliant

LCP

<2.5s

↑ from 5.4s

Largest Contentful Paint

FID

<100ms

↓ from 380ms

First Input Delay

Technical Highlights

The primary engineering challenge was making large CSV datasets feel fast and interactive — which required a carefully sequenced pipeline of lazy loading, data parsing, and map rendering optimised to avoid blocking the main thread.

contrastWCAG Contrast & Navigation

Improved accessibility by optimizing interactive elements, navigation structures, and contrast ratios — achieving WCAG compliance and enhanced usability for all users.

compressResource Minimisation

Advanced optimisation including lazy loading, code splitting, and resource minimisation reduced payload sizes by 40% across all data-heavy pages.

carbonMap.js

// Dynamic map powered by external CSV data
async function initCarbonMap(containerId) {
  const res = await fetch('/api/carbon-data.csv');
  const text = await res.text();
  const rows = parseCSV(text);

  const map = L.map(containerId).setView([20, 0], 2);
  L.tileLayer(
    'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'
  ).addTo(map);

  rows.forEach(({ lat, lng, value, region }) => {
    L.circleMarker([lat, lng], {
      radius: Math.sqrt(value) * 2,
      fillColor: getColor(value),
      fillOpacity: 0.7,
    }).bindPopup(`<b>${region}</b>: ${value} CO₂ tons`)
      .addTo(map);
  });
}

Lessons Learned

Visualisation Transforms Data into Product

Turning raw CSV numbers into an interactive map was the single most impactful change — transforming a developer tool into one stakeholders actually opened every morning.

Performance Work Needs Measurement

The 40% load time reduction was only achievable because we baseline-measured first. Without Lighthouse metrics before starting, we couldn't prove or prioritise the impact.

Responsive is Not Optional

38% of users were on mobile but the site had zero mobile breakpoints. Building responsiveness first unlocked a third of the user base that had previously been excluded.

Full-stack Ownership Reduces Friction

Owning both frontend and backend integration eliminated handoff delays that typically add a week to data-driven features. Single-owner delivery for complex integrations is faster.

Ready to Build?

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

Launch Inquiry View All Work