# 07. System Architecture

The system uses MVC architecture on the backend and a component-based React frontend.

## Backend MVC Structure

- Models: Define MongoDB collections and validation rules.
- Controllers: Contain business logic for authentication and CRUD operations.
- Routes: Define API endpoints.
- Middleware: Protect routes using session authentication.
- Config: Contains MongoDB database connection.

## Frontend Structure

- api: Contains Axios API request files.
- components: Contains reusable layout and message components.
- pages: Contains main system pages.

## System Flow

1. The user logs in from the React frontend.
2. The backend checks username and encrypted password.
3. If login is successful, a session is created.
4. The user can access protected pages.
5. React sends requests to Express API routes using Axios.
6. Controllers process requests and use Mongoose models to communicate with MongoDB.
7. Data is returned to the frontend and displayed in forms, tables, and reports.

