Configuration

Relevant source files

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

• backend/.env.example
• frontend/.env
• backend/src/server.js
• frontend/package.json
• frontend/tailwind.config.js
• frontend/src/pages/AirQualityIndexPage.jsx
• package.json

Configuration in the CDIO4 project is managed at multiple levels, separating environment-specific variables from application logic and build settings. The backend relies on .env files loaded by dotenv for server and database settings. The frontend uses a combination of package.json for development proxying, tailwind.config.js for styling, and in-code objects for feature-specific parameters like air quality metric thresholds.

This separation allows developers to run the application in different environments (development, production) without changing the source code. Project-level scripts defined in the root package.json orchestrate the startup of both frontend and backend services.

Backend Configuration

The backend server's configuration is primarily managed through environment variables defined in a .env file, which is loaded at runtime.

Sources: backend/src/server.js, backend/.env.example

Environment Variables

The backend uses the dotenv library to load environment variables from a .env file into process.env. The backend/.env.example file serves as a template for the required variables.

The following diagram illustrates the loading process of environment variables in the backend server.

The key configuration variables for the backend are:

Variable	Description	Example Value	Source File
MONGODB_URI	The connection string for the MongoDB database.	mongodb://localhost:27017/remn-db	backend/.env.example:1
BACKEND_PORT	The port on which the Express server will run. Defaults to 5000 if not set.	5001	backend/.env.example:4
FRONTEND_URL	The URL of the frontend application, used for CORS configuration.	http://localhost:3000	backend/.env.example:7
JWT_SECRET	A secret key for signing JSON Web Tokens (JWT) for authentication.	your_jwt_secret_key_here	backend/.env.example:10
JWT_EXPIRES_IN	The expiration time for JWTs.	30d	backend/.env.example:13

Sources: backend/.env.example, backend/src/server.js:12

CORS Configuration

The server is configured to handle Cross-Origin Resource Sharing (CORS) to allow requests from specific origins. The allowed origins include localhost ports for development and the FRONTEND_URL from the environment variables.

// backend/src/server.js:34-43
app.use(
  cors({
    origin: [
      "http://localhost:3000",
      "http://localhost:3001",
      process.env.FRONTEND_URL,
    ].filter(Boolean), // Loại bỏ undefined
    credentials: true,
    methods: ["GET", "POST", "PUT", "DELETE", "OPTIONS"],
    allowedHeaders: ["Content-Type", "Authorization"],
  })
);

This configuration is critical for allowing the React frontend to communicate with the backend API during development and in production.

Sources: backend/src/server.js:34-43

Frontend Configuration

The frontend application, built with React, uses several files for its configuration, including package.json for development settings and tailwind.config.js for UI styling.

Development Proxy

During development, the frontend uses a proxy to forward API requests from the React development server to the backend server. This is configured in frontend/package.json to avoid CORS issues.

// frontend/package.json:30
"proxy": "http://localhost:5001"

This diagram shows how the proxy redirects API calls.

Styling Configuration

The project uses Tailwind CSS for styling. The configuration file frontend/tailwind.config.js specifies how Tailwind should process the project's files and enables features like dark mode.

// frontend/tailwind.config.js:2-7
module.exports = {
  darkMode: "class",
  content: ["./src/**/*.{js,jsx,ts,tsx}"],
  theme: { extend: {} },
  plugins: [],
};

The darkMode: "class" setting enables manual dark mode toggling by adding or removing a dark class on a parent element (typically <html> or <body>).

Sources: frontend/tailwind.config.js:3

Application-Level Configuration

The AirQualityIndexPage contains significant in-code configuration for defining the properties and display rules for various air quality metrics.

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

The METRICS object defines the behavior for each measurable parameter.

// frontend/src/pages/AirQualityIndexPage.jsx:11-18
const METRICS = {
  PM25: {
    key: "PM2.5",
    unit: "µg/m³",
    baseline: 15,
    footer:
      "Khuyến nghị WHO: PM2.5 (24h trung bình) ≤ 15 µg/m³; hàng năm ≤ 5 µg/m³.",
    healthy: (v) => v <= 15,
  },
// ... other metrics

This configuration drives the chart rendering, status badges, and informational footers on the page.

Metric Key	key (Display Name)	unit	baseline (Threshold)	healthy (Function)
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-47

The Y_DOMAIN object provides configuration for the Y-axis of the charts, ensuring consistent and readable visualizations for each metric.

Sources: frontend/src/pages/AirQualityIndexPage.jsx:49-55

Project-Level Scripts

The root package.json file contains scripts to manage and run the entire full-stack application. It uses concurrently to run the backend and frontend servers in parallel with a single command.

Script	Command	Description
dev	concurrently "npm run server" "npm run client"	Runs both the backend and frontend development servers at the same time.
server	cd backend && npm run dev	Navigates to the backend directory and starts its development server.
client	cd frontend && npm start	Navigates to the frontend directory and starts the React development server.
install-all	npm install && npm run install-server && npm run install-client	Installs dependencies for the root, backend, and frontend projects.

Sources: package.json:6-12