Home

Relevant source files

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

• README.md
• frontend/src/pages/Public_page.js
• frontend/src/App.js
• backend/src/server.js
• package.json
• frontend/src/components/common/Layout.js
• frontend/public/index.html

The Home page, implemented as the Public_page component, serves as the primary public-facing landing page for the AirZen application. It is a single-page interface designed to introduce the air quality monitoring system to prospective users. The page details the system's purpose, showcases its features, presents service pricing, and provides a contact form.

This page is built using the REMN stack (React, Express, MongoDB, Node.js) and acts as the main entry point before a user proceeds to authentication routes like Sign In or Register. It features a self-contained layout, distinct from the dashboard layout used for authenticated users.

Sources: README.md:3-13, frontend/src/pages/Public_page.js, frontend/src/App.js:25-27

Architecture and Routing

The application's routing is managed by react-router-dom. The Public_page component is explicitly mapped to the root path /, making it the default page for visitors. This is distinct from protected routes, which are nested within Layout or LayoutAdmin components that provide a consistent sidebar and navigation structure for logged-in users.

Sources: frontend/src/App.js:25-27, frontend/src/components/common/Layout.js

Routing Flow

The diagram below illustrates how a user request to the root URL is routed to the Public_page component, while other paths require authentication and are rendered within different layouts.

Page Structure

The Public_page is a single, scrollable page divided into distinct sections. Navigation is handled via a fixed header that allows users to smoothly scroll to the desired section.

Sources: frontend/src/pages/Public_page.js:77-123

Component Sections

The page is composed of several logical sections, each identified by an HTML id for navigation.

Section ID	Title	Purpose
home	Home	The main hero section introducing the system.
about	About AirZen	Describes the mission and provides key statistics.
why	Why Air Quality Matters	Explains the importance of clean air for health and productivity.
features	Features	Showcases core functionalities like real-time data, alerts, and configuration.
prices	Pricing	Displays the different service tiers available.
contact	Contact Us	A form for users to send their contact information.

Sources: frontend/src/pages/Public_page.js:126, 198, 321, 468, 514, 589

The following diagram shows the high-level structure of the Public_page component.

Key Functionality

Dynamic Header Navigation

The header is fixed to the top of the viewport and contains navigation links. The component uses React hooks (useState, useEffect) to track the user's scroll position and dynamically highlight the active navigation link. The lodash.throttle function is employed to optimize the scroll event handler, preventing performance issues.

Sources: frontend/src/pages/Public_page.js:20-70

// frontend/src/pages/Public_page.js:23-52
useEffect(() => {
  let isScrolling = false;

  const handleScroll = () => {
    if (isScrolling) return;
    isScrolling = true;

    window.requestAnimationFrame(() => {
      const sections = ["home", "about", "features", "prices", "contact"];
      const current = sections.find((section) => {
        const element = document.getElementById(section);
        if (element) {
          const rect = element.getBoundingClientRect();
          return rect.top <= 100 && rect.bottom >= 100;
        }
        return false;
      });

      if (current) {
        setActiveItem(current);
      }

      isScrolling = false;
    });
  };

  const throttledScroll = throttle(handleScroll, 100);

  window.addEventListener("scroll", throttledScroll);
  return () => {
    window.removeEventListener("scroll", throttledScroll);
    throttledScroll.cancel(); // Cleanup throttle
  };
}, []);

User Onboarding Flow

The "Bắt đầu" (Get Started) button in the home section is the primary call-to-action. It uses the useNavigate hook from react-router-dom to redirect the user to the /signin page, initiating the authentication and onboarding process.

The diagram below shows this user flow.

Contact Form

The contact section contains a simple HTML form for lead generation. It collects the user's name, email, and phone number. The form does not contain client-side submission logic in the provided file; it relies on standard form submission behavior.

Sources: frontend/src/pages/Public_page.js:589-614

Technology Stack

The project is a full-stack application based on the REMN stack.

Category	Technology	Description
Frontend	ReactJS	For building the user interface.
	Tailwind CSS	For styling the components.
Backend	Node.js	JavaScript runtime environment.
	Express.js	Web framework for building APIs.
Database	MongoDB	NoSQL database for data storage.

Sources: README.md:5-13, package.json:11-19

Backend System Overview

The backend is an Express.js server that provides the API for the application. It connects to a MongoDB database and is configured to handle requests from the frontend.

Sources: backend/src/server.js

Server Configuration

Key configurations in backend/src/server.js include:

• Database Connection: Connects to MongoDB using Mongoose with the URI from environment variables.
• CORS: Configured to accept requests from http://localhost:3000 (the default React development server URL) and the production frontend URL.
• API Routes: Defines base paths for different API modules:
  • /api/auth: Authentication-related endpoints.
  • /api/taikhoan: Account management endpoints.
  • /api/thietbi: Device management endpoints.

Sources: backend/src/server.js:19-28, 44-55, 100-102

User Authentication Sequence

When a user navigates from the Public_page to sign in, the frontend application interacts with the backend's /api/auth endpoints.

This sequence diagram illustrates the high-level interaction.