Getting Started

Relevant source files

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

• README.md
• package.json
• backend/package.json
• frontend/package.json
• backend/src/server.js
• frontend/src/App.js
• frontend/public/index.html
• backend/src/models/User.js
• frontend/src/index.js

This guide provides a comprehensive overview of the CDIO4 (AirZen) project, including its architecture, system requirements, and instructions for local setup and development. The project is a full-stack web application built using the REMN stack (ReactJS, Express, MongoDB, NodeJS) designed as an air quality monitoring system. It features a React frontend for the user interface and an Express.js backend server that connects to a MongoDB database.

The application, named "AirZen", aims to provide a system for monitoring and controlling air quality in living spaces. Key features include real-time data collection from IoT devices, user alerts for unsafe thresholds, and detailed data reporting.

Sources: README.md, frontend/src/pages/Public_page.js:183-189, frontend/public/index.html:15

System Architecture

The project follows a classic client-server architecture, divided into a frontend (React application) and a backend (Express.js API server).

Sources: README.md:7-12

The diagram below illustrates the high-level interaction between the main components.

Project Structure

The repository is organized into distinct directories for the frontend, backend, and other project-related files.

System Requirements

To run this project, your development environment must meet the following requirements:

Software	Required Version	Source File
Node.js	>= 16.0.0	README.md:47, package.json:32, backend/package.json:32
npm	>= 8.0.0	package.json:33
MongoDB	>= 5.0	README.md:49
Git	Not specified	README.md:50

Sources: README.md:46-50, package.json:31-34, backend/package.json:31-33

Installation and Setup

Follow these steps to get the project running on your local machine.

1. Clone the Repository

First, clone the project from its Git repository.

git clone <repository-url>
cd remn-fullstack-project

Source: README.md:54-57

2. Install Dependencies

The project uses a root package.json to install dependencies for both the frontend and backend concurrently.

npm run install-all

This command executes npm install in the root, backend, and frontend directories.

Source: package.json:11

3. Backend Setup

The backend is an Express.js server that connects to a MongoDB database.

1. Navigate to the backend directory: cd backend

2. Create a .env file by copying the example: cp .env.example .env

3. Edit the .env file and configure your environment variables, particularly MONGODB_URI and BACKEND_PORT.

   # Example .env content
   MONGODB_URI=mongodb://localhost:27017/your_db_name
   BACKEND_PORT=5000
   FRONTEND_URL=http://localhost:3000
   

4. Start the development server:

   npm run dev
   

   This command uses nodemon to run src/server.js and will automatically restart the server on file changes. The server will be available at http://localhost:5000 (or the port you specified).

Sources: README.md:59-64, backend/package.json:7, backend/src/server.js:12, 20

4. Frontend Setup

The frontend is a React application.

1. Navigate to the frontend directory: cd frontend

2. Start the development server:

   npm start
   

   This will launch the React application in your default browser, typically at http://localhost:3000. The React app is mounted into the <div id="root"></div> element in public/index.html.

Sources: README.md:66-69, frontend/package.json:18, frontend/public/index.html:18, frontend/src/index.js:15

5. Running Both Servers Concurrently

From the root directory, you can start both the backend and frontend servers with a single command:

npm run dev

This script uses concurrently to execute the server (npm run dev in backend) and client (npm start in frontend) scripts simultaneously.

Source: package.json:7

The following sequence diagram illustrates the npm run dev startup process.

Available Scripts

The project includes several npm scripts to streamline development, testing, and building.

Root Scripts

These scripts are run from the project's root directory.

Script	Description
dev	Runs both backend and frontend development servers concurrently.
server	Runs the backend development server.
client	Runs the frontend development server.
build	Builds the frontend application for production.
install-all	Installs dependencies for root, backend, and frontend.

Source: package.json:6-12

Backend Scripts

These scripts are run from the backend directory.

Script	Description
start	Runs the production server (node src/server.js).
dev	Runs the development server with nodemon.

Source: backend/package.json:6-7

Frontend Scripts

These scripts are run from the frontend directory.

Script	Description
start	Starts the React development server.
build	Builds the app for production to the build folder.
test	Launches the test runner in interactive watch mode.
eject	Removes the single build dependency from the project.

Source: frontend/package.json:18-21