# asaromi/research-portfolio-monorepo architecture

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

- Interactive diagram: https://gitdiagram.com/asaromi/research-portfolio-monorepo
- Repository: https://github.com/asaromi/research-portfolio-monorepo

## Overview

This is a personal portfolio website with a public review feature. Visitors browse the portfolio’s profile, experience, projects, tools, and contact content; they can also view reviews or submit one. The review workflow runs from the frontend API client through the API route, validation, service, and repository to Supabase. The tree identifies additional portfolio sections whose page-level wiring was not sampled, so their internal interactions are not shown. The diagram reflects sampled API behavior and the capabilities indicated by the frontend tree.

Main entry points: [`frontend/src/configs/routers.js`](https://github.com/asaromi/research-portfolio-monorepo/blob/master/frontend/src/configs/routers.js) (Page router), [`api/src/reviews/reviews.controller.ts`](https://github.com/asaromi/research-portfolio-monorepo/blob/master/api/src/reviews/reviews.controller.ts) (Review routes), [`frontend/src/pages/public/review/index.vue`](https://github.com/asaromi/research-portfolio-monorepo/blob/master/frontend/src/pages/public/review/index.vue) (Reviews page), [`api/src/reviews/reviews.service.ts`](https://github.com/asaromi/research-portfolio-monorepo/blob/master/api/src/reviews/reviews.service.ts) (Review service)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_site["Portfolio site"]
  node_app["Vue application<br/>[App.vue]"]
  node_router["Page router<br/>[routers.js]"]
  node_portfolio["Portfolio content"]
end

subgraph group_review_ui["Review experience"]
  node_review_page["Reviews page<br/>[index.vue]"]
  node_review_card["Review card<br/>[ReviewCard.vue]"]
  node_review_client["Review API client<br/>[review.js]"]
end

subgraph group_review_api["Review API"]
  node_api["API application<br/>[index.ts]"]
  node_review_routes["Review routes"]
  node_validation["Request validation"]
  node_middleware["API middleware"]
  node_service["Review service<br/>[reviews.service.ts]"]
  node_repository["Review repository"]
  node_dto["Review responses<br/>[review.dto.ts]"]
  node_supabase_util["Supabase setup<br/>[util.supabase.ts]"]
end

node_visitor(("Visitor"))
node_supabase[("Supabase reviews")]

node_visitor -->|"navigates"| node_router
node_router -->|"renders routes"| node_app
node_router -->|"renders portfolio"| node_portfolio
node_router -->|"renders reviews"| node_review_page
node_review_page -->|"renders reviews"| node_review_card
node_review_page -->|"requests reviews"| node_review_client
node_visitor -->|"submits review"| node_review_page
node_review_client -->|"HTTP requests"| node_api
node_api -->|"dispatches"| node_review_routes
node_review_routes -->|"connects Supabase"| node_middleware
node_review_routes -->|"validates submissions"| node_validation
node_review_routes -->|"calls"| node_service
node_service -->|"queries reviews"| node_repository
node_repository -->|"initializes client"| node_supabase_util
node_repository -->|"reads and writes"| node_supabase
node_service -->|"formats responses"| node_dto

click node_app "https://github.com/asaromi/research-portfolio-monorepo/blob/master/frontend/src/App.vue"
click node_router "https://github.com/asaromi/research-portfolio-monorepo/blob/master/frontend/src/configs/routers.js"
click node_portfolio "https://github.com/asaromi/research-portfolio-monorepo/tree/master/frontend/src/pages/public"
click node_review_page "https://github.com/asaromi/research-portfolio-monorepo/blob/master/frontend/src/pages/public/review/index.vue"
click node_review_card "https://github.com/asaromi/research-portfolio-monorepo/blob/master/frontend/src/pages/public/review/components/ReviewCard.vue"
click node_review_client "https://github.com/asaromi/research-portfolio-monorepo/blob/master/frontend/src/api/review.js"
click node_api "https://github.com/asaromi/research-portfolio-monorepo/blob/master/api/src/index.ts"
click node_review_routes "https://github.com/asaromi/research-portfolio-monorepo/blob/master/api/src/reviews/reviews.controller.ts"
click node_validation "https://github.com/asaromi/research-portfolio-monorepo/blob/master/api/src/reviews/reviews.validation.ts"
click node_middleware "https://github.com/asaromi/research-portfolio-monorepo/blob/master/api/src/common/common.middleware.ts"
click node_service "https://github.com/asaromi/research-portfolio-monorepo/blob/master/api/src/reviews/reviews.service.ts"
click node_repository "https://github.com/asaromi/research-portfolio-monorepo/blob/master/api/src/reviews/reviews.repository.ts"
click node_dto "https://github.com/asaromi/research-portfolio-monorepo/blob/master/api/src/reviews/review.dto.ts"
click node_supabase_util "https://github.com/asaromi/research-portfolio-monorepo/blob/master/api/src/utils/util.supabase.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_router,node_portfolio toneBlue
class node_review_page,node_review_card,node_review_client,node_supabase toneAmber
class node_api,node_review_routes,node_validation,node_middleware,node_service,node_repository,node_dto,node_supabase_util toneMint
class node_visitor toneIndigo
```

## Components

### Portfolio site

- [Vue application](https://github.com/asaromi/research-portfolio-monorepo/blob/master/frontend/src/App.vue): `frontend/src/App.vue`
- [Page router](https://github.com/asaromi/research-portfolio-monorepo/blob/master/frontend/src/configs/routers.js): `frontend/src/configs/routers.js`
- [Portfolio content](https://github.com/asaromi/research-portfolio-monorepo/tree/master/frontend/src/pages/public): `frontend/src/pages/public`

### Review experience

- [Reviews page](https://github.com/asaromi/research-portfolio-monorepo/blob/master/frontend/src/pages/public/review/index.vue): `frontend/src/pages/public/review/index.vue`
- [Review card](https://github.com/asaromi/research-portfolio-monorepo/blob/master/frontend/src/pages/public/review/components/ReviewCard.vue): `frontend/src/pages/public/review/components/ReviewCard.vue`
- [Review API client](https://github.com/asaromi/research-portfolio-monorepo/blob/master/frontend/src/api/review.js): `frontend/src/api/review.js`

### Review API

- [API application](https://github.com/asaromi/research-portfolio-monorepo/blob/master/api/src/index.ts): `api/src/index.ts`
- [Review routes](https://github.com/asaromi/research-portfolio-monorepo/blob/master/api/src/reviews/reviews.controller.ts): `api/src/reviews/reviews.controller.ts`
- [Request validation](https://github.com/asaromi/research-portfolio-monorepo/blob/master/api/src/reviews/reviews.validation.ts): `api/src/reviews/reviews.validation.ts`
- [API middleware](https://github.com/asaromi/research-portfolio-monorepo/blob/master/api/src/common/common.middleware.ts): `api/src/common/common.middleware.ts`
- [Review service](https://github.com/asaromi/research-portfolio-monorepo/blob/master/api/src/reviews/reviews.service.ts): `api/src/reviews/reviews.service.ts`
- [Review repository](https://github.com/asaromi/research-portfolio-monorepo/blob/master/api/src/reviews/reviews.repository.ts): `api/src/reviews/reviews.repository.ts`
- [Review responses](https://github.com/asaromi/research-portfolio-monorepo/blob/master/api/src/reviews/review.dto.ts): `api/src/reviews/review.dto.ts`
- [Supabase setup](https://github.com/asaromi/research-portfolio-monorepo/blob/master/api/src/utils/util.supabase.ts): `api/src/utils/util.supabase.ts`

### Other components

- **Visitor**
- **Supabase reviews**

## Connections

- Visitor → Page router: navigates
- Page router → Vue application: renders routes
- Page router → Portfolio content: renders portfolio
- Page router → Reviews page: renders reviews
- Reviews page → Review card: renders reviews
- Reviews page → Review API client: requests reviews
- Visitor → Reviews page: submits review
- Review API client → API application: HTTP requests
- API application → Review routes: dispatches
- Review routes → API middleware: connects Supabase
- Review routes → Request validation: validates submissions
- Review routes → Review service: calls
- Review service → Review repository: queries reviews
- Review repository → Supabase setup: initializes client
- Review repository → Supabase reviews: reads and writes
- Review service → Review responses: formats responses