# shelcia/dynamic-portfolio architecture

> Architecture diagram of the GitHub repository shelcia/dynamic-portfolio, 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/shelcia/dynamic-portfolio
- Repository: https://github.com/shelcia/dynamic-portfolio

## Overview

Dynamic Portfolio is a React app for creating and publishing personal portfolio sites through forms. Its main journey is account access, selecting a template, entering profile and portfolio content, saving it, then viewing and sharing the resulting site. The graph includes the documented three-template render and theme capabilities. Source excerpts confirm login, dashboard portfolio retrieval/deletion, and Template 1 submission; wiring for other authoring and rendering details is based on the README and file tree.

Main entry points: [`src/routes.jsx`](https://github.com/shelcia/dynamic-portfolio/blob/master/src/routes.jsx) (Route definitions), [`src/pages/portfolio/Portfolio.jsx`](https://github.com/shelcia/dynamic-portfolio/blob/master/src/pages/portfolio/Portfolio.jsx) (Portfolio entry), [`src/services/models/CommonModel.js`](https://github.com/shelcia/dynamic-portfolio/blob/master/src/services/models/CommonModel.js) (Portfolio API model), [`src/pages/dashboard/Dashboard.jsx`](https://github.com/shelcia/dynamic-portfolio/blob/master/src/pages/dashboard/Dashboard.jsx) (Portfolio dashboard)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_app["Application flow"]
  node_app["App routing<br/>[App.jsx]"]
  node_routes["Route definitions<br/>[routes.jsx]"]
  node_templates["Template catalog"]
end

subgraph group_accounts["Account access"]
  node_login["Sign in<br/>[Login.jsx]"]
  node_signup["Sign up<br/>[Signup.jsx]"]
  node_verify["Email verification<br/>[Verification.jsx]"]
end

subgraph group_authoring["Portfolio authoring"]
  node_dashboard["Portfolio dashboard<br/>[Dashboard.jsx]"]
  node_create["Portfolio authoring<br/>[AddPortflio.jsx]"]
  node_template1form["Student portfolio form<br/>[Template1.jsx]"]
  node_formparts["Content form parts<br/>[Project.jsx]"]
  node_edit["Portfolio editing<br/>[EditPortfolio.jsx]"]
end

subgraph group_presentation["Portfolio presentation"]
  node_portfolio["Portfolio entry<br/>[Portfolio.jsx]"]
  node_template1["Student template<br/>[Template1.jsx]"]
  node_template2["Photographer template<br/>[Template2.jsx]"]
  node_template3["Designer writer template<br/>[Template3.jsx]"]
  node_theme["Theme state<br/>[ThemeContext.jsx]"]
end

subgraph group_services["API services"]
  node_commonapi["Portfolio API model<br/>[CommonModel.js]"]
  node_authapi["Authentication API model<br/>[AuthModel.js]"]
  node_provider["HTTP provider<br/>[provider.js]"]
end

node_visitor(("Visitor"))
node_backend[("Application backend")]

node_visitor -->|"opens"| node_app
node_app -->|"resolves routes"| node_routes
node_routes -->|"routes to"| node_login
node_routes -->|"routes to"| node_signup
node_routes -->|"routes to"| node_verify
node_routes -->|"routes to"| node_dashboard
node_routes -->|"routes to"| node_create
node_routes -->|"routes to"| node_edit
node_routes -->|"routes to"| node_portfolio
node_dashboard -->|"reads choices"| node_templates
node_dashboard -->|"opens selected"| node_create
node_create -->|"selects form"| node_template1form
node_template1form -->|"uses fields"| node_formparts
node_login -->|"submits credentials"| node_authapi
node_signup -->|"submits registration"| node_authapi
node_verify -->|"requests verification"| node_authapi
node_dashboard -->|"loads and deletes"| node_commonapi
node_template1form -->|"saves portfolio"| node_commonapi
node_edit -->|"updates portfolio"| node_commonapi
node_portfolio -->|"loads portfolio"| node_commonapi
node_portfolio -->|"renders template"| node_template1
node_portfolio -->|"renders template"| node_template2
node_portfolio -->|"renders template"| node_template3
node_portfolio -->|"uses theme"| node_theme
node_authapi -->|"delegates requests"| node_provider
node_commonapi -->|"delegates requests"| node_provider
node_provider -->|"sends HTTP"| node_backend

click node_app "https://github.com/shelcia/dynamic-portfolio/blob/master/src/App.jsx"
click node_routes "https://github.com/shelcia/dynamic-portfolio/blob/master/src/routes.jsx"
click node_templates "https://github.com/shelcia/dynamic-portfolio/blob/master/src/context/TemplateContext.jsx"
click node_login "https://github.com/shelcia/dynamic-portfolio/blob/master/src/pages/auth/Login.jsx"
click node_signup "https://github.com/shelcia/dynamic-portfolio/blob/master/src/pages/auth/Signup.jsx"
click node_verify "https://github.com/shelcia/dynamic-portfolio/blob/master/src/pages/auth/Verification.jsx"
click node_dashboard "https://github.com/shelcia/dynamic-portfolio/blob/master/src/pages/dashboard/Dashboard.jsx"
click node_create "https://github.com/shelcia/dynamic-portfolio/blob/master/src/pages/dashboard/addPortfolio/AddPortflio.jsx"
click node_template1form "https://github.com/shelcia/dynamic-portfolio/blob/master/src/pages/dashboard/addPortfolio/templates/Template1.jsx"
click node_formparts "https://github.com/shelcia/dynamic-portfolio/blob/master/src/pages/dashboard/addPortfolio/components/Project.jsx"
click node_edit "https://github.com/shelcia/dynamic-portfolio/blob/master/src/pages/dashboard/editDashboard/EditPortfolio.jsx"
click node_portfolio "https://github.com/shelcia/dynamic-portfolio/blob/master/src/pages/portfolio/Portfolio.jsx"
click node_template1 "https://github.com/shelcia/dynamic-portfolio/blob/master/src/pages/portfolio/template/template1/Template1.jsx"
click node_template2 "https://github.com/shelcia/dynamic-portfolio/blob/master/src/pages/portfolio/template/template2/Template2.jsx"
click node_template3 "https://github.com/shelcia/dynamic-portfolio/blob/master/src/pages/portfolio/template/template3/Template3.jsx"
click node_theme "https://github.com/shelcia/dynamic-portfolio/blob/master/src/context/ThemeContext.jsx"
click node_commonapi "https://github.com/shelcia/dynamic-portfolio/blob/master/src/services/models/CommonModel.js"
click node_authapi "https://github.com/shelcia/dynamic-portfolio/blob/master/src/services/models/AuthModel.js"
click node_provider "https://github.com/shelcia/dynamic-portfolio/blob/master/src/services/utilities/provider.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_routes,node_templates toneBlue
class node_login,node_signup,node_verify,node_backend toneAmber
class node_dashboard,node_create,node_template1form,node_formparts,node_edit toneMint
class node_portfolio,node_template1,node_template2,node_template3,node_theme toneRose
class node_commonapi,node_authapi,node_provider,node_visitor toneIndigo
```

## Components

### Application flow

- [App routing](https://github.com/shelcia/dynamic-portfolio/blob/master/src/App.jsx): `src/App.jsx`
- [Route definitions](https://github.com/shelcia/dynamic-portfolio/blob/master/src/routes.jsx): `src/routes.jsx`
- [Template catalog](https://github.com/shelcia/dynamic-portfolio/blob/master/src/context/TemplateContext.jsx): `src/context/TemplateContext.jsx`

### Account access

- [Sign in](https://github.com/shelcia/dynamic-portfolio/blob/master/src/pages/auth/Login.jsx): `src/pages/auth/Login.jsx`
- [Sign up](https://github.com/shelcia/dynamic-portfolio/blob/master/src/pages/auth/Signup.jsx): `src/pages/auth/Signup.jsx`
- [Email verification](https://github.com/shelcia/dynamic-portfolio/blob/master/src/pages/auth/Verification.jsx): `src/pages/auth/Verification.jsx`

### Portfolio authoring

- [Portfolio dashboard](https://github.com/shelcia/dynamic-portfolio/blob/master/src/pages/dashboard/Dashboard.jsx): `src/pages/dashboard/Dashboard.jsx`
- [Portfolio authoring](https://github.com/shelcia/dynamic-portfolio/blob/master/src/pages/dashboard/addPortfolio/AddPortflio.jsx): `src/pages/dashboard/addPortfolio/AddPortflio.jsx`
- [Student portfolio form](https://github.com/shelcia/dynamic-portfolio/blob/master/src/pages/dashboard/addPortfolio/templates/Template1.jsx): `src/pages/dashboard/addPortfolio/templates/Template1.jsx`
- [Content form parts](https://github.com/shelcia/dynamic-portfolio/blob/master/src/pages/dashboard/addPortfolio/components/Project.jsx): `src/pages/dashboard/addPortfolio/components/Project.jsx`
- [Portfolio editing](https://github.com/shelcia/dynamic-portfolio/blob/master/src/pages/dashboard/editDashboard/EditPortfolio.jsx): `src/pages/dashboard/editDashboard/EditPortfolio.jsx`

### Portfolio presentation

- [Portfolio entry](https://github.com/shelcia/dynamic-portfolio/blob/master/src/pages/portfolio/Portfolio.jsx): `src/pages/portfolio/Portfolio.jsx`
- [Student template](https://github.com/shelcia/dynamic-portfolio/blob/master/src/pages/portfolio/template/template1/Template1.jsx): `src/pages/portfolio/template/template1/Template1.jsx`
- [Photographer template](https://github.com/shelcia/dynamic-portfolio/blob/master/src/pages/portfolio/template/template2/Template2.jsx): `src/pages/portfolio/template/template2/Template2.jsx`
- [Designer writer template](https://github.com/shelcia/dynamic-portfolio/blob/master/src/pages/portfolio/template/template3/Template3.jsx): `src/pages/portfolio/template/template3/Template3.jsx`
- [Theme state](https://github.com/shelcia/dynamic-portfolio/blob/master/src/context/ThemeContext.jsx): `src/context/ThemeContext.jsx`

### API services

- [Portfolio API model](https://github.com/shelcia/dynamic-portfolio/blob/master/src/services/models/CommonModel.js): `src/services/models/CommonModel.js`
- [Authentication API model](https://github.com/shelcia/dynamic-portfolio/blob/master/src/services/models/AuthModel.js): `src/services/models/AuthModel.js`
- [HTTP provider](https://github.com/shelcia/dynamic-portfolio/blob/master/src/services/utilities/provider.js): `src/services/utilities/provider.js`

### Other components

- **Visitor**
- **Application backend**

## Connections

- Visitor → App routing: opens
- App routing → Route definitions: resolves routes
- Route definitions → Sign in: routes to
- Route definitions → Sign up: routes to
- Route definitions → Email verification: routes to
- Route definitions → Portfolio dashboard: routes to
- Route definitions → Portfolio authoring: routes to
- Route definitions → Portfolio editing: routes to
- Route definitions → Portfolio entry: routes to
- Portfolio dashboard → Template catalog: reads choices
- Portfolio dashboard → Portfolio authoring: opens selected
- Portfolio authoring → Student portfolio form: selects form
- Student portfolio form → Content form parts: uses fields
- Sign in → Authentication API model: submits credentials
- Sign up → Authentication API model: submits registration
- Email verification → Authentication API model: requests verification
- Portfolio dashboard → Portfolio API model: loads and deletes
- Student portfolio form → Portfolio API model: saves portfolio
- Portfolio editing → Portfolio API model: updates portfolio
- Portfolio entry → Portfolio API model: loads portfolio
- Portfolio entry → Student template: renders template
- Portfolio entry → Photographer template: renders template
- Portfolio entry → Designer writer template: renders template
- Portfolio entry → Theme state: uses theme
- Authentication API model → HTTP provider: delegates requests
- Portfolio API model → HTTP provider: delegates requests
- HTTP provider → Application backend: sends HTTP