# suman2060/portflio architecture

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

- Interactive diagram: https://gitdiagram.com/suman2060/portflio
- Repository: https://github.com/suman2060/portflio

## Overview

This is a portfolio website with an administrative CMS. Visitors browse portfolio content and project details; an administrator logs in and edits site settings, projects, skills, experience, messages, and media. The client initializes shared content state from REST services, while Express route modules handle persistence and authentication. The README documents caching, uploads, and GitHub integration, but their complete client/server flows were not sampled; those relationships are left unasserted where source evidence is unavailable.

Main entry points: [`server/src/config/db.js`](https://github.com/suman2060/portflio/blob/main/server/src/config/db.js) (Prisma client), [`client/src/app/App.tsx`](https://github.com/suman2060/portflio/blob/main/client/src/app/App.tsx) (Application routes), [`client/src/store/siteStore.ts`](https://github.com/suman2060/portflio/blob/main/client/src/store/siteStore.ts) (Content state), [`client/src/features/admin/pages/Dashboard.tsx`](https://github.com/suman2060/portflio/blob/main/client/src/features/admin/pages/Dashboard.tsx) (Admin dashboard)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_frontend["Portfolio client"]
  node_app["Application routes<br/>[App.tsx]"]
  node_home["Portfolio home<br/>[Home.tsx]"]
  node_home_sections["Portfolio sections"]
  node_project_detail["Project details<br/>[ProjectDetail.tsx]"]
  node_site_store["Content state<br/>[siteStore.ts]"]
  node_api_client["HTTP client<br/>[client.ts]"]
end

subgraph group_admin["CMS studio"]
  node_login["Admin login<br/>[Login.tsx]"]
  node_dashboard["Admin dashboard<br/>[Dashboard.tsx]"]
  node_project_editor["Project editor<br/>[ProjectsTab.tsx]"]
  node_skills_editor["Skills editor<br/>[SkillsTab.tsx]"]
  node_experience_editor["Experience editor<br/>[ExperienceTab.tsx]"]
  node_messages_editor["Message inbox<br/>[MessagesTab.tsx]"]
  node_site_editor["Site settings"]
end

subgraph group_backend["API services"]
  node_uploads_api["Media uploads<br/>[uploads.routes.js]"]
  node_site_api["Site settings API<br/>[site.routes.js]"]
  node_projects_api["Projects API<br/>[projects.routes.js]"]
  node_skills_api["Skills API<br/>[skills.routes.js]"]
  node_experience_api["Experience API"]
  node_messages_api["Messages API<br/>[messages.routes.js]"]
  node_auth_api["Authentication API<br/>[auth.routes.js]"]
  node_github_api["GitHub integration<br/>[github.routes.js]"]
end

subgraph group_infra["Persistence and integrations"]
  node_cache["TTL read cache<br/>[cache.js]"]
  node_prisma["Prisma client<br/>[db.js]"]
  node_postgres[("PostgreSQL")]
end

node_visitor(("Visitor"))
node_admin_actor(("Administrator"))

node_visitor -->|"opens"| node_app
node_admin_actor -->|"opens"| node_app
node_app -->|"routes to"| node_home
node_app -->|"routes to"| node_login
node_app -->|"routes to"| node_dashboard
node_app -->|"routes to"| node_project_detail
node_home -->|"renders"| node_home_sections
node_app -->|"initializes"| node_site_store
node_site_store -->|"loads via"| node_api_client
node_dashboard -->|"renders"| node_project_editor
node_dashboard -->|"renders"| node_skills_editor
node_dashboard -->|"renders"| node_experience_editor
node_dashboard -->|"renders"| node_messages_editor
node_dashboard -->|"renders"| node_site_editor
node_site_editor -->|"refetches"| node_site_store
node_login -->|"authenticates via"| node_api_client
node_project_detail -->|"fetches via"| node_api_client
node_site_store -.->|"requests content"| node_site_api
node_site_store -.->|"requests content"| node_projects_api
node_site_store -.->|"requests content"| node_skills_api
node_site_store -.->|"requests content"| node_experience_api
node_api_client -.->|"sends credentials"| node_auth_api
node_site_editor -.->|"updates settings"| node_site_api
node_project_editor -.->|"manages projects"| node_projects_api
node_skills_editor -.->|"manages skills"| node_skills_api
node_experience_editor -.->|"manages experience"| node_experience_api
node_messages_editor -.->|"reads messages"| node_messages_api
node_uploads_api -.->|"authorizes with"| node_prisma
node_site_api -->|"reads and writes"| node_prisma
node_projects_api -->|"reads and writes"| node_prisma
node_skills_api -->|"reads and writes"| node_prisma
node_experience_api -->|"reads and writes"| node_prisma
node_messages_api -.->|"persists messages"| node_prisma
node_auth_api -.->|"checks credentials"| node_prisma
node_github_api -.->|"uses persistence"| node_prisma
node_projects_api -->|"reads and invalidates"| node_cache
node_site_api -->|"reads and invalidates"| node_cache
node_skills_api -->|"reads and invalidates"| node_cache
node_experience_api -->|"reads and invalidates"| node_cache
node_prisma -.->|"queries"| node_postgres

click node_app "https://github.com/suman2060/portflio/blob/main/client/src/app/App.tsx"
click node_home "https://github.com/suman2060/portflio/blob/main/client/src/features/home/pages/Home.tsx"
click node_home_sections "https://github.com/suman2060/portflio/tree/main/client/src/features/home/components"
click node_project_detail "https://github.com/suman2060/portflio/blob/main/client/src/features/projects/pages/ProjectDetail.tsx"
click node_site_store "https://github.com/suman2060/portflio/blob/main/client/src/store/siteStore.ts"
click node_api_client "https://github.com/suman2060/portflio/blob/main/client/src/api/client.ts"
click node_login "https://github.com/suman2060/portflio/blob/main/client/src/features/auth/pages/Login.tsx"
click node_dashboard "https://github.com/suman2060/portflio/blob/main/client/src/features/admin/pages/Dashboard.tsx"
click node_project_editor "https://github.com/suman2060/portflio/blob/main/client/src/features/admin/components/ProjectsTab.tsx"
click node_skills_editor "https://github.com/suman2060/portflio/blob/main/client/src/features/admin/components/SkillsTab.tsx"
click node_experience_editor "https://github.com/suman2060/portflio/blob/main/client/src/features/admin/components/ExperienceTab.tsx"
click node_messages_editor "https://github.com/suman2060/portflio/blob/main/client/src/features/admin/components/MessagesTab.tsx"
click node_site_editor "https://github.com/suman2060/portflio/blob/main/client/src/features/admin/components/SiteSettingsManager.tsx"
click node_uploads_api "https://github.com/suman2060/portflio/blob/main/server/src/module/uploads/uploads.routes.js"
click node_site_api "https://github.com/suman2060/portflio/blob/main/server/src/module/site/site.routes.js"
click node_projects_api "https://github.com/suman2060/portflio/blob/main/server/src/module/projects/projects.routes.js"
click node_skills_api "https://github.com/suman2060/portflio/blob/main/server/src/module/skills/skills.routes.js"
click node_experience_api "https://github.com/suman2060/portflio/blob/main/server/src/module/experience/experience.routes.js"
click node_messages_api "https://github.com/suman2060/portflio/blob/main/server/src/module/messages/messages.routes.js"
click node_auth_api "https://github.com/suman2060/portflio/blob/main/server/src/module/auth/auth.routes.js"
click node_github_api "https://github.com/suman2060/portflio/blob/main/server/src/module/github/github.routes.js"
click node_cache "https://github.com/suman2060/portflio/blob/main/server/src/utils/cache.js"
click node_prisma "https://github.com/suman2060/portflio/blob/main/server/src/config/db.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_app,node_home,node_home_sections,node_project_detail,node_site_store,node_api_client toneBlue
class node_login,node_dashboard,node_project_editor,node_skills_editor,node_experience_editor,node_messages_editor,node_site_editor toneAmber
class node_uploads_api,node_site_api,node_projects_api,node_skills_api,node_experience_api,node_messages_api,node_auth_api,node_github_api toneMint
class node_cache,node_prisma,node_postgres toneRose
class node_visitor,node_admin_actor toneIndigo
```

## Components

### Portfolio client

- [Application routes](https://github.com/suman2060/portflio/blob/main/client/src/app/App.tsx): `client/src/app/App.tsx`
- [Portfolio home](https://github.com/suman2060/portflio/blob/main/client/src/features/home/pages/Home.tsx): `client/src/features/home/pages/Home.tsx`
- [Portfolio sections](https://github.com/suman2060/portflio/tree/main/client/src/features/home/components): `client/src/features/home/components`
- [Project details](https://github.com/suman2060/portflio/blob/main/client/src/features/projects/pages/ProjectDetail.tsx): `client/src/features/projects/pages/ProjectDetail.tsx`
- [Content state](https://github.com/suman2060/portflio/blob/main/client/src/store/siteStore.ts): `client/src/store/siteStore.ts`
- [HTTP client](https://github.com/suman2060/portflio/blob/main/client/src/api/client.ts): `client/src/api/client.ts`

### CMS studio

- [Admin login](https://github.com/suman2060/portflio/blob/main/client/src/features/auth/pages/Login.tsx): `client/src/features/auth/pages/Login.tsx`
- [Admin dashboard](https://github.com/suman2060/portflio/blob/main/client/src/features/admin/pages/Dashboard.tsx): `client/src/features/admin/pages/Dashboard.tsx`
- [Project editor](https://github.com/suman2060/portflio/blob/main/client/src/features/admin/components/ProjectsTab.tsx): `client/src/features/admin/components/ProjectsTab.tsx`
- [Skills editor](https://github.com/suman2060/portflio/blob/main/client/src/features/admin/components/SkillsTab.tsx): `client/src/features/admin/components/SkillsTab.tsx`
- [Experience editor](https://github.com/suman2060/portflio/blob/main/client/src/features/admin/components/ExperienceTab.tsx): `client/src/features/admin/components/ExperienceTab.tsx`
- [Message inbox](https://github.com/suman2060/portflio/blob/main/client/src/features/admin/components/MessagesTab.tsx): `client/src/features/admin/components/MessagesTab.tsx`
- [Site settings](https://github.com/suman2060/portflio/blob/main/client/src/features/admin/components/SiteSettingsManager.tsx): `client/src/features/admin/components/SiteSettingsManager.tsx`

### API services

- [Media uploads](https://github.com/suman2060/portflio/blob/main/server/src/module/uploads/uploads.routes.js): `server/src/module/uploads/uploads.routes.js`
- [Site settings API](https://github.com/suman2060/portflio/blob/main/server/src/module/site/site.routes.js): `server/src/module/site/site.routes.js`
- [Projects API](https://github.com/suman2060/portflio/blob/main/server/src/module/projects/projects.routes.js): `server/src/module/projects/projects.routes.js`
- [Skills API](https://github.com/suman2060/portflio/blob/main/server/src/module/skills/skills.routes.js): `server/src/module/skills/skills.routes.js`
- [Experience API](https://github.com/suman2060/portflio/blob/main/server/src/module/experience/experience.routes.js): `server/src/module/experience/experience.routes.js`
- [Messages API](https://github.com/suman2060/portflio/blob/main/server/src/module/messages/messages.routes.js): `server/src/module/messages/messages.routes.js`
- [Authentication API](https://github.com/suman2060/portflio/blob/main/server/src/module/auth/auth.routes.js): `server/src/module/auth/auth.routes.js`
- [GitHub integration](https://github.com/suman2060/portflio/blob/main/server/src/module/github/github.routes.js): `server/src/module/github/github.routes.js`

### Persistence and integrations

- [TTL read cache](https://github.com/suman2060/portflio/blob/main/server/src/utils/cache.js): `server/src/utils/cache.js`
- [Prisma client](https://github.com/suman2060/portflio/blob/main/server/src/config/db.js): `server/src/config/db.js`
- **PostgreSQL**

### Other components

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

## Connections

- Visitor → Application routes: opens (evidence: `client/src/app/App.tsx`)
- Administrator → Application routes: opens (evidence: `client/src/app/App.tsx`)
- Application routes → Portfolio home: routes to (evidence: `client/src/app/App.tsx`)
- Application routes → Admin login: routes to (evidence: `client/src/app/App.tsx`)
- Application routes → Admin dashboard: routes to (evidence: `client/src/app/App.tsx`)
- Application routes → Project details: routes to (evidence: `client/src/app/App.tsx`)
- Portfolio home → Portfolio sections: renders (evidence: `client/src/features/home/pages/Home.tsx`)
- Application routes → Content state: initializes (evidence: `client/src/app/App.tsx`)
- Content state → HTTP client: loads via (evidence: `client/src/store/siteStore.ts`)
- Admin dashboard → Project editor: renders (evidence: `client/src/features/admin/pages/Dashboard.tsx`)
- Admin dashboard → Skills editor: renders (evidence: `client/src/features/admin/pages/Dashboard.tsx`)
- Admin dashboard → Experience editor: renders (evidence: `client/src/features/admin/pages/Dashboard.tsx`)
- Admin dashboard → Message inbox: renders (evidence: `client/src/features/admin/pages/Dashboard.tsx`)
- Admin dashboard → Site settings: renders (evidence: `client/src/features/admin/pages/Dashboard.tsx`)
- Site settings → Content state: refetches (evidence: `client/src/features/admin/components/SiteSettingsManager.tsx`)
- Admin login → HTTP client: authenticates via (evidence: `client/src/features/auth/pages/Login.tsx`)
- Project details → HTTP client: fetches via (evidence: `client/src/features/projects/pages/ProjectDetail.tsx`)
- Content state → Site settings API: requests content
- Content state → Projects API: requests content
- Content state → Skills API: requests content
- Content state → Experience API: requests content
- HTTP client → Authentication API: sends credentials
- Site settings → Site settings API: updates settings
- Project editor → Projects API: manages projects
- Skills editor → Skills API: manages skills
- Experience editor → Experience API: manages experience
- Message inbox → Messages API: reads messages
- Media uploads → Prisma client: authorizes with
- Site settings API → Prisma client: reads and writes (evidence: `server/src/module/site/site.routes.js`)
- Projects API → Prisma client: reads and writes (evidence: `server/src/module/projects/projects.routes.js`)
- Skills API → Prisma client: reads and writes (evidence: `server/src/module/skills/skills.routes.js`)
- Experience API → Prisma client: reads and writes (evidence: `server/src/module/experience/experience.routes.js`)
- Messages API → Prisma client: persists messages (evidence: `server/src/module/messages/messages.routes.js`)
- Authentication API → Prisma client: checks credentials (evidence: `server/src/module/auth/auth.routes.js`)
- GitHub integration → Prisma client: uses persistence (evidence: `server/src/module/github/github.routes.js`)
- Projects API → TTL read cache: reads and invalidates (evidence: `server/src/module/projects/projects.routes.js`)
- Site settings API → TTL read cache: reads and invalidates (evidence: `server/src/module/site/site.routes.js`)
- Skills API → TTL read cache: reads and invalidates (evidence: `server/src/module/skills/skills.routes.js`)
- Experience API → TTL read cache: reads and invalidates (evidence: `server/src/module/experience/experience.routes.js`)
- Prisma client → PostgreSQL: queries