Real-Time Dashboard with WebSockets (NestJS + React)
Dashboard WebSocket is a learning-focused real-time analytics dashboard built using NestJS, Socket.IO (WebSockets), React, and Vite. The project demonstrates how to stream live data from a backend to a frontend dashboard using WebSockets, backed by a local MongoDB database.
Project Overview
The backend connects to MongoDB, seeds multi-year dummy data on startup, and continuously mutates that data using scheduled jobs. Updates are pushed to connected clients in real time via a Socket.IO gateway, while REST APIs are used only to fetch the initial dashboard state.
Key Features
• Real-time data streaming using Socket.IO WebSockets.
• Combination of REST APIs and WebSockets in a single application.
• Live-updating charts, cards, and tables without page refreshes.
• Automatic seeding and mutation of dashboard data.
• MongoDB-backed persistence for historical sales, market, and channel data.
• Clean separation of frontend and backend responsibilities.
Backend Architecture
The NestJS backend connects to a local MongoDB instance and manages multiple dashboard domains such as
sales, market values, and channel metrics. Scheduled tasks update the data periodically, and a dedicated
WebSocket gateway broadcasts changes to all connected clients in the /dashboard namespace.
Frontend Architecture
The React + Vite frontend fetches initial data using REST endpoints and then subscribes to WebSocket events for live updates. This approach ensures fast initial load times while keeping the UI fully synchronized with backend changes in real time.
Technology Stack
Frontend: React, Vite, Chart.js
Backend: NestJS, Socket.IO, MongoDB
Database: Local MongoDB
Real-Time: WebSockets (Socket.IO)
Data Behavior
Sales data is seeded across multiple years and continuously extended. Charts compare the latest 12 months against the previous 12 months, while total sales values are always calculated from the most recent year. MongoDB retains full historical data beyond what is displayed in the UI.
Source Code
View the complete source code on GitHub:
https://github.com/lochana0513/dashboard-websocket
Learning Focus
This project is intentionally built as a learning reference rather than a production system. It helps developers understand real-time application patterns, WebSocket communication in NestJS, frontend subscription handling in React, and MongoDB-backed dashboard architectures.
Related Projects
View all projects →
Hotel Booking Application (State Management - Redux Toolkit)
Dashboard WebSocket is a learning-focused real-time analytics dashboard built using NestJS, Socket.IO (WebSockets), React, and Vite. The project demonstrates how to stream live data from a backend to a frontend dashboard using WebSockets, backed by a local MongoDB database. Project Overview The backend connects to MongoDB, seeds multi-year dummy data on startup, and continuously mutates that data using scheduled jobs. Updates are pushed to connected clients in real time via a Socket.IO gateway, while REST APIs are used only to fetch the initial dashboard state. Key Features • Real-time data streaming using Socket.IO WebSockets. • Combination of REST APIs and WebSockets in a single application. • Live-updating charts, cards, and tables without page refreshes. • Automatic seeding and mutation of dashboard data. • MongoDB-backed persistence for historical sales, market, and channel data. • Clean separation of frontend and backend responsibilities. Backend Architecture The NestJS backend connects to a local MongoDB instance and manages multiple dashboard domains such as sales, market values, and channel metrics. Scheduled tasks update the data periodically, and a dedicated WebSocket gateway broadcasts changes to all connected clients in the /dashboard namespace. Frontend Architecture The React + Vite frontend fetches initial data using REST endpoints and then subscribes to WebSocket events for live updates. This approach ensures fast initial load times while keeping the UI fully synchronized with backend changes in real time. Technology Stack Frontend: React, Vite, Chart.js Backend: NestJS, Socket.IO, MongoDB Database: Local MongoDB Real-Time: WebSockets (Socket.IO) Data Behavior Sales data is seeded across multiple years and continuously extended. Charts compare the latest 12 months against the previous 12 months, while total sales values are always calculated from the most recent year. MongoDB retains full historical data beyond what is displayed in the UI. Source Code View the complete source code on GitHub: https://github.com/lochana0513/dashboard-websocket Learning Focus This project is intentionally built as a learning reference rather than a production system. It helps developers understand real-time application patterns, WebSocket communication in NestJS, frontend subscription handling in React, and MongoDB-backed dashboard architectures.
Azure Fullstack CI/CD Pipeline (GitHub Actions)
Dashboard WebSocket is a learning-focused real-time analytics dashboard built using NestJS, Socket.IO (WebSockets), React, and Vite. The project demonstrates how to stream live data from a backend to a frontend dashboard using WebSockets, backed by a local MongoDB database. Project Overview The backend connects to MongoDB, seeds multi-year dummy data on startup, and continuously mutates that data using scheduled jobs. Updates are pushed to connected clients in real time via a Socket.IO gateway, while REST APIs are used only to fetch the initial dashboard state. Key Features • Real-time data streaming using Socket.IO WebSockets. • Combination of REST APIs and WebSockets in a single application. • Live-updating charts, cards, and tables without page refreshes. • Automatic seeding and mutation of dashboard data. • MongoDB-backed persistence for historical sales, market, and channel data. • Clean separation of frontend and backend responsibilities. Backend Architecture The NestJS backend connects to a local MongoDB instance and manages multiple dashboard domains such as sales, market values, and channel metrics. Scheduled tasks update the data periodically, and a dedicated WebSocket gateway broadcasts changes to all connected clients in the /dashboard namespace. Frontend Architecture The React + Vite frontend fetches initial data using REST endpoints and then subscribes to WebSocket events for live updates. This approach ensures fast initial load times while keeping the UI fully synchronized with backend changes in real time. Technology Stack Frontend: React, Vite, Chart.js Backend: NestJS, Socket.IO, MongoDB Database: Local MongoDB Real-Time: WebSockets (Socket.IO) Data Behavior Sales data is seeded across multiple years and continuously extended. Charts compare the latest 12 months against the previous 12 months, while total sales values are always calculated from the most recent year. MongoDB retains full historical data beyond what is displayed in the UI. Source Code View the complete source code on GitHub: https://github.com/lochana0513/dashboard-websocket Learning Focus This project is intentionally built as a learning reference rather than a production system. It helps developers understand real-time application patterns, WebSocket communication in NestJS, frontend subscription handling in React, and MongoDB-backed dashboard architectures.
Fullstack Containerized Deployment with Azure ACR
Dashboard WebSocket is a learning-focused real-time analytics dashboard built using NestJS, Socket.IO (WebSockets), React, and Vite. The project demonstrates how to stream live data from a backend to a frontend dashboard using WebSockets, backed by a local MongoDB database. Project Overview The backend connects to MongoDB, seeds multi-year dummy data on startup, and continuously mutates that data using scheduled jobs. Updates are pushed to connected clients in real time via a Socket.IO gateway, while REST APIs are used only to fetch the initial dashboard state. Key Features • Real-time data streaming using Socket.IO WebSockets. • Combination of REST APIs and WebSockets in a single application. • Live-updating charts, cards, and tables without page refreshes. • Automatic seeding and mutation of dashboard data. • MongoDB-backed persistence for historical sales, market, and channel data. • Clean separation of frontend and backend responsibilities. Backend Architecture The NestJS backend connects to a local MongoDB instance and manages multiple dashboard domains such as sales, market values, and channel metrics. Scheduled tasks update the data periodically, and a dedicated WebSocket gateway broadcasts changes to all connected clients in the /dashboard namespace. Frontend Architecture The React + Vite frontend fetches initial data using REST endpoints and then subscribes to WebSocket events for live updates. This approach ensures fast initial load times while keeping the UI fully synchronized with backend changes in real time. Technology Stack Frontend: React, Vite, Chart.js Backend: NestJS, Socket.IO, MongoDB Database: Local MongoDB Real-Time: WebSockets (Socket.IO) Data Behavior Sales data is seeded across multiple years and continuously extended. Charts compare the latest 12 months against the previous 12 months, while total sales values are always calculated from the most recent year. MongoDB retains full historical data beyond what is displayed in the UI. Source Code View the complete source code on GitHub: https://github.com/lochana0513/dashboard-websocket Learning Focus This project is intentionally built as a learning reference rather than a production system. It helps developers understand real-time application patterns, WebSocket communication in NestJS, frontend subscription handling in React, and MongoDB-backed dashboard architectures.