# shalini-576-cse/shaliniportfolio05 architecture

> Architecture diagram of the GitHub repository shalini-576-cse/shaliniportfolio05, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-09-27). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/shalini-576-cse/shaliniportfolio05
- Repository: https://github.com/shalini-576-cse/shaliniportfolio05

## Overview

Shalini Portfolio is a static personal portfolio served by an Express backend, with optional MongoDB-backed contact submissions and project listings. Visitors load the site, browse dynamically fetched projects (or frontend fallbacks), and submit the contact form; an administrator can create projects through a token-protected API. The sampled source supports the request and persistence paths shown. The README documents deployment and configuration, but those are not runtime product components.

Main entry points: [`backend/server.js`](https://github.com/shalini-576-cse/shaliniportfolio05/blob/main/backend/server.js) (Express Server), [`frontend/script.js`](https://github.com/shalini-576-cse/shaliniportfolio05/blob/main/frontend/script.js) (Portfolio Interactions), [`backend/routes/contact.js`](https://github.com/shalini-576-cse/shaliniportfolio05/blob/main/backend/routes/contact.js) (Contact API), [`backend/routes/projects.js`](https://github.com/shalini-576-cse/shaliniportfolio05/blob/main/backend/routes/projects.js) (Projects API)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_web["Portfolio Frontend"]
  node_page["Portfolio Page<br/>[index.html]"]
  node_browser["Portfolio Interactions<br/>[script.js]"]
end

subgraph group_api["Express API"]
  node_server["Express Server<br/>[server.js]"]
  node_contact["Contact API<br/>[contact.js]"]
  node_projects["Projects API<br/>[projects.js]"]
  node_limiter["Rate Limiter<br/>[rateLimit.js]"]
end

subgraph group_data["Persistence"]
  node_message["Message Model<br/>[Message.js]"]
  node_project["Project Model<br/>[Project.js]"]
end

node_visitor(("Visitor"))
node_admin(("Administrator"))
node_mongo[("MongoDB")]

node_visitor -->|"opens"| node_page
node_server -->|"serves"| node_page
node_page -->|"loads script"| node_browser
node_browser -->|"fetches projects"| node_server
node_server -->|"dispatches"| node_projects
node_browser -->|"posts contact"| node_server
node_server -->|"dispatches"| node_contact
node_admin -->|"creates project"| node_server
node_contact -->|"checks rate"| node_limiter
node_projects -->|"checks rate"| node_limiter
node_contact -->|"saves message"| node_message
node_projects -->|"reads and saves"| node_project
node_server -->|"connects"| node_mongo
node_message -->|"persists"| node_mongo
node_project -->|"persists"| node_mongo

click node_page "https://github.com/shalini-576-cse/shaliniportfolio05/blob/main/frontend/index.html"
click node_browser "https://github.com/shalini-576-cse/shaliniportfolio05/blob/main/frontend/script.js"
click node_server "https://github.com/shalini-576-cse/shaliniportfolio05/blob/main/backend/server.js"
click node_contact "https://github.com/shalini-576-cse/shaliniportfolio05/blob/main/backend/routes/contact.js"
click node_projects "https://github.com/shalini-576-cse/shaliniportfolio05/blob/main/backend/routes/projects.js"
click node_limiter "https://github.com/shalini-576-cse/shaliniportfolio05/blob/main/backend/middleware/rateLimit.js"
click node_message "https://github.com/shalini-576-cse/shaliniportfolio05/blob/main/backend/models/Message.js"
click node_project "https://github.com/shalini-576-cse/shaliniportfolio05/blob/main/backend/models/Project.js"

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_page,node_browser toneBlue
class node_server,node_contact,node_projects,node_limiter,node_mongo toneAmber
class node_message,node_project toneMint
class node_visitor,node_admin toneIndigo
```

## Components

### Portfolio Frontend

- [Portfolio Page](https://github.com/shalini-576-cse/shaliniportfolio05/blob/main/frontend/index.html): `frontend/index.html`
- [Portfolio Interactions](https://github.com/shalini-576-cse/shaliniportfolio05/blob/main/frontend/script.js): `frontend/script.js`

### Express API

- [Express Server](https://github.com/shalini-576-cse/shaliniportfolio05/blob/main/backend/server.js): `backend/server.js`
- [Contact API](https://github.com/shalini-576-cse/shaliniportfolio05/blob/main/backend/routes/contact.js): `backend/routes/contact.js`
- [Projects API](https://github.com/shalini-576-cse/shaliniportfolio05/blob/main/backend/routes/projects.js): `backend/routes/projects.js`
- [Rate Limiter](https://github.com/shalini-576-cse/shaliniportfolio05/blob/main/backend/middleware/rateLimit.js): `backend/middleware/rateLimit.js`

### Persistence

- [Message Model](https://github.com/shalini-576-cse/shaliniportfolio05/blob/main/backend/models/Message.js): `backend/models/Message.js`
- [Project Model](https://github.com/shalini-576-cse/shaliniportfolio05/blob/main/backend/models/Project.js): `backend/models/Project.js`

### Other components

- **Visitor**
- **Administrator**
- **MongoDB**

## Connections

- Visitor → Portfolio Page: opens
- Express Server → Portfolio Page: serves
- Portfolio Page → Portfolio Interactions: loads script
- Portfolio Interactions → Express Server: fetches projects
- Express Server → Projects API: dispatches
- Portfolio Interactions → Express Server: posts contact
- Express Server → Contact API: dispatches
- Administrator → Express Server: creates project
- Contact API → Rate Limiter: checks rate
- Projects API → Rate Limiter: checks rate
- Contact API → Message Model: saves message
- Projects API → Project Model: reads and saves
- Express Server → MongoDB: connects
- Message Model → MongoDB: persists
- Project Model → MongoDB: persists