# farizjr1/myportofolio architecture

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

## Overview

Fariz Jelang Ramadhan is a public portfolio backed by an accounting-oriented CMS and ATS CV generator. Visitors browse profile and project content or send a contact message; an administrator signs in, edits CMS data, manages CV records, and generates downloadable PDFs. The frontend routes to public, authentication, and admin screens, whose documented API capabilities are served by Express route modules and persisted through MongoDB models. The README documents email and auto-seeding capabilities; sampled source confirms auth mail and CV listing behavior, but not every page-to-endpoint call.

Main entry points: [`artifacts/api-server/src/routes/index.ts`](https://github.com/farizjr1/myportofolio/blob/main/artifacts/api-server/src/routes/index.ts) (API dispatch), [`artifacts/myportofolio/src/pages/admin`](https://github.com/farizjr1/myportofolio/tree/main/artifacts/myportofolio/src/pages/admin) (Admin workspace), [`artifacts/myportofolio/src/App.tsx`](https://github.com/farizjr1/myportofolio/blob/main/artifacts/myportofolio/src/App.tsx) (Web app routing), [`artifacts/api-server/src/models`](https://github.com/farizjr1/myportofolio/tree/main/artifacts/api-server/src/models) (Domain models)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_frontend["Portfolio frontend"]
  node_webapp["Web app routing<br/>[App.tsx]"]
  node_publicpages["Public pages"]
  node_authpages["Account screens"]
  node_adminpages["Admin workspace"]
  node_cvpdf["CV PDF generation<br/>[CvGenerator.tsx]"]
  node_tokenhelper["Token helper<br/>[auth.ts]"]
end

subgraph group_api["API services"]
  node_apiapp["Express application<br/>[app.ts]"]
  node_routeindex["API dispatch<br/>[index.ts]"]
  node_authroutes["Authentication routes<br/>[auth.ts]"]
  node_contactroutes["Contact route<br/>[contact.ts]"]
  node_profileroutes["Profile routes<br/>[profile.ts]"]
  node_portfolioroutes["Portfolio routes<br/>[portfolio.ts]"]
  node_contentroutes["Content routes<br/>[content.ts]"]
  node_cvroutes["CV routes<br/>[cv.ts]"]
  node_authmw["JWT and RBAC<br/>[auth.ts]"]
  node_mailer["Email service<br/>[mailer.ts]"]
end

subgraph group_data["Persistence"]
  node_mongodb["Database connector<br/>[mongodb.ts]"]
  node_seed["Seed templates<br/>[seed.ts]"]
  node_models["Domain models"]
end

subgraph group_integrations["External services"]
  node_mongo[("MongoDB")]
  node_smtp["Gmail SMTP"]
end

node_visitor(("Visitor"))
node_administrator(("Administrator"))

node_visitor -->|"browses"| node_webapp
node_administrator -->|"manages"| node_webapp
node_webapp -->|"routes"| node_publicpages
node_webapp -->|"routes"| node_authpages
node_webapp -->|"routes"| node_adminpages
node_authpages -->|"stores token"| node_tokenhelper
node_publicpages -->|"requests content"| node_apiapp
node_publicpages -->|"submits message"| node_contactroutes
node_authpages -->|"auth requests"| node_authroutes
node_adminpages -->|"edits profile"| node_profileroutes
node_adminpages -->|"manages projects"| node_portfolioroutes
node_adminpages -->|"edits content"| node_contentroutes
node_adminpages -->|"manages CV data"| node_cvroutes
node_adminpages -->|"opens generator"| node_cvpdf
node_cvpdf -->|"loads CV data"| node_cvroutes
node_webapp -->|"API requests"| node_apiapp
node_apiapp -->|"mounts routes"| node_routeindex
node_routeindex -->|"dispatches"| node_authroutes
node_routeindex -->|"dispatches"| node_contactroutes
node_routeindex -->|"dispatches"| node_profileroutes
node_routeindex -->|"dispatches"| node_portfolioroutes
node_routeindex -->|"dispatches"| node_contentroutes
node_routeindex -->|"dispatches"| node_cvroutes
node_authroutes -->|"issues tokens"| node_authmw
node_authroutes -->|"reads/writes users"| node_models
node_profileroutes -->|"reads/writes profile"| node_models
node_portfolioroutes -->|"reads/writes projects"| node_models
node_contentroutes -->|"reads/writes content"| node_models
node_cvroutes -->|"reads/writes CVs"| node_models
node_contactroutes -->|"sends notification"| node_mailer
node_authroutes -->|"sends account email"| node_mailer
node_mailer -.->|"delivers mail"| node_smtp
node_apiapp -->|"connects on startup"| node_mongodb
node_mongodb -.->|"connects"| node_mongo
node_mongodb -->|"seeds empty store"| node_seed
node_mongodb -->|"backs models"| node_models

click node_webapp "https://github.com/farizjr1/myportofolio/blob/main/artifacts/myportofolio/src/App.tsx"
click node_publicpages "https://github.com/farizjr1/myportofolio/tree/main/artifacts/myportofolio/src/pages"
click node_authpages "https://github.com/farizjr1/myportofolio/tree/main/artifacts/myportofolio/src/pages/auth"
click node_adminpages "https://github.com/farizjr1/myportofolio/tree/main/artifacts/myportofolio/src/pages/admin"
click node_cvpdf "https://github.com/farizjr1/myportofolio/blob/main/artifacts/myportofolio/src/pages/admin/CvGenerator.tsx"
click node_tokenhelper "https://github.com/farizjr1/myportofolio/blob/main/artifacts/myportofolio/src/lib/auth.ts"
click node_apiapp "https://github.com/farizjr1/myportofolio/blob/main/artifacts/api-server/src/app.ts"
click node_routeindex "https://github.com/farizjr1/myportofolio/blob/main/artifacts/api-server/src/routes/index.ts"
click node_authroutes "https://github.com/farizjr1/myportofolio/blob/main/artifacts/api-server/src/routes/auth.ts"
click node_contactroutes "https://github.com/farizjr1/myportofolio/blob/main/artifacts/api-server/src/routes/contact.ts"
click node_profileroutes "https://github.com/farizjr1/myportofolio/blob/main/artifacts/api-server/src/routes/profile.ts"
click node_portfolioroutes "https://github.com/farizjr1/myportofolio/blob/main/artifacts/api-server/src/routes/portfolio.ts"
click node_contentroutes "https://github.com/farizjr1/myportofolio/blob/main/artifacts/api-server/src/routes/content.ts"
click node_cvroutes "https://github.com/farizjr1/myportofolio/blob/main/artifacts/api-server/src/routes/cv.ts"
click node_authmw "https://github.com/farizjr1/myportofolio/blob/main/artifacts/api-server/src/middlewares/auth.ts"
click node_mailer "https://github.com/farizjr1/myportofolio/blob/main/artifacts/api-server/src/lib/mailer.ts"
click node_mongodb "https://github.com/farizjr1/myportofolio/blob/main/artifacts/api-server/src/lib/mongodb.ts"
click node_seed "https://github.com/farizjr1/myportofolio/blob/main/artifacts/api-server/src/lib/seed.ts"
click node_models "https://github.com/farizjr1/myportofolio/tree/main/artifacts/api-server/src/models"

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_webapp,node_publicpages,node_authpages,node_adminpages,node_cvpdf,node_tokenhelper toneBlue
class node_apiapp,node_routeindex,node_authroutes,node_contactroutes,node_profileroutes,node_portfolioroutes,node_contentroutes,node_cvroutes,node_authmw,node_mailer toneAmber
class node_mongodb,node_seed,node_models toneMint
class node_mongo,node_smtp toneRose
class node_visitor,node_administrator toneIndigo
```

## Components

### Portfolio frontend

- [Web app routing](https://github.com/farizjr1/myportofolio/blob/main/artifacts/myportofolio/src/App.tsx): `artifacts/myportofolio/src/App.tsx`
- [Public pages](https://github.com/farizjr1/myportofolio/tree/main/artifacts/myportofolio/src/pages): `artifacts/myportofolio/src/pages`
- [Account screens](https://github.com/farizjr1/myportofolio/tree/main/artifacts/myportofolio/src/pages/auth): `artifacts/myportofolio/src/pages/auth`
- [Admin workspace](https://github.com/farizjr1/myportofolio/tree/main/artifacts/myportofolio/src/pages/admin): `artifacts/myportofolio/src/pages/admin`
- [CV PDF generation](https://github.com/farizjr1/myportofolio/blob/main/artifacts/myportofolio/src/pages/admin/CvGenerator.tsx): `artifacts/myportofolio/src/pages/admin/CvGenerator.tsx`
- [Token helper](https://github.com/farizjr1/myportofolio/blob/main/artifacts/myportofolio/src/lib/auth.ts): `artifacts/myportofolio/src/lib/auth.ts`

### API services

- [Express application](https://github.com/farizjr1/myportofolio/blob/main/artifacts/api-server/src/app.ts): `artifacts/api-server/src/app.ts`
- [API dispatch](https://github.com/farizjr1/myportofolio/blob/main/artifacts/api-server/src/routes/index.ts): `artifacts/api-server/src/routes/index.ts`
- [Authentication routes](https://github.com/farizjr1/myportofolio/blob/main/artifacts/api-server/src/routes/auth.ts): `artifacts/api-server/src/routes/auth.ts`
- [Contact route](https://github.com/farizjr1/myportofolio/blob/main/artifacts/api-server/src/routes/contact.ts): `artifacts/api-server/src/routes/contact.ts`
- [Profile routes](https://github.com/farizjr1/myportofolio/blob/main/artifacts/api-server/src/routes/profile.ts): `artifacts/api-server/src/routes/profile.ts`
- [Portfolio routes](https://github.com/farizjr1/myportofolio/blob/main/artifacts/api-server/src/routes/portfolio.ts): `artifacts/api-server/src/routes/portfolio.ts`
- [Content routes](https://github.com/farizjr1/myportofolio/blob/main/artifacts/api-server/src/routes/content.ts): `artifacts/api-server/src/routes/content.ts`
- [CV routes](https://github.com/farizjr1/myportofolio/blob/main/artifacts/api-server/src/routes/cv.ts): `artifacts/api-server/src/routes/cv.ts`
- [JWT and RBAC](https://github.com/farizjr1/myportofolio/blob/main/artifacts/api-server/src/middlewares/auth.ts): `artifacts/api-server/src/middlewares/auth.ts`
- [Email service](https://github.com/farizjr1/myportofolio/blob/main/artifacts/api-server/src/lib/mailer.ts): `artifacts/api-server/src/lib/mailer.ts`

### Persistence

- [Database connector](https://github.com/farizjr1/myportofolio/blob/main/artifacts/api-server/src/lib/mongodb.ts): `artifacts/api-server/src/lib/mongodb.ts`
- [Seed templates](https://github.com/farizjr1/myportofolio/blob/main/artifacts/api-server/src/lib/seed.ts): `artifacts/api-server/src/lib/seed.ts`
- [Domain models](https://github.com/farizjr1/myportofolio/tree/main/artifacts/api-server/src/models): `artifacts/api-server/src/models`

### External services

- **MongoDB**
- **Gmail SMTP**

### Other components

- **Visitor**
- **Administrator**

## Connections

- Visitor → Web app routing: browses
- Administrator → Web app routing: manages
- Web app routing → Public pages: routes
- Web app routing → Account screens: routes
- Web app routing → Admin workspace: routes
- Account screens → Token helper: stores token
- Public pages → Express application: requests content
- Public pages → Contact route: submits message
- Account screens → Authentication routes: auth requests
- Admin workspace → Profile routes: edits profile
- Admin workspace → Portfolio routes: manages projects
- Admin workspace → Content routes: edits content
- Admin workspace → CV routes: manages CV data
- Admin workspace → CV PDF generation: opens generator
- CV PDF generation → CV routes: loads CV data
- Web app routing → Express application: API requests
- Express application → API dispatch: mounts routes
- API dispatch → Authentication routes: dispatches
- API dispatch → Contact route: dispatches
- API dispatch → Profile routes: dispatches
- API dispatch → Portfolio routes: dispatches
- API dispatch → Content routes: dispatches
- API dispatch → CV routes: dispatches
- Authentication routes → JWT and RBAC: issues tokens
- Authentication routes → Domain models: reads/writes users
- Profile routes → Domain models: reads/writes profile
- Portfolio routes → Domain models: reads/writes projects
- Content routes → Domain models: reads/writes content
- CV routes → Domain models: reads/writes CVs
- Contact route → Email service: sends notification
- Authentication routes → Email service: sends account email
- Email service → Gmail SMTP: delivers mail
- Express application → Database connector: connects on startup
- Database connector → MongoDB: connects
- Database connector → Seed templates: seeds empty store
- Database connector → Domain models: backs models