DEV Community

Hasan Serhan Oktay
Hasan Serhan Oktay

Posted on

Building a Dark-Mode Automotive Telemetry & Chronic Fault Matrix with React + Gemini API


Modern vehicle diagnostics often feel stuck in the early 2010s: generic OBD fault codes, clunky interfaces, and reactive alerts that only appear after a breakdown occurs.

To explore a modern solution, I built CarCare Global — a client-side automotive telemetry dashboard designed around predictive health tracking and Technical Service Bulletins (TSB).


Architecture & Technical Highlights

  • Scoped Ambient Tokens: Handled theme switching (Titanium Chalk, Obsidian Crimson, Nardo Cyber, Bavarian Amber) via scoped CSS root tokens rather than bulky style libraries.
  • Zero-Dependency i18n: Implemented a lightweight key-value dictionary to handle dynamic runtime language switching (EN/TR) across complex OBD telemetry tags without hydration mismatches.
  • Resilient AI Diagnostics: Connected the Google Gemini API to analyze driver symptoms against known vehicle trim vulnerabilities, backed by defensive fallback arrays to eliminate blank component states during network latency.
  • CAN-BUS Reactive Simulation: Synchronized vehicle wear cycles with dynamic service ledger tracking.

Try the Dashboard

If you like the telemetry cockpit concept and dark-mode styling, *[supporting the project with an upvote on emergent.sh]
https://app.emergent.sh/showcase/builderfest-kevin/4b3b0c98-15d9-4096-9896-b8e1bc19364c?utm_source=share *
would mean a lot.

Would love your feedback on the cockpit contrast, data hierarchy, and overall interaction design!

Top comments (0)