Frontend Engineer · ISM (Dubai, remote)2025 — 2026
Writing a chart engine from scratch when no library could do the job
ProblemThe hours-of-service log is the main screen of an ELD system — a US truck driver’s 24-hour day drawn as a connected step line across four duty statuses, with violations, breaks and running totals on top. It carries legal weight, so it has to be exact. Recharts and Chart.js could not support the interaction the design called for: hovering a segment had to highlight that exact time range, place tooltips on both of its edges, and update the duty-hour total below.
What I builtA framework-agnostic TypeScript class that generates the entire SVG itself. It takes the API data, a timezone and a hover callback, then does the rest: mapping time to coordinates, connecting status segments, placing labels so they never collide, and rendering. Building it in React would have cost performance and control, so it deliberately depends on nothing. I also built the admin and superadmin panels, fleet-monitoring dashboards fed by in-truck IOSiX devices, a Gemini-powered assistant that explains engine error codes to dispatchers, and a maintenance scheduler.
Where it standsThe Flutter mobile team tried to draw the same chart natively, could not implement the full design, and ended up loading mine in a WebView — it is still running in production, on the screen every driver and dispatcher opens daily.
TypeScriptSVGReactMUIGemini API