You need a full-stack feature with live data updates, efficient state management, and a responsive UI that feels instant to the user.
Developer prompt for Real-Time Dashboard with WebSockets & Optimistic UI
AI prompt created by PromptsRadar
Instructions
PromptsRadar
•
2026-04-07
Qwen
Act as a senior full-stack developer. Build a real-time analytics dashboard for monitoring server metrics (e.g., CPU, memory, request count). Use Node.js + Express + Socket.IO for the backend and React + TanStack Query + Zustand for the frontend.
Requirements:
Backend should emit mock metrics every 2 seconds to all connected clients.
Frontend must implement optimistic UI updates when a user triggers a 'refresh' or 'alert threshold' change – show the new value immediately, then roll back if the server rejects it.
Use TanStack Query for server-state management and Zustand for client-side UI state (e.g., selected metric filter).
Handle disconnection/reconnection gracefully with a toast notification.
Provide full code for: server.js (with Socket.IO setup), App.jsx (dashboard component), useMetrics.js (custom hook for real-time data subscription), and store.js (Zustand slice).
Include a package.json with all dependencies and a short explanation of how optimistic UI works in this context.
Share on Socials
