# klstudyhub/cyber-tracker architecture

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

- Interactive diagram: https://gitdiagram.com/klstudyhub/cyber-tracker
- Repository: https://github.com/klstudyhub/cyber-tracker

## Overview

CyberTrack is a static React accountability tracker for an 800-day cybersecurity roadmap. Users set up a start date, work through the current day’s roadmap tasks, record a daily reflection and habits, and complete or miss the day; tracker state and progress persist locally. The app also presents progress, phases, ranks and badges, supports GitHub contribution syncing, report export and browser reminders. The central tracker and storage behavior is visible in sampled source; several feature-page implementations are unsampled, so their links are limited to documented capabilities and supported paths.

Main entry points: [`src/components/layout/Layout.jsx`](https://github.com/klstudyhub/cyber-tracker/blob/main/src/components/layout/Layout.jsx) (App layout), [`src/utils/storage.js`](https://github.com/klstudyhub/cyber-tracker/blob/main/src/utils/storage.js) (Local progress), [`src/App.jsx`](https://github.com/klstudyhub/cyber-tracker/blob/main/src/App.jsx) (App router), [`src/hooks/useTracker.js`](https://github.com/klstudyhub/cyber-tracker/blob/main/src/hooks/useTracker.js) (Tracker state)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_experience["App experience"]
  node_app["App router<br/>[App.jsx]"]
  node_onboarding["Onboarding<br/>[Onboarding.jsx]"]
  node_layout["App layout<br/>[Layout.jsx]"]
end

subgraph group_tracking["Daily tracking"]
  node_tasks["Today tasks<br/>[TodayTasks.jsx]"]
  node_report["Daily report<br/>[DailyReport.jsx]"]
  node_tracker["Tracker state<br/>[useTracker.js]"]
  node_roadmap["800-day roadmap<br/>[roadmap.json]"]
  node_habits["Habit definitions<br/>[habits.json]"]
  node_score["Score rules<br/>[scoreEngine.js]"]
  node_storage[("Local progress<br/>[storage.js]")]
end

subgraph group_progress["Progress insights"]
  node_dashboard["Progress dashboard<br/>[Dashboard.jsx]"]
  node_phases["Phase timeline<br/>[Phases.jsx]"]
  node_phase_data["Phase definitions<br/>[phases.json]"]
  node_badge_hook["Badge detection<br/>[useBadges.js]"]
  node_badges["Badge collection<br/>[Badges.jsx]"]
  node_badge_data["Badge definitions<br/>[badges.json]"]
end

subgraph group_integrations["External integrations"]
  node_github_ui["GitHub sync<br/>[GitHub.jsx]"]
  node_github_util["Contribution client<br/>[github.js]"]
  node_export_ui["Report export<br/>[Export.jsx]"]
  node_export_util["Export utilities<br/>[export.js]"]
  node_notifications["Reminder hook"]
  node_settings["Settings<br/>[Settings.jsx]"]
end

node_user(("Learner"))
node_github_service{{"GitHub API"}}
node_browser_notifications{{"Browser notifications"}}

node_user -->|"opens"| node_app
node_app -->|"shows before setup"| node_onboarding
node_app -->|"routes within"| node_layout
node_app -->|"initializes"| node_tracker
node_app -->|"watches progress"| node_badge_hook
node_app -->|"starts reminders"| node_notifications
node_layout -->|"routes to"| node_dashboard
node_layout -->|"routes to"| node_tasks
node_layout -->|"routes to"| node_report
node_layout -->|"routes to"| node_phases
node_layout -->|"routes to"| node_badges
node_layout -->|"routes to"| node_github_ui
node_layout -->|"routes to"| node_export_ui
node_layout -->|"routes to"| node_settings
node_tracker -->|"loads and saves"| node_storage
node_tracker -->|"reads current day"| node_roadmap
node_tracker -->|"calculates points"| node_score
node_tasks -->|"toggles tasks"| node_tracker
node_report -->|"saves report and habits"| node_storage
node_report -->|"loads definitions"| node_habits
node_report -->|"generates Markdown"| node_export_util
node_dashboard -->|"displays progress"| node_tracker
node_phases -->|"reads phases"| node_phase_data
node_badge_hook -->|"checks conditions"| node_badge_data
node_badge_hook -->|"reads and records badges"| node_storage
node_badges -->|"reads earned badges"| node_storage
node_github_ui -->|"stores credentials"| node_storage
node_github_ui -->|"fetches contributions"| node_github_util
node_github_util -.->|"requests contribution data"| node_github_service
node_export_ui -->|"exports reports"| node_export_util
node_export_ui -->|"reads tracker data"| node_storage
node_notifications -->|"reads preferences"| node_storage
node_notifications -.->|"requests and schedules"| node_browser_notifications
node_settings -->|"persists preferences"| node_storage

click node_app "https://github.com/klstudyhub/cyber-tracker/blob/main/src/App.jsx"
click node_onboarding "https://github.com/klstudyhub/cyber-tracker/blob/main/src/components/onboarding/Onboarding.jsx"
click node_layout "https://github.com/klstudyhub/cyber-tracker/blob/main/src/components/layout/Layout.jsx"
click node_tasks "https://github.com/klstudyhub/cyber-tracker/blob/main/src/components/tracker/TodayTasks.jsx"
click node_report "https://github.com/klstudyhub/cyber-tracker/blob/main/src/components/report/DailyReport.jsx"
click node_tracker "https://github.com/klstudyhub/cyber-tracker/blob/main/src/hooks/useTracker.js"
click node_roadmap "https://github.com/klstudyhub/cyber-tracker/blob/main/src/data/roadmap.json"
click node_habits "https://github.com/klstudyhub/cyber-tracker/blob/main/src/data/habits.json"
click node_score "https://github.com/klstudyhub/cyber-tracker/blob/main/src/utils/scoreEngine.js"
click node_storage "https://github.com/klstudyhub/cyber-tracker/blob/main/src/utils/storage.js"
click node_dashboard "https://github.com/klstudyhub/cyber-tracker/blob/main/src/components/dashboard/Dashboard.jsx"
click node_phases "https://github.com/klstudyhub/cyber-tracker/blob/main/src/components/phases/Phases.jsx"
click node_phase_data "https://github.com/klstudyhub/cyber-tracker/blob/main/src/data/phases.json"
click node_badge_hook "https://github.com/klstudyhub/cyber-tracker/blob/main/src/hooks/useBadges.js"
click node_badges "https://github.com/klstudyhub/cyber-tracker/blob/main/src/components/badges/Badges.jsx"
click node_badge_data "https://github.com/klstudyhub/cyber-tracker/blob/main/src/data/badges.json"
click node_github_ui "https://github.com/klstudyhub/cyber-tracker/blob/main/src/components/github/GitHub.jsx"
click node_github_util "https://github.com/klstudyhub/cyber-tracker/blob/main/src/utils/github.js"
click node_export_ui "https://github.com/klstudyhub/cyber-tracker/blob/main/src/components/export/Export.jsx"
click node_export_util "https://github.com/klstudyhub/cyber-tracker/blob/main/src/utils/export.js"
click node_notifications "https://github.com/klstudyhub/cyber-tracker/blob/main/src/hooks/useNotifications.js"
click node_settings "https://github.com/klstudyhub/cyber-tracker/blob/main/src/components/settings/Settings.jsx"

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_onboarding,node_layout,node_browser_notifications toneBlue
class node_tasks,node_report,node_tracker,node_roadmap,node_habits,node_score,node_storage toneAmber
class node_dashboard,node_phases,node_phase_data,node_badge_hook,node_badges,node_badge_data,node_github_service toneMint
class node_github_ui,node_github_util,node_export_ui,node_export_util,node_notifications,node_settings toneRose
class node_user toneIndigo
```

## Components

### App experience

- [App router](https://github.com/klstudyhub/cyber-tracker/blob/main/src/App.jsx): `src/App.jsx`
- [Onboarding](https://github.com/klstudyhub/cyber-tracker/blob/main/src/components/onboarding/Onboarding.jsx): `src/components/onboarding/Onboarding.jsx`
- [App layout](https://github.com/klstudyhub/cyber-tracker/blob/main/src/components/layout/Layout.jsx): `src/components/layout/Layout.jsx`

### Daily tracking

- [Today tasks](https://github.com/klstudyhub/cyber-tracker/blob/main/src/components/tracker/TodayTasks.jsx): `src/components/tracker/TodayTasks.jsx`
- [Daily report](https://github.com/klstudyhub/cyber-tracker/blob/main/src/components/report/DailyReport.jsx): `src/components/report/DailyReport.jsx`
- [Tracker state](https://github.com/klstudyhub/cyber-tracker/blob/main/src/hooks/useTracker.js): `src/hooks/useTracker.js`
- [800-day roadmap](https://github.com/klstudyhub/cyber-tracker/blob/main/src/data/roadmap.json): `src/data/roadmap.json`
- [Habit definitions](https://github.com/klstudyhub/cyber-tracker/blob/main/src/data/habits.json): `src/data/habits.json`
- [Score rules](https://github.com/klstudyhub/cyber-tracker/blob/main/src/utils/scoreEngine.js): `src/utils/scoreEngine.js`
- [Local progress](https://github.com/klstudyhub/cyber-tracker/blob/main/src/utils/storage.js): `src/utils/storage.js`

### Progress insights

- [Progress dashboard](https://github.com/klstudyhub/cyber-tracker/blob/main/src/components/dashboard/Dashboard.jsx): `src/components/dashboard/Dashboard.jsx`
- [Phase timeline](https://github.com/klstudyhub/cyber-tracker/blob/main/src/components/phases/Phases.jsx): `src/components/phases/Phases.jsx`
- [Phase definitions](https://github.com/klstudyhub/cyber-tracker/blob/main/src/data/phases.json): `src/data/phases.json`
- [Badge detection](https://github.com/klstudyhub/cyber-tracker/blob/main/src/hooks/useBadges.js): `src/hooks/useBadges.js`
- [Badge collection](https://github.com/klstudyhub/cyber-tracker/blob/main/src/components/badges/Badges.jsx): `src/components/badges/Badges.jsx`
- [Badge definitions](https://github.com/klstudyhub/cyber-tracker/blob/main/src/data/badges.json): `src/data/badges.json`

### External integrations

- [GitHub sync](https://github.com/klstudyhub/cyber-tracker/blob/main/src/components/github/GitHub.jsx): `src/components/github/GitHub.jsx`
- [Contribution client](https://github.com/klstudyhub/cyber-tracker/blob/main/src/utils/github.js): `src/utils/github.js`
- [Report export](https://github.com/klstudyhub/cyber-tracker/blob/main/src/components/export/Export.jsx): `src/components/export/Export.jsx`
- [Export utilities](https://github.com/klstudyhub/cyber-tracker/blob/main/src/utils/export.js): `src/utils/export.js`
- [Reminder hook](https://github.com/klstudyhub/cyber-tracker/blob/main/src/hooks/useNotifications.js): `src/hooks/useNotifications.js`
- [Settings](https://github.com/klstudyhub/cyber-tracker/blob/main/src/components/settings/Settings.jsx): `src/components/settings/Settings.jsx`

### Other components

- **Learner**
- **GitHub API**
- **Browser notifications**

## Connections

- Learner → App router: opens
- App router → Onboarding: shows before setup
- App router → App layout: routes within
- App router → Tracker state: initializes
- App router → Badge detection: watches progress
- App router → Reminder hook: starts reminders
- App layout → Progress dashboard: routes to
- App layout → Today tasks: routes to
- App layout → Daily report: routes to
- App layout → Phase timeline: routes to
- App layout → Badge collection: routes to
- App layout → GitHub sync: routes to
- App layout → Report export: routes to
- App layout → Settings: routes to
- Tracker state → Local progress: loads and saves
- Tracker state → 800-day roadmap: reads current day
- Tracker state → Score rules: calculates points
- Today tasks → Tracker state: toggles tasks
- Daily report → Local progress: saves report and habits
- Daily report → Habit definitions: loads definitions
- Daily report → Export utilities: generates Markdown
- Progress dashboard → Tracker state: displays progress
- Phase timeline → Phase definitions: reads phases
- Badge detection → Badge definitions: checks conditions
- Badge detection → Local progress: reads and records badges
- Badge collection → Local progress: reads earned badges
- GitHub sync → Local progress: stores credentials
- GitHub sync → Contribution client: fetches contributions
- Contribution client → GitHub API: requests contribution data
- Report export → Export utilities: exports reports
- Report export → Local progress: reads tracker data
- Reminder hook → Local progress: reads preferences
- Reminder hook → Browser notifications: requests and schedules
- Settings → Local progress: persists preferences