# amansinhaa110/codealpha_project_management_tool architecture

> Architecture diagram of the GitHub repository amansinhaa110/codealpha_project_management_tool, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-06-26). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/amansinhaa110/codealpha_project_management_tool
- Repository: https://github.com/amansinhaa110/codealpha_project_management_tool

## Overview

1. **Overall shape**
   - This is a small **full-stack Node.js monolith**: one Express server handles HTTP requests, serves the browser assets, manages authentication/session state, and hosts the Socket.io realtime channel.
   - The browser client is delivered from `public/` and talks back to the same server for both standard requests and realtime events.

2. **Main runtime boundary**
   - The backend runtime is **Node.js + Express** in `server.js`.
   - The frontend is a static client in `public/index.html`, `public/app.js`, and `public/styles.css`.
   - There is no separate frontend build pipeline or separate API service visible in the repo; the server is the central integration point.

3. **Persistence layer**
   - `database.js` is the dedicated data-access boundary.
   - The app uses a local **SQLite database** file, `pmo.db`, via **better-sqlite3**.
   - This suggests synchronous, embedded persistence rather than a remote database service, which keeps deployment simple and local-state oriented.

4. **Authentication and session management**
   - The README indicates **bcryptjs** for password hashing and **express-session** for session persistence.
   - That means the app likely authenticates users server-side, stores session identifiers in cookies, and authorizes access to PMO features using session state rather than token-based auth.
   - Authentication is therefore part of the server boundary, not the client.

5. **Realtime collaboration path**
   - **Socket.io** is the key realtime subsystem.
   - The server likely publishes project/task changes through socket events so connected clients receive immediate updates without polling.
   - This creates a second communication channel alongside normal HTTP: browser-to-server for setup/actions, and server-to-browser for broadcast updates.

6. **Client responsibilities**
   - `public/app.js` is the main browser-side control layer.
   - It likely handles page interactions, form submissions, socket connection setup, and DOM updates when collaborative state changes.
   - `public/index.html` provides the UI shell, while `public/styles.css` defines presentation only.

7. **Server responsibilities**
   - `server.js` is the orchestration layer that ties together Express routes, session middleware, authentication logic, Socket.io setup, and database operations.
   - It also serves the static frontend files, so the same process owns both the UI delivery and backend business logic.

8. **Data flow: login/session**
   - User credentials enter through the browser UI.
   - The server validates them against stored user records, compares hashed passwords, and creates a session.
   - Subsequent requests and socket connections rely on that session context to identify the user.

9. **Data flow: project/task updates**
   - A user action in the browser triggers an HTTP request or socket message to the server.
   - The server writes changes to SQLite through `database.js`.
   - After persistence, the server broadcasts the update via Socket.io so other connected clients refresh their view.

10. **Deployment and operational boundary**
   - The app is designed to run locally with `npm start` or `node server.js` on port 3000.
   - Because the database is a file in the repo root, the system has a **local embedded state** boundary: app code and data live together.
   - This makes the architecture easy to diagram as a single node hosting web, realtime, auth, and storage concerns.

11. **Repository-level components to show in a diagram**
   - One box for **Browser/UI** (`public/*`)
   - One box for **Express/Socket.io server** (`server.js`)
   - One box for **Data access** (`database.js`)
   - One box for **SQLite file** (`pmo.db`)
   - One boundary for **session/auth middleware** sitting inside the server process
   - Arrows for **HTTP/static asset delivery**, **session-protected actions**, and **Socket.io broadcast updates**

12. **Architectural takeaway**
   - The repo implements a **single-process collaborative app** where persistence, authentication, and realtime coordination are centralized on the Node.js server, and the browser acts as a thin interactive client consuming both HTTP and socket-driven updates.

