Real-Time Log Dashboard

This is a full-stack application that visualizes real-time streaming data. The project uses a Python/FastAPI backend to generate and stream simulated log data over a WebSocket connection. The React frontend receives this data and uses the Recharts library to render a live, auto-updating line chart of log frequency.

---

Demo

In the demo above, the React frontend maintains a persistent WebSocket connection to the Python backend, receiving a continuous stream of JSON data which is then used to update the chart and the live log panel in real-time.

---

Key Features

• Real-Time Data Streaming: Utilizes WebSockets for a persistent, low-latency connection between the server and client.
• Live Chart Visualization: Employs the Recharts library to render a dynamic line chart that updates every two seconds.
• Full-Stack Architecture: Features a distinct Python backend for data generation and a React frontend for the user interface.
• Structured Data Handling: Transmits data efficiently using JSON, which is parsed and managed in the frontend's state.

---

Technologies Used

• Frontend: React, Vite, Recharts
• Backend: Python, FastAPI, WebSockets
• Core Concepts: Real-Time Data Streaming, Data Visualization, Full-Stack Development

---

How It Works

1. The FastAPI (Python) backend runs a process that generates simulated log data (e.g., INFO, WARNING, ERROR).
2. It serves this data over a /ws/log WebSocket endpoint.
3. The React frontend establishes a connection to this endpoint when the component mounts.
4. As JSON data packets are received, the frontend updates two state variables: one for the raw log text and another for the aggregated counts of each log level.
5. A timer periodically takes the aggregated counts and adds them as a new data point to the Recharts line chart, creating the time-series visualization.