# rudrajeetcodes/port architecture

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

- Interactive diagram: https://gitdiagram.com/rudrajeetcodes/port
- Repository: https://github.com/rudrajeetcodes/port

## Overview

This repository is a personal portfolio website with interactive landing and themed subpages, plus serverless endpoints that provide GitHub, WakaTime, and Spotify data. A visitor views the site; browser code renders portfolio interactions and requests selected data, while API handlers fetch external services and, for Spotify playback, use Redis caching. The sampled code confirms only some browser-to-API links, so unsampled UI wiring is not inferred. OAuth is represented as separate browser and server flows where the excerpts show their external requests.

Main entry points: [`api/spotify.js`](https://github.com/rudrajeetcodes/port/blob/main/api/spotify.js) (Playback endpoint), [`spotify.js`](https://github.com/rudrajeetcodes/port/blob/main/spotify.js) (Spotify browser client), [`index.html`](https://github.com/rudrajeetcodes/port/blob/main/index.html) (Portfolio page), [`script.js`](https://github.com/rudrajeetcodes/port/blob/main/script.js) (Page interactions)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_web["Portfolio website"]
  node_home["Portfolio page<br/>[index.html]"]
  node_site_interactions["Page interactions<br/>[script.js]"]
  node_fun_page["Fun page<br/>[fun.html]"]
  node_fun_navigation["Fun navigation<br/>[fun.js]"]
  node_personal_page["Personal page<br/>[personal.html]"]
  node_personal_navigation["Personal navigation<br/>[personal.js]"]
end

subgraph group_github["GitHub activity"]
  node_github_activity["GitHub activity<br/>[github.js]"]
  node_github_weekly["Weekly GitHub stats<br/>[github-weekly.js]"]
  node_github_contributions["Contribution calendar"]
  node_github_service{{"GitHub API"}}
end

subgraph group_spotify["Spotify integration"]
  node_spotify_client["Spotify browser client<br/>[spotify.js]"]
  node_spotify_api["Playback endpoint<br/>[spotify.js]"]
  node_spotify_login["OAuth login endpoint<br/>[spotify-login.js]"]
  node_spotify_callback["OAuth callback endpoint"]
  node_spotify_service{{"Spotify API"}}
  node_redis[("Redis cache")]
end

subgraph group_coding["Coding statistics"]
  node_wakatime["WakaTime statistics<br/>[wakatime.js]"]
  node_wakatime_service{{"WakaTime API"}}
end

node_visitor(("Visitor"))

node_visitor -->|"opens"| node_home
node_visitor -->|"opens"| node_fun_page
node_visitor -->|"opens"| node_personal_page
node_home -->|"runs"| node_site_interactions
node_fun_page -->|"runs"| node_fun_navigation
node_personal_page -->|"runs"| node_personal_navigation
node_site_interactions -->|"fetches"| node_github_contributions
node_github_activity -->|"queries"| node_github_service
node_github_weekly -->|"queries"| node_github_service
node_github_contributions -->|"queries"| node_github_service
node_spotify_client -->|"fetches"| node_spotify_api
node_spotify_api -->|"fetches"| node_spotify_service
node_spotify_api -->|"reads and writes"| node_redis
node_spotify_client -->|"requests authorization"| node_spotify_service
node_spotify_login -->|"redirects to authorize"| node_spotify_service
node_spotify_callback -->|"exchanges code"| node_spotify_service
node_wakatime -->|"fetches summaries"| node_wakatime_service

click node_home "https://github.com/rudrajeetcodes/port/blob/main/index.html"
click node_site_interactions "https://github.com/rudrajeetcodes/port/blob/main/script.js"
click node_fun_page "https://github.com/rudrajeetcodes/port/blob/main/Fun/fun.html"
click node_fun_navigation "https://github.com/rudrajeetcodes/port/blob/main/Fun/fun.js"
click node_personal_page "https://github.com/rudrajeetcodes/port/blob/main/Personal/personal.html"
click node_personal_navigation "https://github.com/rudrajeetcodes/port/blob/main/Personal/personal.js"
click node_github_activity "https://github.com/rudrajeetcodes/port/blob/main/api/github.js"
click node_github_weekly "https://github.com/rudrajeetcodes/port/blob/main/api/github-weekly.js"
click node_github_contributions "https://github.com/rudrajeetcodes/port/blob/main/api/github-contributions.js"
click node_spotify_client "https://github.com/rudrajeetcodes/port/blob/main/spotify.js"
click node_spotify_api "https://github.com/rudrajeetcodes/port/blob/main/api/spotify.js"
click node_spotify_login "https://github.com/rudrajeetcodes/port/blob/main/api/spotify-login.js"
click node_spotify_callback "https://github.com/rudrajeetcodes/port/blob/main/api/spotify-callback.js"
click node_wakatime "https://github.com/rudrajeetcodes/port/blob/main/api/wakatime.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_home,node_site_interactions,node_fun_page,node_fun_navigation,node_personal_page,node_personal_navigation toneBlue
class node_github_activity,node_github_weekly,node_github_contributions,node_github_service toneAmber
class node_spotify_client,node_spotify_api,node_spotify_login,node_spotify_callback,node_spotify_service,node_redis toneMint
class node_wakatime,node_wakatime_service toneRose
class node_visitor toneIndigo
```

## Components

### Portfolio website

- [Portfolio page](https://github.com/rudrajeetcodes/port/blob/main/index.html): `index.html`
- [Page interactions](https://github.com/rudrajeetcodes/port/blob/main/script.js): `script.js`
- [Fun page](https://github.com/rudrajeetcodes/port/blob/main/Fun/fun.html): `Fun/fun.html`
- [Fun navigation](https://github.com/rudrajeetcodes/port/blob/main/Fun/fun.js): `Fun/fun.js`
- [Personal page](https://github.com/rudrajeetcodes/port/blob/main/Personal/personal.html): `Personal/personal.html`
- [Personal navigation](https://github.com/rudrajeetcodes/port/blob/main/Personal/personal.js): `Personal/personal.js`

### GitHub activity

- [GitHub activity](https://github.com/rudrajeetcodes/port/blob/main/api/github.js): `api/github.js`
- [Weekly GitHub stats](https://github.com/rudrajeetcodes/port/blob/main/api/github-weekly.js): `api/github-weekly.js`
- [Contribution calendar](https://github.com/rudrajeetcodes/port/blob/main/api/github-contributions.js): `api/github-contributions.js`
- **GitHub API**

### Spotify integration

- [Spotify browser client](https://github.com/rudrajeetcodes/port/blob/main/spotify.js): `spotify.js`
- [Playback endpoint](https://github.com/rudrajeetcodes/port/blob/main/api/spotify.js): `api/spotify.js`
- [OAuth login endpoint](https://github.com/rudrajeetcodes/port/blob/main/api/spotify-login.js): `api/spotify-login.js`
- [OAuth callback endpoint](https://github.com/rudrajeetcodes/port/blob/main/api/spotify-callback.js): `api/spotify-callback.js`
- **Spotify API**
- **Redis cache**

### Coding statistics

- [WakaTime statistics](https://github.com/rudrajeetcodes/port/blob/main/api/wakatime.js): `api/wakatime.js`
- **WakaTime API**

### Other components

- **Visitor**

## Connections

- Visitor → Portfolio page: opens
- Visitor → Fun page: opens
- Visitor → Personal page: opens
- Portfolio page → Page interactions: runs
- Fun page → Fun navigation: runs
- Personal page → Personal navigation: runs
- Page interactions → Contribution calendar: fetches (evidence: `script.js`)
- GitHub activity → GitHub API: queries (evidence: `api/github.js`)
- Weekly GitHub stats → GitHub API: queries (evidence: `api/github-weekly.js`)
- Contribution calendar → GitHub API: queries (evidence: `api/github-contributions.js`)
- Spotify browser client → Playback endpoint: fetches (evidence: `spotify.js`)
- Playback endpoint → Spotify API: fetches (evidence: `api/spotify.js`)
- Playback endpoint → Redis cache: reads and writes (evidence: `api/spotify.js`)
- Spotify browser client → Spotify API: requests authorization (evidence: `spotify.js`)
- OAuth login endpoint → Spotify API: redirects to authorize (evidence: `api/spotify-login.js`)
- OAuth callback endpoint → Spotify API: exchanges code (evidence: `api/spotify-callback.js`)
- WakaTime statistics → WakaTime API: fetches summaries (evidence: `api/wakatime.js`)