Building Micro-Dashboards with ESP32 and Next.js

Combining physical automotive hardware with modern Web UI stack has always been a passion of mine. In this article, I want to break down how I created a real-time telemetry display unit for custom engine diagnostic signals.

The Architecture

When working with vehicle diagnostic parameters—such as coolant temperature, RPM, battery voltage, and oil pressure—low latency is crucial.

[ Vehicle Sensors / OBD-II ] -> [ ESP32 Microcontroller ] -> [ WebSockets ] -> [ Next.js UI ]

Why ESP32?

The ESP32 is a powerhouse for embedded prototyping:

• Built-in Wi-Fi and Bluetooth LE
• Dual-core Tensilica processor running up to 240 MHz
• Low power consumption and low cost
• Native CAN bus (Controller Area Network) support

"Bridging physical signals with fluid web design allows vehicle drivers to visualize diagnostics in real-time."

Sample C++ Code snippet for ESP32

Here is how we initialize the WebSocket connection on the ESP32:

#include <WiFi.h>
#include <WebSocketsServer.h>

WebSocketsServer webSocket = WebSocketsServer(81);

void setup() {
  Serial.begin(115200);
  WiFi.softAP("AutoDiagnosticAP", "esp32pass");
  webSocket.begin();
  webSocket.onEvent(webSocketEvent);
}

void loop() {
  webSocket.loop();
  // Read CAN bus sensors & send payload
}

Designing the Web Interface

Using Tailwind CSS and Framer Motion, we created a Gumroad-inspired tactile card interface:

1. Gauge Components: Smooth rotational indicators built with SVG.
2. Alert States: High temperature and voltage warning triggers.
3. Data Logging: LocalStorage and Supabase backend sync for long-term health tracking.

Stay tuned for part 2 where we package this into a custom physical enclosure!