Data Flow

Relevant source files

The following files were used as context for generating this wiki page:

• backend/src/server.js
• frontend/src/pages/Dashboard.jsx
• frontend/src/pages/AirQualityIndexPage.jsx
• frontend/src/pages/History.jsx
• frontend/src/pages/AdminOverview.jsx
• frontend/src/components/common/QualityChart.jsx

This document outlines the data flow within the AirZen application, a full-stack project built on the REMN stack (React, Express, MongoDB, Node.js). It details how data, primarily from air quality sensors, is handled, from the backend API definitions to its consumption and visualization on the frontend user interface.

The current implementation across the frontend heavily utilizes statically defined mock data or client-side data generation for demonstration and UI development purposes. This serves as a placeholder for future integration with live backend APIs that would fetch real-time data from the MongoDB database.

High-Level Architecture

The application follows a standard client-server architecture. The React frontend communicates with the Express.js backend via a RESTful API. The backend is responsible for business logic and interacting with the MongoDB database.

This diagram illustrates the general flow of data from the database to the end-user.

Backend: API and Server

The backend is built with Express.js and serves as the entry point for all data requests from the client. It connects to a MongoDB database and exposes several API endpoints.

Sources: backend/src/server.js

Server Configuration

The main server entry point is backend/src/server.js. It performs the following key actions:

1. Initializes the Express application.
2. Connects to the MongoDB database using Mongoose, configured via environment variables (MONGODB_URI).
3. Configures Cross-Origin Resource Sharing (CORS) to allow requests from the frontend URL (http://localhost:3000, http://localhost:3001).
4. Applies middleware for parsing JSON and URL-encoded request bodies.
5. Registers the main API routes.

Sources: backend/src/server.js:11-54

API Routes

The server defines several base routes for different resources. The data related to devices and sensors is expected to be handled under the /api/thietbi endpoint.

Method	Endpoint	Description	Source File
use	/api/auth	Handles authentication routes.	backend/src/server.js:101
use	/api/taikhoan	Handles user account routes.	backend/src/server.js:102
use	/api/thietbi	Handles device and sensor data routes.	backend/src/server.js:103

The following sequence diagram shows a hypothetical request from the frontend to fetch device data.

Frontend: Data Consumption and Visualization

The frontend React application contains several pages that consume and display data. In the current state, these pages primarily use hardcoded or randomly generated data for UI rendering.

Dashboard Page

The Dashboard.jsx page provides a summary view of sensor data. It uses a static array of mock data to populate its display components.

Data Structure

The data is hardcoded in the sensorData array.

// frontend/src/pages/Dashboard.jsx:8-13
const sensorData = [
    { title: "CO₂", value: 735, unit: "ppm", percent: 25 },
    { title: "PM2.5", value: 18, unit: "µg/m³", percent: 40 },
    { title: "Gas", value: 0.62, unit: "ppm", percent: 35 },
    { title: "Nhiệt độ", value: 28.5, unit: "°C", percent: 55 },
    { title: "Độ ẩm", value: 70, unit: "%", percent: 70 },
];

Sources: frontend/src/pages/Dashboard.jsx:8-13

This data is then mapped to CardData components for display. The page also includes OverviewChart and QualityChart components, which likely consume similar data structures.

Sources: frontend/src/pages/Dashboard.jsx:18-24

Air Quality Index Page

The AirQualityIndexPage.jsx offers a more interactive data visualization experience. It allows users to select different air quality metrics and time ranges, and it generates random data to simulate real-time updates.

Data Flow Logic

1. A user selects a metric (e.g., PM2.5, CO2) or a time range from a dropdown.
2. The useState hooks (metricKey, range) are updated, triggering a re-render.
3. The useMemo hook recalculates the chart data by calling genData(metricKey, range).
4. The genData function generates a new array of random data points based on the selected metric.
5. The recharts LineChart component re-renders with the new data.

Metric Configuration

The page defines a METRICS object to configure properties for each type of sensor data, including units, baseline values for health recommendations, and helper functions.

Metric	Key	Unit	Baseline	Healthy Condition
PM25	PM2.5	µg/m³	15	v <= 15
CO2	CO₂	ppm	1000	v <= 1000
TEMP	Nhiệt độ	°C	26	v >= 20 && v <= 26
HUMI	Độ ẩm	%	60	v >= 40 && v <= 60
GAS	Khí gas	ppm	50	v <= 50

Sources: frontend/src/pages/AirQualityIndexPage.jsx:11-53

History Page

The History.jsx page displays historical sensor readings in a table. Similar to the dashboard, it uses a hardcoded array (originalData) for demonstration.

Features:

• Data Filtering: Users can filter the displayed data by day, week, or month. This logic is handled client-side by slicing the originalData array.
• CSV Export: The handleExport function converts the currently displayed data into a CSV string and triggers a file download.

// frontend/src/pages/History.jsx:16-25
const originalData = [
    { time: "01:00", temp: 27, humid: 20, co2: 702, pm25: 14, gas: 1, status: "Tốt" },
    { time: "02:00", temp: 26, humid: 22, co2: 682, pm25: 10, gas: 1, status: "Tốt" },
    { time: "03:00", temp: 26, humid: 22, co2: 713, pm25: 12, gas: 1, status: "Tốt" },
    // ... more data
];

Sources: frontend/src/pages/History.jsx:16-25, frontend/src/pages/History.jsx:30-35, frontend/src/pages/History.jsx:37-55

Admin Overview Page

The AdminOverview.jsx page presents high-level statistics for administrators, such as user counts and device statuses. It also uses static data for its charts and summary cards.

Data Structures:

• stats: An array of objects for the top summary cards.
• userStats: Data for a BarChart showing new users over time.
• deviceStatus: Data for a PieChart showing the proportion of online vs. offline devices.

This data is passed directly to recharts components (BarChart, PieChart) for visualization.

Sources: frontend/src/pages/AdminOverview.jsx:18-38

Summary

The data flow in the CDIO4 project is designed around a classic REMN stack architecture. The Express.js backend is set up to serve data via REST APIs, connecting to a MongoDB database. The React frontend features several dashboard and reporting pages designed to visualize this data. Currently, the frontend components heavily rely on mock data defined directly within the components, which serves as a robust placeholder for future development and integration with the live backend services. This approach allows for parallel development of the frontend UI and backend API.