# willberg510/willbergforever.com architecture

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

- Interactive diagram: https://gitdiagram.com/willberg510/willbergforever.com
- Repository: https://github.com/willberg510/willbergforever.com

## Overview

Willberg Forever is a portfolio and community site for browsing projects on an interactive map or by category, viewing media, reacting, reading updates, and taking daily project races; admins manage projects and updates. The browser app is the workflow coordinator, calling API wrappers that communicate with Express routes and MongoDB-backed models. Project media is stored in S3. The excerpts establish the map, project, race, authentication, and upload paths; other documented-by-structure features are represented where their modules exist, but unsampled internals are not asserted.

Main entry points: [`frontend/src/pages/App.jsx`](https://github.com/willberg510/willbergforever.com/blob/main/frontend/src/pages/App.jsx) (App workflow), [`backend/server.js`](https://github.com/willberg510/willbergforever.com/blob/main/backend/server.js) (Express server), [`backend/routes/projects.js`](https://github.com/willberg510/willbergforever.com/blob/main/backend/routes/projects.js) (Project routes), [`frontend/src/api/ProjectsAPI.js`](https://github.com/willberg510/willbergforever.com/blob/main/frontend/src/api/ProjectsAPI.js) (Projects API)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_experience["Visitor experience"]
  node_app["App workflow<br/>[App.jsx]"]
  node_map["Interactive map<br/>[Island.jsx]"]
  node_project_browse["Project browsing<br/>[GroupList.jsx]"]
  node_project_view["Project details<br/>[Project.jsx]"]
  node_media_player["Media player<br/>[Player.jsx]"]
  node_races_ui["Daily races<br/>[DailyRaces.jsx]"]
  node_race_box["Race interaction<br/>[RaceBox.jsx]"]
  node_updates_ui["Updates feed<br/>[UpdatesBox.jsx]"]
  node_admin_ui["Admin panel<br/>[AdminPanel.jsx]"]
end

subgraph group_browser["Browser APIs"]
  node_api_projects["Projects API<br/>[ProjectsAPI.js]"]
  node_api_races["Races API<br/>[RacesAPI.js]"]
  node_api_updates["Updates API<br/>[UpdatesAPI.js]"]
  node_api_admin["Admin API<br/>[AdminAPI.js]"]
  node_api_user["User API<br/>[UserAPI.js]"]
  node_http_client["HTTP client<br/>[BaseAPI.js]"]
end

subgraph group_service["Backend service"]
  node_server["Express server<br/>[server.js]"]
  node_projects_routes["Project routes<br/>[projects.js]"]
  node_races_routes["Race routes<br/>[races.js]"]
  node_updates_routes["Update routes<br/>[updates.js]"]
  node_admin_routes["Admin routes<br/>[admin.js]"]
  node_user_routes["User routes<br/>[user.js]"]
  node_auth["Admin auth<br/>[auth.js]"]
  node_race_refresh["Race refresh<br/>[refreshRaces.js]"]
end

subgraph group_data["Persistence and media"]
  node_project_model[("Project model<br/>[Project.js]")]
  node_race_model[("Race model<br/>[Race.js]")]
  node_update_model[("Update model<br/>[Update.js]")]
  node_s3[("Media object storage<br/>[s3Client.js]")]
end

node_visitor(("Site visitor"))
node_mongo[("MongoDB")]
node_aws_s3[("AWS S3")]

node_visitor -->|"uses"| node_app
node_app -->|"renders"| node_map
node_app -->|"renders"| node_project_browse
node_app -->|"renders"| node_races_ui
node_app -->|"renders"| node_race_box
node_app -->|"renders"| node_updates_ui
node_app -->|"renews identity"| node_api_user
node_app -->|"signs out"| node_api_admin
node_map -->|"loads region"| node_api_projects
node_project_browse -->|"loads groups"| node_api_projects
node_project_view -->|"loads and reacts"| node_api_projects
node_media_player -->|"loads project"| node_api_projects
node_races_ui -->|"requests races"| node_api_races
node_app -->|"starts race"| node_api_races
node_updates_ui -->|"loads updates"| node_api_updates
node_admin_ui -->|"admin actions"| node_api_admin
node_admin_ui -->|"manages projects"| node_api_projects
node_admin_ui -->|"manages updates"| node_api_updates
node_api_projects -->|"sends requests"| node_http_client
node_api_races -->|"sends requests"| node_http_client
node_api_updates -->|"sends requests"| node_http_client
node_api_admin -->|"sends requests"| node_http_client
node_api_user -->|"sends requests"| node_http_client
node_http_client -.->|"HTTP requests"| node_server
node_server -->|"mounts"| node_projects_routes
node_server -->|"mounts"| node_races_routes
node_server -->|"mounts"| node_updates_routes
node_server -->|"mounts"| node_admin_routes
node_server -->|"mounts"| node_user_routes
node_projects_routes -->|"guards writes"| node_auth
node_projects_routes -->|"queries and saves"| node_project_model
node_projects_routes -->|"queries races"| node_race_model
node_projects_routes -->|"refreshes races"| node_race_refresh
node_projects_routes -->|"stores media"| node_s3
node_races_routes -->|"queries and updates"| node_race_model
node_races_routes -->|"queries projects"| node_project_model
node_races_routes -->|"refreshes races"| node_race_refresh
node_updates_routes -->|"queries and saves"| node_update_model
node_updates_routes -->|"guards admin actions"| node_auth
node_admin_routes -.->|"checks access"| node_auth
node_project_model -.->|"persists records"| node_mongo
node_race_model -.->|"persists records"| node_mongo
node_update_model -.->|"persists records"| node_mongo
node_s3 -.->|"stores objects"| node_aws_s3

click node_app "https://github.com/willberg510/willbergforever.com/blob/main/frontend/src/pages/App.jsx"
click node_map "https://github.com/willberg510/willbergforever.com/blob/main/frontend/src/components/Island.jsx"
click node_project_browse "https://github.com/willberg510/willbergforever.com/blob/main/frontend/src/components/GroupList.jsx"
click node_project_view "https://github.com/willberg510/willbergforever.com/blob/main/frontend/src/components/Project.jsx"
click node_media_player "https://github.com/willberg510/willbergforever.com/blob/main/frontend/src/components/Player.jsx"
click node_races_ui "https://github.com/willberg510/willbergforever.com/blob/main/frontend/src/components/DailyRaces.jsx"
click node_race_box "https://github.com/willberg510/willbergforever.com/blob/main/frontend/src/components/RaceBox.jsx"
click node_updates_ui "https://github.com/willberg510/willbergforever.com/blob/main/frontend/src/components/UpdatesBox.jsx"
click node_admin_ui "https://github.com/willberg510/willbergforever.com/blob/main/frontend/src/pages/AdminPanel.jsx"
click node_api_projects "https://github.com/willberg510/willbergforever.com/blob/main/frontend/src/api/ProjectsAPI.js"
click node_api_races "https://github.com/willberg510/willbergforever.com/blob/main/frontend/src/api/RacesAPI.js"
click node_api_updates "https://github.com/willberg510/willbergforever.com/blob/main/frontend/src/api/UpdatesAPI.js"
click node_api_admin "https://github.com/willberg510/willbergforever.com/blob/main/frontend/src/api/AdminAPI.js"
click node_api_user "https://github.com/willberg510/willbergforever.com/blob/main/frontend/src/api/UserAPI.js"
click node_http_client "https://github.com/willberg510/willbergforever.com/blob/main/frontend/src/api/BaseAPI.js"
click node_server "https://github.com/willberg510/willbergforever.com/blob/main/backend/server.js"
click node_projects_routes "https://github.com/willberg510/willbergforever.com/blob/main/backend/routes/projects.js"
click node_races_routes "https://github.com/willberg510/willbergforever.com/blob/main/backend/routes/races.js"
click node_updates_routes "https://github.com/willberg510/willbergforever.com/blob/main/backend/routes/updates.js"
click node_admin_routes "https://github.com/willberg510/willbergforever.com/blob/main/backend/routes/admin.js"
click node_user_routes "https://github.com/willberg510/willbergforever.com/blob/main/backend/routes/user.js"
click node_auth "https://github.com/willberg510/willbergforever.com/blob/main/backend/utils/auth.js"
click node_race_refresh "https://github.com/willberg510/willbergforever.com/blob/main/backend/utils/refreshRaces.js"
click node_project_model "https://github.com/willberg510/willbergforever.com/blob/main/backend/models/Project.js"
click node_race_model "https://github.com/willberg510/willbergforever.com/blob/main/backend/models/Race.js"
click node_update_model "https://github.com/willberg510/willbergforever.com/blob/main/backend/models/Update.js"
click node_s3 "https://github.com/willberg510/willbergforever.com/blob/main/backend/utils/s3Client.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_map,node_project_browse,node_project_view,node_media_player,node_races_ui,node_race_box,node_updates_ui,node_admin_ui toneBlue
class node_api_projects,node_api_races,node_api_updates,node_api_admin,node_api_user,node_http_client,node_mongo,node_aws_s3 toneAmber
class node_server,node_projects_routes,node_races_routes,node_updates_routes,node_admin_routes,node_user_routes,node_auth,node_race_refresh toneMint
class node_project_model,node_race_model,node_update_model,node_s3 toneRose
class node_visitor toneIndigo
```

## Components

### Visitor experience

- [App workflow](https://github.com/willberg510/willbergforever.com/blob/main/frontend/src/pages/App.jsx): `frontend/src/pages/App.jsx`
- [Interactive map](https://github.com/willberg510/willbergforever.com/blob/main/frontend/src/components/Island.jsx): `frontend/src/components/Island.jsx`
- [Project browsing](https://github.com/willberg510/willbergforever.com/blob/main/frontend/src/components/GroupList.jsx): `frontend/src/components/GroupList.jsx`
- [Project details](https://github.com/willberg510/willbergforever.com/blob/main/frontend/src/components/Project.jsx): `frontend/src/components/Project.jsx`
- [Media player](https://github.com/willberg510/willbergforever.com/blob/main/frontend/src/components/Player.jsx): `frontend/src/components/Player.jsx`
- [Daily races](https://github.com/willberg510/willbergforever.com/blob/main/frontend/src/components/DailyRaces.jsx): `frontend/src/components/DailyRaces.jsx`
- [Race interaction](https://github.com/willberg510/willbergforever.com/blob/main/frontend/src/components/RaceBox.jsx): `frontend/src/components/RaceBox.jsx`
- [Updates feed](https://github.com/willberg510/willbergforever.com/blob/main/frontend/src/components/UpdatesBox.jsx): `frontend/src/components/UpdatesBox.jsx`
- [Admin panel](https://github.com/willberg510/willbergforever.com/blob/main/frontend/src/pages/AdminPanel.jsx): `frontend/src/pages/AdminPanel.jsx`

### Browser APIs

- [Projects API](https://github.com/willberg510/willbergforever.com/blob/main/frontend/src/api/ProjectsAPI.js): `frontend/src/api/ProjectsAPI.js`
- [Races API](https://github.com/willberg510/willbergforever.com/blob/main/frontend/src/api/RacesAPI.js): `frontend/src/api/RacesAPI.js`
- [Updates API](https://github.com/willberg510/willbergforever.com/blob/main/frontend/src/api/UpdatesAPI.js): `frontend/src/api/UpdatesAPI.js`
- [Admin API](https://github.com/willberg510/willbergforever.com/blob/main/frontend/src/api/AdminAPI.js): `frontend/src/api/AdminAPI.js`
- [User API](https://github.com/willberg510/willbergforever.com/blob/main/frontend/src/api/UserAPI.js): `frontend/src/api/UserAPI.js`
- [HTTP client](https://github.com/willberg510/willbergforever.com/blob/main/frontend/src/api/BaseAPI.js): `frontend/src/api/BaseAPI.js`

### Backend service

- [Express server](https://github.com/willberg510/willbergforever.com/blob/main/backend/server.js): `backend/server.js`
- [Project routes](https://github.com/willberg510/willbergforever.com/blob/main/backend/routes/projects.js): `backend/routes/projects.js`
- [Race routes](https://github.com/willberg510/willbergforever.com/blob/main/backend/routes/races.js): `backend/routes/races.js`
- [Update routes](https://github.com/willberg510/willbergforever.com/blob/main/backend/routes/updates.js): `backend/routes/updates.js`
- [Admin routes](https://github.com/willberg510/willbergforever.com/blob/main/backend/routes/admin.js): `backend/routes/admin.js`
- [User routes](https://github.com/willberg510/willbergforever.com/blob/main/backend/routes/user.js): `backend/routes/user.js`
- [Admin auth](https://github.com/willberg510/willbergforever.com/blob/main/backend/utils/auth.js): `backend/utils/auth.js`
- [Race refresh](https://github.com/willberg510/willbergforever.com/blob/main/backend/utils/refreshRaces.js): `backend/utils/refreshRaces.js`

### Persistence and media

- [Project model](https://github.com/willberg510/willbergforever.com/blob/main/backend/models/Project.js): `backend/models/Project.js`
- [Race model](https://github.com/willberg510/willbergforever.com/blob/main/backend/models/Race.js): `backend/models/Race.js`
- [Update model](https://github.com/willberg510/willbergforever.com/blob/main/backend/models/Update.js): `backend/models/Update.js`
- [Media object storage](https://github.com/willberg510/willbergforever.com/blob/main/backend/utils/s3Client.js): `backend/utils/s3Client.js`

### Other components

- **Site visitor**
- **MongoDB**
- **AWS S3**

## Connections

- Site visitor → App workflow: uses (evidence: `frontend/src/pages/App.jsx`)
- App workflow → Interactive map: renders (evidence: `frontend/src/pages/App.jsx`)
- App workflow → Project browsing: renders (evidence: `frontend/src/pages/App.jsx`)
- App workflow → Daily races: renders (evidence: `frontend/src/pages/App.jsx`)
- App workflow → Race interaction: renders (evidence: `frontend/src/pages/App.jsx`)
- App workflow → Updates feed: renders (evidence: `frontend/src/pages/App.jsx`)
- App workflow → User API: renews identity (evidence: `frontend/src/pages/App.jsx`)
- App workflow → Admin API: signs out (evidence: `frontend/src/pages/App.jsx`)
- Interactive map → Projects API: loads region (evidence: `frontend/src/components/Island.jsx`)
- Project browsing → Projects API: loads groups (evidence: `frontend/src/api/ProjectsAPI.js`)
- Project details → Projects API: loads and reacts (evidence: `frontend/src/components/Project.jsx`)
- Media player → Projects API: loads project (evidence: `frontend/src/components/Player.jsx`)
- Daily races → Races API: requests races (evidence: `frontend/src/components/DailyRaces.jsx`)
- App workflow → Races API: starts race (evidence: `frontend/src/pages/App.jsx`)
- Updates feed → Updates API: loads updates (evidence: `frontend/src/components/UpdatesBox.jsx`)
- Admin panel → Admin API: admin actions (evidence: `frontend/src/pages/AdminPanel.jsx`)
- Admin panel → Projects API: manages projects (evidence: `frontend/src/pages/AdminPanel.jsx`)
- Admin panel → Updates API: manages updates (evidence: `frontend/src/pages/AdminPanel.jsx`)
- Projects API → HTTP client: sends requests (evidence: `frontend/src/api/ProjectsAPI.js`)
- Races API → HTTP client: sends requests (evidence: `frontend/src/api/RacesAPI.js`)
- Updates API → HTTP client: sends requests (evidence: `frontend/src/api/UpdatesAPI.js`)
- Admin API → HTTP client: sends requests (evidence: `frontend/src/api/AdminAPI.js`)
- User API → HTTP client: sends requests (evidence: `frontend/src/api/UserAPI.js`)
- HTTP client → Express server: HTTP requests
- Express server → Project routes: mounts (evidence: `backend/server.js`)
- Express server → Race routes: mounts (evidence: `backend/server.js`)
- Express server → Update routes: mounts (evidence: `backend/server.js`)
- Express server → Admin routes: mounts (evidence: `backend/server.js`)
- Express server → User routes: mounts (evidence: `backend/server.js`)
- Project routes → Admin auth: guards writes (evidence: `backend/routes/projects.js`)
- Project routes → Project model: queries and saves (evidence: `backend/routes/projects.js`)
- Project routes → Race model: queries races (evidence: `backend/routes/projects.js`)
- Project routes → Race refresh: refreshes races (evidence: `backend/routes/projects.js`)
- Project routes → Media object storage: stores media (evidence: `backend/routes/projects.js`)
- Race routes → Race model: queries and updates (evidence: `backend/routes/races.js`)
- Race routes → Project model: queries projects (evidence: `backend/routes/races.js`)
- Race routes → Race refresh: refreshes races (evidence: `backend/routes/races.js`)
- Update routes → Update model: queries and saves (evidence: `backend/routes/updates.js`)
- Update routes → Admin auth: guards admin actions (evidence: `backend/routes/updates.js`)
- Admin routes → Admin auth: checks access
- Project model → MongoDB: persists records
- Race model → MongoDB: persists records
- Update model → MongoDB: persists records
- Media object storage → AWS S3: stores objects