The latest articles on DEV Community by Hasan Serhan Oktay (@hasan_serhanoktay_756b59). https://dev.to/hasan_serhanoktay_756b59 https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F4126314%2Fd050c824-e1b7-4a1b-9bbf-fe79b0f502a2.jpg https://dev.to/hasan_serhanoktay_756b59 en Hasan Serhan Oktay Tue, 15 Sep 2026 13:40:21 +0000 https://dev.to/hasan_serhanoktay_756b59/building-a-dark-mode-automotive-telemetry-chronic-fault-matrix-with-react-gemini-api-1ee2 https://dev.to/hasan_serhanoktay_756b59/building-a-dark-mode-automotive-telemetry-chronic-fault-matrix-with-react-gemini-api-1ee2 <p><a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fv1bgcxs3oyeij7im14xl.png" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fv1bgcxs3oyeij7im14xl.png" alt=" " width="800" height="410"></a><br> <a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fxa274ieqnk8xyl68wujl.png" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fxa274ieqnk8xyl68wujl.png" alt=" " width="800" height="395"></a></p> <p>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.</p> <p>To explore a modern solution, I built <strong>CarCare Global</strong> — a client-side automotive telemetry dashboard designed around predictive health tracking and Technical Service Bulletins (TSB).</p> <h3> Architecture &amp; Technical Highlights </h3> <ul> <li> <strong>Scoped Ambient Tokens:</strong> Handled theme switching (Titanium Chalk, Obsidian Crimson, Nardo Cyber, Bavarian Amber) via scoped CSS root tokens rather than bulky style libraries.</li> <li> <strong>Zero-Dependency i18n:</strong> Implemented a lightweight key-value dictionary to handle dynamic runtime language switching (EN/TR) across complex OBD telemetry tags without hydration mismatches.</li> <li> <strong>Resilient AI Diagnostics:</strong> 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.</li> <li> <strong>CAN-BUS Reactive Simulation:</strong> Synchronized vehicle wear cycles with dynamic service ledger tracking.</li> </ul> <h3> Try the Dashboard </h3> <ul> <li> <strong>Live Demo:</strong> <a href="https://carcare-global.vercel.app" rel="noopener noreferrer">https://carcare-global.vercel.app</a>)</li> <li> <strong>Developer Contest:</strong> Currently competing in the <strong>emergent.sh</strong> developer contest! </li> </ul> <p>If you like the telemetry cockpit concept and dark-mode styling, *<em>[supporting the project with an upvote on emergent.sh]<br> <a href="https://app.emergent.sh/showcase/builderfest-kevin/4b3b0c98-15d9-4096-9896-b8e1bc19364c?utm_source=share" rel="noopener noreferrer">https://app.emergent.sh/showcase/builderfest-kevin/4b3b0c98-15d9-4096-9896-b8e1bc19364c?utm_source=share</a> *</em> would mean a lot.</p> <p>Would love your feedback on the cockpit contrast, data hierarchy, and overall interaction design!</p> react webdev javascript showdev