Project Structure

Relevant source files

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

• README.md
• package.json
• backend/package.json
• backend/src/server.js
• backend/src/models/User.js
• backend/src/routes/users.js
• frontend/src/App.js
• frontend/src/components/common/Layout.js
• frontend/src/components/common/LayoutAdmin.js
• frontend/public/index.html

This document outlines the architecture and directory structure of the CDIO4 project, a full-stack application built on the REMN (React, Express, MongoDB, Node.js) stack. The project is organized into two main parts: a frontend application built with React and a backend API server built with Express.js.

The structure is designed to be modular and scalable, with a clear separation of concerns between the client-side and server-side code. This facilitates independent development, testing, and deployment of the frontend and backend components.

Overall Directory Structure

The project root is divided into distinct directories, each with a specific responsibility. The README.md file provides a high-level overview of this structure.

This diagram shows the main directories at the root of the project.
Sources: README.md:13-39

Root Level

The root directory contains configuration for managing both the frontend and backend applications concurrently.

File/Directory	Description
frontend/	Contains the React frontend application.
backend/	Contains the Express.js backend API server.
database/	Intended for database management scripts like migrations and seeds.
docs/	Intended for project documentation, including API and deployment guides.
package.json	Manages root-level dependencies and provides scripts to run both client and server together.

Sources: README.md:13-39, package.json

The root package.json uses concurrently to simplify the development workflow, allowing a single command to start both the backend and frontend servers.

Script	Description
dev	Runs both the backend server (npm run server) and the frontend client (npm run client) concurrently.
server	Navigates to the backend directory and runs its dev script (nodemon src/server.js).
client	Navigates to the frontend directory and runs its start script.
install-all	Installs dependencies at the root, backend, and frontend levels.

Sources: package.json:6-12

Backend (backend/)

The backend is a Node.js application using the Express.js framework to provide a RESTful API. It follows a structure similar to the Model-View-Controller (MVC) pattern.

Sources: README.md:23-31, backend/src/server.js

Backend Architecture

The backend/src/ directory is organized by feature and responsibility.

Directory	Description
routes/	Defines API endpoints and maps them to controller functions.
controllers/	Contains the business logic for each route.
models/	Defines MongoDB data schemas using Mongoose.
middleware/	Holds custom middleware for tasks like authentication and validation.
services/	Contains reusable business logic services.
config/	Stores configuration files for the database, environment variables, etc.
utils/	Contains utility functions.

Sources: README.md:24-31

Server Entry Point (backend/src/server.js)

The backend/src/server.js file is the entry point for the backend application. It performs the following sequence of operations:

1. Imports necessary libraries (Express, Mongoose, CORS, dotenv).
2. Initializes the Express application.
3. Connects to the MongoDB database using the URI from environment variables.
4. Applies essential middleware, including express.json() for parsing JSON bodies and cors for enabling cross-origin requests from the frontend.
5. Registers API route handlers. For example, it mounts authentication routes at /api/auth and user routes at /api/users.
6. Starts the server, listening for requests on the configured port.

Sources: backend/src/server.js

The following diagram illustrates the server startup flow.

Database Models (backend/src/models/)

Data structures are defined using Mongoose schemas. The User.js file is a representative example, defining the schema for user documents in the database.

The User schema includes fields for name, email, password, role, and isActive. It also contains middleware to automatically hash passwords before saving a user document and instance methods like comparePassword for authentication.

Sources: backend/src/models/User.js

This class diagram shows the structure of the User model.

API Routes (backend/src/routes/)

Routes are defined in separate files within the routes directory. For instance, users.js defines CRUD operations for user management under the base path /api/users. These routes are protected by authentication (protect) and authorization (authorize) middleware.

Example routes from users.js:

• GET /: Get all users (Admin only).
• GET /:id: Get a single user by ID.
• PUT /:id: Update a user.
• DELETE /:id: Delete a user (Admin only).

Sources: backend/src/routes/users.js:40-55, backend/src/server.js:84-86

Frontend (frontend/)

The frontend is a single-page application (SPA) built with React. Its structure is component-based and organized for maintainability.

Sources: README.md:14-22, frontend/src/App.js

Frontend Architecture

The frontend/src/ directory contains the core application source code.

Directory	Description
public/	Contains static assets like index.html, favicons, and manifests.
src/components/	Contains reusable React components, with a common/ subdirectory for shared components like Layout, Sidebar, and Footer.
src/pages/	Contains top-level components that represent application pages (e.g., Dashboard.js, Public_page.js).
src/hooks/	Intended for custom React hooks.
src/services/	Intended for modules that handle API calls and other external services.
src/styles/	Contains global CSS files, such as App.css and index.css.
src/context/	Intended for React Context providers for global state management.

Sources: README.md:15-22, frontend/src/components/common/Layout.js, frontend/src/pages/Public_page.js

Application Entry Point and Routing (frontend/src/App.js)

The main entry point for the React application is frontend/public/index.html, which contains the root DOM element <div id="root"></div>.

The React application itself is bootstrapped in frontend/src/index.js (not provided, but inferred), which renders the App component. The App.js file defines the application's routing structure using react-router-dom.

Routes are categorized into:

• Public Routes: Accessible to everyone (e.g., /, /signin).
• Protected Routes: Require user authentication (e.g., /dashboard, /air-quality). These are wrapped in a ProtectedRoute component.
• Admin Routes: Require administrator privileges (e.g., /admin/overview, /admin/users). These are wrapped in a RequireAdmin component.

Sources: frontend/public/index.html:19, frontend/src/App.js:25-53.

The diagram below shows the high-level routing structure.

Layout and Components

The application uses shared layout components to maintain a consistent UI.

• Layout.js: A standard layout for authenticated users, which includes a Sidebar and a Navbar.
• LayoutAdmin.js: A similar layout for the admin section, using SidebarAdmin.

These layouts render the appropriate page component via the <Outlet /> component from react-router-dom. This structure ensures that common UI elements like navigation are not duplicated across pages.

Sources: frontend/src/components/common/Layout.js, frontend/src/components/common/LayoutAdmin.js