Main entry points: [`server.js`](https://github.com/amansinhaa110/codealpha_project_management_tool/blob/master/server.js) (Server app), [`public/app.js`](https://github.com/amansinhaa110/codealpha_project_management_tool/blob/master/public/app.js) (Client logic), [`database.js`](https://github.com/amansinhaa110/codealpha_project_management_tool/blob/master/database.js) (Data access), [`public/index.html`](https://github.com/amansinhaa110/codealpha_project_management_tool/blob/master/public/index.html) (UI shell)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_client["Browser UI"]
  node_public_index["UI shell<br/>html client<br/>[index.html]"]
  node_public_app["Client logic<br/>browser js<br/>[app.js]"]
  node_public_styles["Styles<br/>css<br/>[styles.css]"]
end

subgraph group_server["Node Server"]
  node_server_main["Server app<br/>express server<br/>[server.js]"]
  node_server_auth["Auth session<br/>session middleware<br/>[server.js]"]
  node_server_realtime(("Realtime channel<br/>socket.io<br/>[server.js]"))
end

subgraph group_data["Local State"]
  node_database_js["Data access<br/>sqlite access<br/>[database.js]"]
  node_pmo_db[("SQLite DB<br/>embedded database<br/>[pmo.db]")]
end

node_server_main -->|"serves"| node_public_index
node_server_main -->|"serves"| node_public_app
node_server_main -->|"serves"| node_public_styles
node_public_app -->|"HTTP actions"| node_server_main
node_public_app -->|"connects"| node_server_realtime
node_server_main -->|"uses"| node_server_auth
node_server_auth -->|"reads/writes"| node_database_js
node_server_main -->|"uses"| node_database_js
node_database_js -->|"persists"| node_pmo_db
node_server_main -->|"broadcasts"| node_server_realtime
node_server_realtime -->|"pushes"| node_public_app
node_server_auth -.->|"gates"| node_public_app

click node_public_index "https://github.com/amansinhaa110/codealpha_project_management_tool/blob/master/public/index.html"
click node_public_app "https://github.com/amansinhaa110/codealpha_project_management_tool/blob/master/public/app.js"
click node_public_styles "https://github.com/amansinhaa110/codealpha_project_management_tool/blob/master/public/styles.css"
click node_server_main "https://github.com/amansinhaa110/codealpha_project_management_tool/blob/master/server.js"
click node_server_auth "https://github.com/amansinhaa110/codealpha_project_management_tool/blob/master/server.js"
click node_server_realtime "https://github.com/amansinhaa110/codealpha_project_management_tool/blob/master/server.js"
click node_database_js "https://github.com/amansinhaa110/codealpha_project_management_tool/blob/master/database.js"
click node_pmo_db "https://github.com/amansinhaa110/codealpha_project_management_tool/blob/master/pmo.db"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_public_index,node_public_app,node_public_styles toneBlue
class node_server_main,node_server_auth,node_server_realtime toneAmber
class node_database_js,node_pmo_db toneMint
```

## Components

### Browser UI

Static frontend delivered by the Node server

- [UI shell](https://github.com/amansinhaa110/codealpha_project_management_tool/blob/master/public/index.html): html client · Main page markup for the browser app · `public/index.html`
- [Client logic](https://github.com/amansinhaa110/codealpha_project_management_tool/blob/master/public/app.js): browser js · Handles interactions, requests, and live updates · `public/app.js`
- [Styles](https://github.com/amansinhaa110/codealpha_project_management_tool/blob/master/public/styles.css): css · Presentation layer for the browser UI · `public/styles.css`

### Node Server

Express app, auth, and realtime coordination

- [Server app](https://github.com/amansinhaa110/codealpha_project_management_tool/blob/master/server.js): express server · HTTP server and process-level orchestration · `server.js`
- [Auth session](https://github.com/amansinhaa110/codealpha_project_management_tool/blob/master/server.js): session middleware · Password validation, login state, and session-backed access control · `server.js`
- [Realtime channel](https://github.com/amansinhaa110/codealpha_project_management_tool/blob/master/server.js): socket.io · Pushes updates to connected browsers · `server.js`

### Local State

Embedded persistence and stored application data

- [Data access](https://github.com/amansinhaa110/codealpha_project_management_tool/blob/master/database.js): sqlite access · Repository boundary for reading and writing app data · `database.js`
- [SQLite DB](https://github.com/amansinhaa110/codealpha_project_management_tool/blob/master/pmo.db): embedded database · Local persistent application state · `pmo.db`

## Connections

- Server app → UI shell: serves · Delivers the browser shell and static assets
- Server app → Client logic: serves · Delivers the browser client script
- Server app → Styles: serves · Delivers the stylesheet
- Client logic → Server app: HTTP actions · Sends user requests and form submissions
- Client logic → Realtime channel: connects · Opens the Socket.io client channel
- Server app → Auth session: uses · Applies login and session checks to requests
- Auth session → Data access: reads/writes · Validates users and persists session-related state
- Server app → Data access: uses · Coordinates data operations through the data layer
- Data access → SQLite DB: persists · Stores application records in the local SQLite file
- Server app → Realtime channel: broadcasts · Emits collaboration updates after changes
- Realtime channel → Client logic: pushes · Delivers live updates to connected clients
- Auth session → Client logic: gates · Restricts client actions to authenticated sessions