How klstudyhub/cyber-tracker works
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: Layout.jsx App layout · storage.js Local progress · App.jsx App router · useTracker.js Tracker state
Components 25
App experience
- App router
src/App.jsx - Onboarding
src/components/onboarding/Onboarding.jsx - App layout
src/components/layout/Layout.jsx
Daily tracking
- Today tasks
src/components/tracker/TodayTasks.jsx - Daily report
src/components/report/DailyReport.jsx - Tracker state
src/hooks/useTracker.js - 800-day roadmap
src/data/roadmap.json - Habit definitions
src/data/habits.json - Score rules
src/utils/scoreEngine.js - Local progress
src/utils/storage.js
Progress insights
- Progress dashboard
src/components/dashboard/Dashboard.jsx - Phase timeline
src/components/phases/Phases.jsx - Phase definitions
src/data/phases.json - Badge detection
src/hooks/useBadges.js - Badge collection
src/components/badges/Badges.jsx - Badge definitions
src/data/badges.json
External integrations
- GitHub sync
src/components/github/GitHub.jsx - Contribution client
src/utils/github.js - Report export
src/components/export/Export.jsx - Export utilities
src/utils/export.js - Reminder hook
src/hooks/useNotifications.js - Settings
src/components/settings/Settings.jsx
Other components
- Learner
- GitHub API
- Browser notifications
Connections 34
- 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