# ditero22/portfolio_frontend architecture

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

- Interactive diagram: https://gitdiagram.com/ditero22/portfolio_frontend
- Repository: https://github.com/ditero22/portfolio_frontend

## Overview

dtro Portfolio is a React single-page portfolio with public-facing content and a protected admin interface. Visitors browse portfolio sections and dynamic content; administrators sign in, manage content and settings, and publish resume versions. The frontend calls a separate Express/Prisma backend through its API client. The graph preserves major documented capabilities, but some feature implementations were not sampled, so their internal calls are not inferred.

Main entry points: [`src/App.tsx`](https://github.com/ditero22/portfolio_frontend/blob/main/src/App.tsx) (App router), [`src/shared/api.ts`](https://github.com/ditero22/portfolio_frontend/blob/main/src/shared/api.ts) (API client), [`src/features/public/landingPage`](https://github.com/ditero22/portfolio_frontend/tree/main/src/features/public/landingPage) (Landing page), [`src/features/public/projects`](https://github.com/ditero22/portfolio_frontend/tree/main/src/features/public/projects) (Projects)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_routing["Application and access"]
  node_app["App router<br/>[App.tsx]"]
  node_auth["Authentication"]
  node_route_guard["Protected routes<br/>[ProtectedRoute.tsx]"]
end

subgraph group_public["Public portfolio"]
  node_landing["Landing page"]
  node_public_sections["Portfolio sections"]
  node_blog_public["Public blog"]
  node_projects_public["Projects"]
  node_experience_public["Experience"]
  node_resources_public["Resource library"]
  node_portfolio_content["Managed portfolio content"]
  node_resume_public["Public resume"]
end

subgraph group_admin["Admin management"]
  node_admin_dashboard["Admin dashboard<br/>[dashboard.tsx]"]
  node_admin_content["Content management"]
  node_blog_admin["Blog management<br/>[BlogManagement.tsx]"]
  node_settings_admin["Settings and resume"]
end

subgraph group_shared["API and shared services"]
  node_api_client["API client<br/>[api.ts]"]
  node_api_transport["API transport<br/>[apiTransport.ts]"]
end

node_visitor(("Visitor"))
node_admin_user(("Administrator"))
node_backend["Express API and Prisma"]

node_visitor -->|"opens"| node_app
node_admin_user -->|"opens"| node_app
node_app -->|"provides auth"| node_auth
node_app -->|"guards admin routes"| node_route_guard
node_app -->|"routes to"| node_landing
node_app -->|"routes to"| node_public_sections
node_app -->|"routes to"| node_blog_public
node_app -->|"routes to"| node_projects_public
node_app -->|"routes to"| node_experience_public
node_app -->|"routes to"| node_resources_public
node_app -->|"routes to"| node_admin_dashboard
node_app -->|"routes to"| node_admin_content
node_app -->|"routes to"| node_blog_admin
node_app -->|"routes to"| node_settings_admin
node_route_guard -->|"checks session"| node_auth
node_landing -->|"loads preview"| node_projects_public
node_landing -->|"loads preview"| node_experience_public
node_landing -->|"loads previews"| node_portfolio_content
node_resources_public -->|"loads resources"| node_portfolio_content
node_blog_admin -->|"requests API"| node_api_client
node_settings_admin -->|"requests API"| node_api_client
node_portfolio_content -->|"requests API"| node_api_client
node_projects_public -->|"requests API"| node_api_client
node_experience_public -->|"requests API"| node_api_client
node_api_client -->|"delegates requests"| node_api_transport
node_api_client -->|"sends API traffic"| node_backend
node_resume_public -.->|"downloads resume"| node_backend

click node_app "https://github.com/ditero22/portfolio_frontend/blob/main/src/App.tsx"
click node_auth "https://github.com/ditero22/portfolio_frontend/tree/main/src/features/auth"
click node_route_guard "https://github.com/ditero22/portfolio_frontend/blob/main/src/shared/ProtectedRoute.tsx"
click node_landing "https://github.com/ditero22/portfolio_frontend/tree/main/src/features/public/landingPage"
click node_public_sections "https://github.com/ditero22/portfolio_frontend/tree/main/src/features/public"
click node_blog_public "https://github.com/ditero22/portfolio_frontend/tree/main/src/features/public/blog"
click node_projects_public "https://github.com/ditero22/portfolio_frontend/tree/main/src/features/public/projects"
click node_experience_public "https://github.com/ditero22/portfolio_frontend/tree/main/src/features/public/experience"
click node_resources_public "https://github.com/ditero22/portfolio_frontend/tree/main/src/features/public/resources"
click node_portfolio_content "https://github.com/ditero22/portfolio_frontend/blob/main/src/features/public/portfolioContent/services/portfolioContent.service.ts"
click node_resume_public "https://github.com/ditero22/portfolio_frontend/tree/main/src/features/public/resume"
click node_admin_dashboard "https://github.com/ditero22/portfolio_frontend/blob/main/src/features/admin/dashboard.tsx"
click node_admin_content "https://github.com/ditero22/portfolio_frontend/tree/main/src/features/admin/manage"
click node_blog_admin "https://github.com/ditero22/portfolio_frontend/blob/main/src/features/admin/manage/blog/pages/BlogManagement.tsx"
click node_settings_admin "https://github.com/ditero22/portfolio_frontend/tree/main/src/features/admin/manage/settings"
click node_api_client "https://github.com/ditero22/portfolio_frontend/blob/main/src/shared/api.ts"
click node_api_transport "https://github.com/ditero22/portfolio_frontend/blob/main/src/shared/apiTransport.ts"

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_auth,node_route_guard toneBlue
class node_landing,node_public_sections,node_blog_public,node_projects_public,node_experience_public,node_resources_public,node_portfolio_content,node_resume_public toneAmber
class node_admin_dashboard,node_admin_content,node_blog_admin,node_settings_admin,node_backend toneMint
class node_api_client,node_api_transport toneRose
class node_visitor,node_admin_user toneIndigo
```

## Components

### Application and access

- [App router](https://github.com/ditero22/portfolio_frontend/blob/main/src/App.tsx): `src/App.tsx`
- [Authentication](https://github.com/ditero22/portfolio_frontend/tree/main/src/features/auth): `src/features/auth`
- [Protected routes](https://github.com/ditero22/portfolio_frontend/blob/main/src/shared/ProtectedRoute.tsx): `src/shared/ProtectedRoute.tsx`

### Public portfolio

- [Landing page](https://github.com/ditero22/portfolio_frontend/tree/main/src/features/public/landingPage): `src/features/public/landingPage`
- [Portfolio sections](https://github.com/ditero22/portfolio_frontend/tree/main/src/features/public): `src/features/public`
- [Public blog](https://github.com/ditero22/portfolio_frontend/tree/main/src/features/public/blog): `src/features/public/blog`
- [Projects](https://github.com/ditero22/portfolio_frontend/tree/main/src/features/public/projects): `src/features/public/projects`
- [Experience](https://github.com/ditero22/portfolio_frontend/tree/main/src/features/public/experience): `src/features/public/experience`
- [Resource library](https://github.com/ditero22/portfolio_frontend/tree/main/src/features/public/resources): `src/features/public/resources`
- [Managed portfolio content](https://github.com/ditero22/portfolio_frontend/blob/main/src/features/public/portfolioContent/services/portfolioContent.service.ts): `src/features/public/portfolioContent/services/portfolioContent.service.ts`
- [Public resume](https://github.com/ditero22/portfolio_frontend/tree/main/src/features/public/resume): `src/features/public/resume`

### Admin management

- [Admin dashboard](https://github.com/ditero22/portfolio_frontend/blob/main/src/features/admin/dashboard.tsx): `src/features/admin/dashboard.tsx`
- [Content management](https://github.com/ditero22/portfolio_frontend/tree/main/src/features/admin/manage): `src/features/admin/manage`
- [Blog management](https://github.com/ditero22/portfolio_frontend/blob/main/src/features/admin/manage/blog/pages/BlogManagement.tsx): `src/features/admin/manage/blog/pages/BlogManagement.tsx`
- [Settings and resume](https://github.com/ditero22/portfolio_frontend/tree/main/src/features/admin/manage/settings): `src/features/admin/manage/settings`

### API and shared services

- [API client](https://github.com/ditero22/portfolio_frontend/blob/main/src/shared/api.ts): `src/shared/api.ts`
- [API transport](https://github.com/ditero22/portfolio_frontend/blob/main/src/shared/apiTransport.ts): `src/shared/apiTransport.ts`

### Other components

- **Visitor**
- **Administrator**
- **Express API and Prisma**

## Connections

- Visitor → App router: opens (evidence: `src/App.tsx`)
- Administrator → App router: opens (evidence: `src/App.tsx`)
- App router → Authentication: provides auth (evidence: `src/App.tsx`)
- App router → Protected routes: guards admin routes (evidence: `src/App.tsx`)
- App router → Landing page: routes to (evidence: `src/App.tsx`)
- App router → Portfolio sections: routes to (evidence: `src/App.tsx`)
- App router → Public blog: routes to (evidence: `src/App.tsx`)
- App router → Projects: routes to (evidence: `src/App.tsx`)
- App router → Experience: routes to (evidence: `src/App.tsx`)
- App router → Resource library: routes to (evidence: `src/App.tsx`)
- App router → Admin dashboard: routes to (evidence: `src/App.tsx`)
- App router → Content management: routes to (evidence: `src/App.tsx`)
- App router → Blog management: routes to (evidence: `src/App.tsx`)
- App router → Settings and resume: routes to (evidence: `src/App.tsx`)
- Protected routes → Authentication: checks session (evidence: `src/shared/ProtectedRoute.tsx`)
- Landing page → Projects: loads preview (evidence: `src/features/public/landingPage/hooks/usePortfolioPreview.ts`)
- Landing page → Experience: loads preview (evidence: `src/features/public/landingPage/hooks/usePortfolioPreview.ts`)
- Landing page → Managed portfolio content: loads previews (evidence: `src/features/public/landingPage/hooks/useLandingContentPreview.ts`)
- Resource library → Managed portfolio content: loads resources (evidence: `src/features/public/resources/hooks/useResources.ts`)
- Blog management → API client: requests API
- Settings and resume → API client: requests API (evidence: `src/features/admin/manage/settings/services/settings.service.ts`)
- Managed portfolio content → API client: requests API (evidence: `src/features/public/portfolioContent/services/portfolioContent.service.ts`)
- Projects → API client: requests API (evidence: `src/features/public/projects/services/projects.service.ts`)
- Experience → API client: requests API (evidence: `src/features/public/experience/services/experience.service.ts`)
- API client → API transport: delegates requests (evidence: `src/shared/api.ts`)
- API client → Express API and Prisma: sends API traffic (evidence: `README.md`)
- Public resume → Express API and Prisma: downloads resume