# markjustine28/ojt-hours-tracker architecture

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

- Interactive diagram: https://gitdiagram.com/markjustine28/ojt-hours-tracker
- Repository: https://github.com/markjustine28/ojt-hours-tracker

## Overview

OJT Hours Tracker lets users record daily hours and status, configure a required-hours target, review monthly progress, and export DTR reports. The browser app calls a shared Express API, which validates requests and reads or writes settings and entries in Firestore; the same API is started locally or exposed through Firebase Functions. The graph also includes the documented dashboard/reporting capability. Its exact behavior is only partly visible in script.js, and dashboard.html is present but unsampled, so those details are not expanded.

Main entry points: [`functions/firestore-app.js`](https://github.com/markjustine28/ojt-hours-tracker/blob/main/functions/firestore-app.js) (Express API), [`script.js`](https://github.com/markjustine28/ojt-hours-tracker/blob/main/script.js) (Calendar tracker), [`index.html`](https://github.com/markjustine28/ojt-hours-tracker/blob/main/index.html) (Tracker pages), [`dashboard.html`](https://github.com/markjustine28/ojt-hours-tracker/blob/main/dashboard.html) (Dashboard page)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_client["Browser app"]
  node_tracker["Calendar tracker<br/>[script.js]"]
  node_dashboard["Progress dashboard<br/>[script.js]"]
  node_webpage["Tracker pages<br/>[index.html]"]
  node_dashboardpage["Dashboard page<br/>[dashboard.html]"]
end

subgraph group_api["API service"]
  node_express["Express API<br/>[firestore-app.js]"]
  node_api_routes["API handlers<br/>[firestore-app.js]"]
  node_localhost["Node server<br/>[server.js]"]
  node_cloudfn["Firebase endpoint<br/>[index.js]"]
end

subgraph group_persistence["Persistence"]
  node_firebase_init["Firebase setup<br/>[firebase-config.js]"]
  node_firestore[("Firestore")]
end

node_user(("Tracker user"))

node_user -->|"opens"| node_webpage
node_webpage -.->|"loads script"| node_tracker
node_user -->|"views"| node_dashboardpage
node_dashboardpage -.->|"loads script"| node_dashboard
node_tracker -->|"requests data"| node_express
node_dashboard -.->|"requests data"| node_express
node_express -->|"routes requests"| node_api_routes
node_localhost -->|"creates app"| node_express
node_cloudfn -->|"exposes app"| node_express
node_express -->|"initializes"| node_firebase_init
node_api_routes -->|"reads and writes"| node_firestore
node_firebase_init -->|"provides access"| node_firestore

click node_tracker "https://github.com/markjustine28/ojt-hours-tracker/blob/main/script.js"
click node_dashboard "https://github.com/markjustine28/ojt-hours-tracker/blob/main/script.js"
click node_webpage "https://github.com/markjustine28/ojt-hours-tracker/blob/main/index.html"
click node_dashboardpage "https://github.com/markjustine28/ojt-hours-tracker/blob/main/dashboard.html"
click node_express "https://github.com/markjustine28/ojt-hours-tracker/blob/main/functions/firestore-app.js"
click node_api_routes "https://github.com/markjustine28/ojt-hours-tracker/blob/main/functions/firestore-app.js"
click node_localhost "https://github.com/markjustine28/ojt-hours-tracker/blob/main/server.js"
click node_cloudfn "https://github.com/markjustine28/ojt-hours-tracker/blob/main/functions/index.js"
click node_firebase_init "https://github.com/markjustine28/ojt-hours-tracker/blob/main/functions/firebase-config.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_tracker,node_dashboard,node_webpage,node_dashboardpage,node_user toneBlue
class node_express,node_api_routes,node_localhost,node_cloudfn toneAmber
class node_firebase_init,node_firestore toneMint
```

## Components

### Browser app

- [Calendar tracker](https://github.com/markjustine28/ojt-hours-tracker/blob/main/script.js): `script.js`
- [Progress dashboard](https://github.com/markjustine28/ojt-hours-tracker/blob/main/script.js): `script.js`
- [Tracker pages](https://github.com/markjustine28/ojt-hours-tracker/blob/main/index.html): `index.html`
- [Dashboard page](https://github.com/markjustine28/ojt-hours-tracker/blob/main/dashboard.html): `dashboard.html`

### API service

- [Express API](https://github.com/markjustine28/ojt-hours-tracker/blob/main/functions/firestore-app.js): `functions/firestore-app.js`
- [API handlers](https://github.com/markjustine28/ojt-hours-tracker/blob/main/functions/firestore-app.js): `functions/firestore-app.js`
- [Node server](https://github.com/markjustine28/ojt-hours-tracker/blob/main/server.js): `server.js`
- [Firebase endpoint](https://github.com/markjustine28/ojt-hours-tracker/blob/main/functions/index.js): `functions/index.js`

### Persistence

- [Firebase setup](https://github.com/markjustine28/ojt-hours-tracker/blob/main/functions/firebase-config.js): `functions/firebase-config.js`
- **Firestore**

### Other components

- **Tracker user**

## Connections

- Tracker user → Tracker pages: opens (evidence: `README.md`)
- Tracker pages → Calendar tracker: loads script
- Tracker user → Dashboard page: views (evidence: `README.md`)
- Dashboard page → Progress dashboard: loads script
- Calendar tracker → Express API: requests data (evidence: `script.js`)
- Progress dashboard → Express API: requests data
- Express API → API handlers: routes requests (evidence: `functions/firestore-app.js`)
- Node server → Express API: creates app (evidence: `server.js`)
- Firebase endpoint → Express API: exposes app (evidence: `functions/index.js`)
- Express API → Firebase setup: initializes (evidence: `functions/firestore-app.js`)
- API handlers → Firestore: reads and writes (evidence: `functions/firestore-app.js`)
- Firebase setup → Firestore: provides access (evidence: `functions/firebase-config.js`)