01 — Work

SafetyConnect

Real-Time Systems · Frontend Engineering · Data Visualization
Employer
GYTWorkz
Role
Software Engineer / Full-Stack Developer
Period
2020 — 2021
Focus here
Frontend

Making continuously changing data feel simple and responsive.

Built the frontend experience around live tracking, operational dashboards, data visualization, reporting, and continuously changing data.

02Context

A frontend built around data that keeps changing.

SafetyConnect brought together live location data, operational metrics, reports, trends, and safety information into a single frontend experience.

The challenge was not simply displaying data. The interface had to remain responsive while data changed, APIs evolved, dashboards became more complex, and users moved between different views.

What I worked on
Live trackingData visualizationDashboardsReportingAPI integrationPerformanceExport
03What I worked on

What I actually built.

F.01

Dashboard architecture

Built reusable dashboard structures that could render different datasets, scopes, charts, tables, and operational views without duplicating the same logic across every screen.

  • Dashboard views
  • Data extraction
  • Shared visualization components
  • Filtering
  • Date ranges
  • Regional / branch views
F.02

Data visualization

Built reusable visualization components for charts, trends, statistics, and operational data.

  • Bar charts
  • Line charts
  • Pie / donut charts
  • Tables
  • Trends
  • KPI / stat cards
F.03

Live tracking

Built the frontend experience for continuously changing location data and live map tracking.

  • Map
  • Driver / employee positions
  • Marker updates
  • Location changes
F.04

Reporting

Built reporting interfaces that transformed collected operational data into readable summaries and visual reports.

  • Summaries
  • Visual reports
F.05

Frontend data management

Built the client-side data flow around caching, request deduplication, invalidation, timeouts, cancellation, and refresh behavior.

  • Caching
  • Deduplication
  • Invalidation
  • Timeouts
  • Cancellation
  • Refresh
04Frontend system

The frontend had to do more than render data.

Data → interface
01 / SafetyConnectFrontend
USERPAGE / DASHBOARDDATA HOOKS / SERVICESNORMALIZATIONAPPLICATION STATEREUSABLE UICHARTS / MAP / TABLESCACHEREQUEST DEDUPLICATIONINVALIDATIONERROR HANDLING
Conceptual representation · frontend
Frontend architecture · simplified
Data flow
  1. 01API / data sources
  2. 02Data normalization
  3. 03Application state
  4. 04Dashboard / visualization
  5. 05User interaction
Interaction flow
  1. 01User
  2. 02Dashboard
  3. 03Filters / date range / region
  4. 04Data request
  5. 05Cache / request management
  6. 06Updated view
05 — Problem 01

When too many location updates started slowing the map

Problem

Driver and employee positions were updated continuously.

As location updates became more frequent, updating the map directly for every change made the frontend increasingly expensive to render.

  1. 01 Location update
  2. 02 State update
  3. 03 Map update
  4. 04 Render
  5. 05 Next update

Too many updates → too much rendering → map lag

Investigated

The problem wasn’t the map itself. The problem was the amount of work happening between incoming location changes and what the user actually needed to see.

Changed
  • Reduced unnecessary intermediate updates
  • Optimized how location changes reach rendering
  • Preserved precise position changes
  • Smoothed the visual transition where appropriate
Result

The map could continue receiving changing location data without making the interface feel overloaded or noticeably laggy.

P.01 / SafetyConnectConceptual
INCOMING LOCATION UPDATESBEFORE · MAP UPDATE PER CHANGEMAP LAGAFTER · FEWER INTERMEDIATE RENDERSPOSITIONS PRESERVED
Data frequency vs visual update frequency
06 — Problem 02

The API changed. The dashboard couldn’t.

Problem

The dashboard received data in different response structures as the API evolved.

Instead of allowing every visualization to understand every possible response shape, the frontend needed one predictable data model.

  1. 01 Raw response
  2. 02 Extract relevant data
  3. 03 Normalize structure
  4. 04 Map to dashboard model
  5. 05 Visualization
Built

I centralized response-shape handling so dashboard components did not need to know where the data came from or which response structure was returned.

  • Dashboard data extraction
  • Nested structures
  • Alternate response shapes
  • Regional / global mapping
  • Chart-specific mapping
  • Consistent data for visualizations
Result

Visualization components could remain focused on rendering while the data-normalization layer absorbed API-shape differences.

