A Next.js dashboard that consumes a live WebSocket feed and renders it with automatic reconnection — the frontend half of a full-stack real-time pipeline.
This is the client-facing companion to realtime-sync-engine: a small, focused Next.js app that connects to that backend's WebSocket server and displays a live BTC/USDT price feed, connection status, and a short history of recent updates.
The point of this project isn't the UI polish — it's demonstrating that the reconnection discipline from the backend carries through to the frontend: the browser client independently manages its own reconnect-with-backoff logic, so a dropped connection to the backend doesn't leave the dashboard stuck showing stale data forever.
- Client-side WebSocket connection with automatic reconnection and exponential backoff
- Type-safe message validation (
isPriceUpdate) — malformed messages are dropped, not crashed on - Live connection status indicator
- Recent update history (last 7 ticks)
- Pure, unit-tested formatting and validation logic, separated from React/UI code
- Configurable backend URL via environment variable
This dashboard needs a running WebSocket backend to show live data. The easiest way is to run realtime-sync-engine locally alongside this project:
# In a separate terminal, clone and run the backend:
git clone https://github.com/Nicolas-Pedernera/realtime-sync-engine.git
cd realtime-sync-engine
npm install
npm run dev # serves the WebSocket on ws://localhost:8080
# Then, in this project:
npm install
cp .env.example .env.local
npm run dev # serves the dashboard on http://localhost:3000
Open http://localhost:3000 — you should see the same live BTC/USDT price as the backend's own minimal dashboard, this time rendered through React.
| Variable | Default | Description |
|---|---|---|
NEXT_PUBLIC_WS_URL |
ws://localhost:8080 |
WebSocket URL of the realtime-sync-engine backend |
npm test
Covers the pure price-feed.ts module: price formatting, symbol normalization, and payload validation. The WebSocket connection logic itself (use-price-feed.ts) is a thin, side-effecting layer around these pure functions by design, so the parts worth unit testing are isolated from React and browser APIs.
app/
├── layout.tsx
├── page.tsx # main dashboard page
└── globals.css
lib/
├── price-feed.ts # pure formatting + validation (tested)
├── use-price-feed.ts # WebSocket connection hook with reconnection
└── __tests__/
└── price-feed.test.ts
- Next.js (App Router)
- React
- TypeScript
- Vitest
- Native browser WebSocket API (no client library dependency)
MIT — see LICENSE for details.
Nicolás Pedernera
Systems Engineer — Universidad de Buenos Aires, 2024
Focused on backend engineering, fintech, cryptocurrency, blockchain infrastructure, and AI systems.
- GitHub: Nicolas-Pedernera
- LinkedIn: nicolas-pedernera-zendx
- Upwork: perfil de freelancer