HeadlinesBriefing favicon HeadlinesBriefing.com

Build a Real‑Time F1 Dashboard with Velt

DEV Community •
×

Formula 1 fans and teams crave leaderboards, yet most dashboards stay static. A new tutorial shows how to build a dynamic F1 dashboard that lets users comment, see who’s online, and receive alerts. The guide uses Next.js, Shadcn, and Velt to add collaboration without backend code.

By integrating Velt’s real‑time engine, developers sidestep the usual WebSocket plumbing and can focus on race data from openf1.org. The tutorial walks through setting up a Next.js project, generating UI with AI tool v0, and wiring Velt’s comment, presence, and notification widgets for team collaboration.

Users authenticate via a mock context that stores two racing personas—Alex Thunder and Jordan Swift—each with distinct colors and avatars. Velt’s SDK identifies the current user, sets a shared document, and automatically syncs comments and presence across all open tabs for real time collaboration sessions.

After launching the dev server, the demo shows a clean table of historical race sessions with search, filter, and comment buttons. Next steps include adding screen recording, cursor tracking, and huddles to deepen teamwork. Watch the live demo on Vercel for inspiration for developers today.