P.02 / SafetyConnectConceptual
API RESPONSE AAPI RESPONSE BAPI RESPONSE CNORMALIZATIONDASHBOARDMODEL
Many response shapes · one model
07 — Problem 03

The dashboard was doing the same work twice

Problem

Multiple dashboard interactions could trigger the same data request more than once.

  • Navigation
  • Date-range changes
  • Dashboard refresh
  • Components requesting related data
  • Repeated health-data requests
Built
Request deduplication
If a request is already running, reuse the ongoing request rather than starting another one.
Caching
Reuse recently fetched data when it is still valid.
Invalidation
Invalidate cached data when the date range changes, relevant navigation occurs, an explicit refresh occurs, or the underlying view changes.
Cancellation / timeout
Prevent requests from remaining active indefinitely.
Result

Reduced redundant network activity while keeping the dashboard responsive and the displayed data aligned with the user’s current view.

P.03 / SafetyConnectConceptual
REQUESTCACHED?YESUSE CACHENORUNNING?YESREUSE REQUESTNOSTART REQUESTCACHE RESULTUPDATE UITIMEOUTCANCELLATIONINVALIDATION
Cache · ongoing request · invalidation
08 — Problem 04

One dashboard, different data scopes

Problem

The dashboard could operate at different scopes — global, region, and branch — but the underlying data structures were not always identical.

The UI still needed to present the same conceptual information.

Built

Instead of duplicating dashboard logic for every scope, I handled the differences during data preparation and mapped the results into a common structure consumed by the visualization layer.

  1. 01 Data source
  2. 02 Scope detection
  3. 03 Data mapping
  4. 04 Common model
  5. 05 Reusable component
Result

The same dashboard components could work across different scopes without duplicating visualization logic.

P.04 / SafetyConnectConceptual
GLOBAL DATAREGIONAL DATABRANCH DATANORMALIZATIONCOMMONMODEL
Global · Region · Branch
09 — Problem 05

When the dashboard had to leave the browser

Problem

The dashboard was responsive and scrollable on screen, but exporting it to PDF introduced a completely different rendering problem.

A simple screenshot could crop content, miss scrollable sections, preserve visual effects incorrectly, and produce poor page boundaries.

  1. 01 Dashboard
  2. 02 Prepare DOM
  3. 03 Expand content
  4. 04 Capture
  5. 05 Crop
  6. 06 Paginate
  7. 07 PDF
Built
  • Scrollable content
  • Temporary layout changes
  • Full-content capture
  • Visual effects that interfere with capture
  • Restoring the original DOM
  • Multi-page output
Result

The full dashboard could be exported as a structured multi-page report instead of a cropped screenshot of the current viewport.

P.05 / SafetyConnectConceptual
VIEWPORTSCROLLEDEXPANDPAGE 1PAGE 2PAGE 3
Dashboard → multi-page report
10 — Problem 06

Charts had to adapt to the data

Problem

A reusable chart component had to work with different chart types, different amounts of data, different screen sizes, and different label densities.

A configuration that works for ten categories may not work for fifty.

Built
  • Chart-type-specific configuration
  • Responsive sizing
  • Label-density handling
  • Dynamic axis configuration
  • Legend behavior
  • Resize handling
  • Chart lifecycle management
Result

The same visualization system could remain readable across different datasets and viewport sizes without creating separate chart implementations for every case.

P.06 / SafetyConnectConceptual
SMALL · NORMAL LABELSABCDEFLARGE · DENSE LABELSADAPTIVE CONFIGURATIONTYPE · SIZE · LABELS · AXES · LEGEND
Small dataset · large dataset
11 — Technical territory
Frontend
  • React
  • JavaScript / TypeScript
Visualization
  • Charts
  • Maps
  • Data visualization
Data
  • REST APIs
  • Real-time data
  • Client-side caching
UI
  • Responsive interfaces
  • Dashboard systems
  • PDF export
12 — How I work
  1. 01 Observe

    Start with what the user is actually experiencing.

  2. 02 Trace

    Follow the data and rendering path until the source of the problem becomes clear.

  3. 03 Simplify

    Move complexity away from the UI whenever possible.

13What it taught me

Frontend performance is often about controlling work.

A frontend can receive more information than the user actually needs to see at once.

Good frontend engineering is often about deciding what to process, what to cache, what to render, and when to update.

Working on SafetyConnect changed how I think about the boundary between data and interface.

14Next

Data can change constantly.

The interface still needs to feel calm.