# zwiqler94/jz-portfolio architecture

> Architecture diagram of the GitHub repository zwiqler94/jz-portfolio, 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/zwiqler94/jz-portfolio
- Repository: https://github.com/zwiqler94/jz-portfolio
- Video tour (about a minute): https://gitdiagram.com/zwiqler94/jz-portfolio/video

## Overview

JzPortfolio is an Angular personal portfolio with a news/blog feed and a protected editor, backed by Express/Firebase Functions APIs and PostgreSQL. Visitors navigate portfolio, hobbies, contact, and blog content; the editor creates posts, while feed and link-preview endpoints read or update stored content. The graph includes documented UI areas and the sampled API/database path. Several frontend service-to-page calls are not visible in the excerpts, so those links are omitted rather than inferred.

Main entry points: [`src/app/app.routes.ts`](https://github.com/zwiqler94/jz-portfolio/blob/development/src/app/app.routes.ts) (Page routing), [`functions/src/routes/api.routes.ts`](https://github.com/zwiqler94/jz-portfolio/blob/development/functions/src/routes/api.routes.ts) (API routes), [`functions/src/controllers/db.controller.ts`](https://github.com/zwiqler94/jz-portfolio/blob/development/functions/src/controllers/db.controller.ts) (Database controller), [`functions/src/app.ts`](https://github.com/zwiqler94/jz-portfolio/blob/development/functions/src/app.ts) (Express app)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_web["Portfolio web app"]
  node_bootstrap["Angular bootstrap<br/>[main.ts]"]
  node_shell["Application shell<br/>[app.component.ts]"]
  node_routing["Page routing<br/>[app.routes.ts]"]
  node_auth["Authentication service<br/>[auth.service.ts]"]
  node_webconfig["Environment configuration<br/>[environment.ts]"]
end

subgraph group_content["Content experience"]
  node_home["Home and projects"]
  node_hobbies["Hobbies pages"]
  node_photos["Photography gallery"]
  node_gallery["Photo gallery component"]
  node_news["News feed page<br/>[news.component.ts]"]
  node_feed["Post feed<br/>[feed.component.ts]"]
  node_editor["Blog editor"]
  node_postui["Post composition"]
  node_postmodels["Post models<br/>[post.model.ts]"]
end

subgraph group_api["Functions API"]
  node_apiapp["Express app<br/>[app.ts]"]
  node_routes["API routes<br/>[api.routes.ts]"]
  node_middleware["API middleware"]
  node_postcontroller["Post controller<br/>[post.controller.ts]"]
  node_previewcontroller["Link preview controller"]
end

subgraph group_data["Persistence"]
  node_dbcontroller["Database controller<br/>[db.controller.ts]"]
  node_postgres[("PostgreSQL")]
end

node_visitor(("Visitor or editor"))
node_cloudinary["Cloudinary"]

node_visitor -->|"opens app"| node_bootstrap
node_bootstrap -->|"bootstraps"| node_shell
node_shell -->|"hosts routes"| node_routing
node_routing -->|"guards pages"| node_auth
node_routing -->|"loads"| node_home
node_routing -->|"loads"| node_hobbies
node_routing -->|"loads"| node_news
node_routing -->|"loads"| node_editor
node_photos -->|"uses"| node_gallery
node_news -->|"renders"| node_feed
node_webconfig -->|"configures API URL"| node_apiapp
node_apiapp -->|"sets middleware"| node_middleware
node_apiapp -->|"mounts routes"| node_routes
node_routes -->|"registers guards"| node_middleware
node_routes -->|"registers handlers"| node_postcontroller
node_routes -->|"registers handlers"| node_previewcontroller
node_routes -->|"constructs"| node_dbcontroller
node_postcontroller -->|"queries"| node_dbcontroller
node_previewcontroller -->|"queries"| node_dbcontroller
node_dbcontroller -->|"reads and writes"| node_postgres
node_postui -.->|"uses model"| node_postmodels
node_feed -.->|"uses model"| node_postmodels
node_photos -.->|"loads images"| node_cloudinary

click node_bootstrap "https://github.com/zwiqler94/jz-portfolio/blob/development/src/main.ts"
click node_shell "https://github.com/zwiqler94/jz-portfolio/blob/development/src/app/app.component.ts"
click node_routing "https://github.com/zwiqler94/jz-portfolio/blob/development/src/app/app.routes.ts"
click node_auth "https://github.com/zwiqler94/jz-portfolio/blob/development/src/app/services/auth-service/auth.service.ts"
click node_home "https://github.com/zwiqler94/jz-portfolio/tree/development/src/app/pages/home-page"
click node_hobbies "https://github.com/zwiqler94/jz-portfolio/blob/development/src/app/pages/hobbies/hobbies.component.ts"
click node_photos "https://github.com/zwiqler94/jz-portfolio/blob/development/src/app/pages/hobbies/photography-tab/photography-tab.component.ts"
click node_gallery "https://github.com/zwiqler94/jz-portfolio/blob/development/src/app/components/photo-gallery/photo-gallery.component.ts"
click node_news "https://github.com/zwiqler94/jz-portfolio/blob/development/src/app/pages/news/news.component.ts"
click node_feed "https://github.com/zwiqler94/jz-portfolio/blob/development/src/app/components/feed/feed.component.ts"
click node_editor "https://github.com/zwiqler94/jz-portfolio/blob/development/src/app/pages/editor-page/editor-page.component.ts"
click node_postui "https://github.com/zwiqler94/jz-portfolio/blob/development/src/app/components/new-post-dialog/new-post-dialog.component.ts"
click node_postmodels "https://github.com/zwiqler94/jz-portfolio/blob/development/src/app/components/models/post.model.ts"
click node_webconfig "https://github.com/zwiqler94/jz-portfolio/blob/development/src/environments/environment.ts"
click node_apiapp "https://github.com/zwiqler94/jz-portfolio/blob/development/functions/src/app.ts"
click node_routes "https://github.com/zwiqler94/jz-portfolio/blob/development/functions/src/routes/api.routes.ts"
click node_middleware "https://github.com/zwiqler94/jz-portfolio/blob/development/functions/src/middleware/general.middleware.ts"
click node_postcontroller "https://github.com/zwiqler94/jz-portfolio/blob/development/functions/src/controllers/post.controller.ts"
click node_previewcontroller "https://github.com/zwiqler94/jz-portfolio/blob/development/functions/src/controllers/link-preview.controller.ts"
click node_dbcontroller "https://github.com/zwiqler94/jz-portfolio/blob/development/functions/src/controllers/db.controller.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_bootstrap,node_shell,node_routing,node_auth,node_webconfig toneBlue
class node_home,node_hobbies,node_photos,node_gallery,node_news,node_feed,node_editor,node_postui,node_postmodels toneAmber
class node_apiapp,node_routes,node_middleware,node_postcontroller,node_previewcontroller toneMint
class node_dbcontroller,node_postgres toneRose
class node_visitor,node_cloudinary toneIndigo
```

## Components

### Portfolio web app

- [Angular bootstrap](https://github.com/zwiqler94/jz-portfolio/blob/development/src/main.ts): `src/main.ts`
- [Application shell](https://github.com/zwiqler94/jz-portfolio/blob/development/src/app/app.component.ts): `src/app/app.component.ts`
- [Page routing](https://github.com/zwiqler94/jz-portfolio/blob/development/src/app/app.routes.ts): `src/app/app.routes.ts`
- [Authentication service](https://github.com/zwiqler94/jz-portfolio/blob/development/src/app/services/auth-service/auth.service.ts): `src/app/services/auth-service/auth.service.ts`
- [Environment configuration](https://github.com/zwiqler94/jz-portfolio/blob/development/src/environments/environment.ts): `src/environments/environment.ts`

### Content experience

- [Home and projects](https://github.com/zwiqler94/jz-portfolio/tree/development/src/app/pages/home-page): `src/app/pages/home-page`
- [Hobbies pages](https://github.com/zwiqler94/jz-portfolio/blob/development/src/app/pages/hobbies/hobbies.component.ts): `src/app/pages/hobbies/hobbies.component.ts`
- [Photography gallery](https://github.com/zwiqler94/jz-portfolio/blob/development/src/app/pages/hobbies/photography-tab/photography-tab.component.ts): `src/app/pages/hobbies/photography-tab/photography-tab.component.ts`
- [Photo gallery component](https://github.com/zwiqler94/jz-portfolio/blob/development/src/app/components/photo-gallery/photo-gallery.component.ts): `src/app/components/photo-gallery/photo-gallery.component.ts`
- [News feed page](https://github.com/zwiqler94/jz-portfolio/blob/development/src/app/pages/news/news.component.ts): `src/app/pages/news/news.component.ts`
- [Post feed](https://github.com/zwiqler94/jz-portfolio/blob/development/src/app/components/feed/feed.component.ts): `src/app/components/feed/feed.component.ts`
- [Blog editor](https://github.com/zwiqler94/jz-portfolio/blob/development/src/app/pages/editor-page/editor-page.component.ts): `src/app/pages/editor-page/editor-page.component.ts`
- [Post composition](https://github.com/zwiqler94/jz-portfolio/blob/development/src/app/components/new-post-dialog/new-post-dialog.component.ts): `src/app/components/new-post-dialog/new-post-dialog.component.ts`
- [Post models](https://github.com/zwiqler94/jz-portfolio/blob/development/src/app/components/models/post.model.ts): `src/app/components/models/post.model.ts`

### Functions API

- [Express app](https://github.com/zwiqler94/jz-portfolio/blob/development/functions/src/app.ts): `functions/src/app.ts`
- [API routes](https://github.com/zwiqler94/jz-portfolio/blob/development/functions/src/routes/api.routes.ts): `functions/src/routes/api.routes.ts`
- [API middleware](https://github.com/zwiqler94/jz-portfolio/blob/development/functions/src/middleware/general.middleware.ts): `functions/src/middleware/general.middleware.ts`
- [Post controller](https://github.com/zwiqler94/jz-portfolio/blob/development/functions/src/controllers/post.controller.ts): `functions/src/controllers/post.controller.ts`
- [Link preview controller](https://github.com/zwiqler94/jz-portfolio/blob/development/functions/src/controllers/link-preview.controller.ts): `functions/src/controllers/link-preview.controller.ts`

### Persistence

- [Database controller](https://github.com/zwiqler94/jz-portfolio/blob/development/functions/src/controllers/db.controller.ts): `functions/src/controllers/db.controller.ts`
- **PostgreSQL**

### Other components

- **Visitor or editor**
- **Cloudinary**

## Connections

- Visitor or editor → Angular bootstrap: opens app (evidence: `src/main.ts`)
- Angular bootstrap → Application shell: bootstraps (evidence: `src/main.ts`)
- Application shell → Page routing: hosts routes (evidence: `src/app/app.component.ts`)
- Page routing → Authentication service: guards pages (evidence: `src/app/app.routes.ts`)
- Page routing → Home and projects: loads (evidence: `src/app/app.routes.ts`)
- Page routing → Hobbies pages: loads (evidence: `src/app/app.routes.ts`)
- Page routing → News feed page: loads (evidence: `src/app/app.routes.ts`)
- Page routing → Blog editor: loads (evidence: `src/app/app.routes.ts`)
- Photography gallery → Photo gallery component: uses (evidence: `src/app/pages/hobbies/photography-tab/photography-tab.component.ts`)
- News feed page → Post feed: renders (evidence: `src/app/pages/news/news.component.ts`)
- Environment configuration → Express app: configures API URL (evidence: `src/environments/environment.ts`)
- Express app → API middleware: sets middleware (evidence: `functions/src/app.ts`)
- Express app → API routes: mounts routes (evidence: `functions/src/app.ts`)
- API routes → API middleware: registers guards (evidence: `functions/src/routes/api.routes.ts`)
- API routes → Post controller: registers handlers (evidence: `functions/src/routes/api.routes.ts`)
- API routes → Link preview controller: registers handlers (evidence: `functions/src/routes/api.routes.ts`)
- API routes → Database controller: constructs (evidence: `functions/src/routes/api.routes.ts`)
- Post controller → Database controller: queries (evidence: `functions/src/controllers/post.controller.ts`)
- Link preview controller → Database controller: queries (evidence: `functions/src/controllers/link-preview.controller.ts`)
- Database controller → PostgreSQL: reads and writes (evidence: `functions/src/controllers/db.controller.ts`)
- Post composition → Post models: uses model
- Post feed → Post models: uses model
- Photography gallery → Cloudinary: loads images