# uic-ccs-web-development-2026-2027/grade-compute architecture > Architecture diagram of the GitHub repository uic-ccs-web-development-2026-2027/grade-compute, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-11-13). It is an AI-made overview: check details against the source. - Interactive diagram: https://gitdiagram.com/uic-ccs-web-development-2026-2027/grade-compute - Repository: https://github.com/uic-ccs-web-development-2026-2027/grade-compute ## Overview CompUGrade is a student-facing grade tracking and prediction app. A student registers or signs in, manages subjects and grading rules, records scores, and views computed grades and history or plans toward a target. The main stages are authentication, subject and rule setup, score entry and grade computation, then history and sandbox analysis; browser storage and settings support that workflow. Phase 2 faculty/admin features are planned, not active. Some feature implementations were not sampled, so their documented capabilities are shown without speculative internal call chains. Main entry points: [`src/services/db.js`](https://github.com/uic-ccs-web-development-2026-2027/grade-compute/blob/main/src/services/db.js) (Browser database), [`src/app/App.jsx`](https://github.com/uic-ccs-web-development-2026-2027/grade-compute/blob/main/src/app/App.jsx) (App routes), [`src/features/subjects/hooks/useSubjectDetail.js`](https://github.com/uic-ccs-web-development-2026-2027/grade-compute/blob/main/src/features/subjects/hooks/useSubjectDetail.js) (Subject workflow), [`src/features/auth/hooks/useAuthForm.js`](https://github.com/uic-ccs-web-development-2026-2027/grade-compute/blob/main/src/features/auth/hooks/useAuthForm.js) (Authentication flow) ## Diagram (Mermaid) ```mermaid flowchart TD subgraph group_access["Access and app shell"] node_router["App routes
[App.jsx]"] node_login["Login and registration
[LoginRegister.jsx]"] node_authform["Authentication flow
[useAuthForm.js]"] node_accounts["Account validation
[accounts.js]"] end subgraph group_academics["Academic records"] node_dashboard["Student dashboard"] node_subjectlist["Subject management
[SubjectMenu.jsx]"] node_subjectdetail["Subject detail
[SubjectDetail.jsx]"] node_detailstate["Subject workflow"] node_records["Term score records"] node_rulepages["Grade rule pages
[RuleDetailPage.jsx]"] node_ruleeditor["Rule editor
[useRuleEditor.js]"] end subgraph group_analysis["Grade analysis"] node_history["Grade history
[history.js]"] node_historychart["History chart
[HistoryChart.jsx]"] node_sandboxpage["Target sandbox page"] node_sandbox["Sandbox planner"] end subgraph group_account["Persistence and settings"] node_settingspage["Account settings
[GlobalSettings.jsx]"] node_settingsstate["Settings state"] node_database[("Browser database
[db.js]")] node_dbhook["Database state hook
[useDb.js]"] node_session["Session state
[session.js]"] node_localstorage[("Browser localStorage")] end subgraph group_shared["Shared logic and UI"] node_gradecalc["Grade computation
[grades.js]"] node_rulelogic["Rule logic
[rules.js]"] node_termcalc["Term handling
[terms.js]"] node_format["Formatting utilities
[format.js]"] node_uikit["UI primitives
[button.jsx]"] end node_student(("Student")) node_student -->|"opens app"| node_router node_router -->|"routes to"| node_login node_login -->|"uses"| node_authform node_authform -->|"validates account"| node_accounts node_authform -->|"reads and saves"| node_database node_router -->|"routes to"| node_dashboard node_router -->|"routes to"| node_subjectdetail node_router -->|"routes to"| node_subjectlist node_student -->|"enters scores"| node_records node_subjectdetail -->|"uses"| node_detailstate node_detailstate -->|"reads and writes"| node_database node_detailstate -->|"computes grades"| node_gradecalc node_records -.->|"supports score entry"| node_detailstate node_gradecalc -->|"uses rules"| node_rulelogic node_gradecalc -->|"uses terms"| node_termcalc node_student -->|"manages rules"| node_rulepages node_rulepages -->|"uses editor"| node_ruleeditor node_ruleeditor -->|"reads and saves"| node_database node_ruleeditor -->|"uses rules"| node_rulelogic node_dashboard -->|"shows history"| node_historychart node_historychart -->|"builds chart data"| node_history node_student -->|"plans target"| node_sandboxpage node_sandboxpage -->|"presents planner"| node_sandbox node_student -->|"changes preferences"| node_settingspage node_settingspage -->|"uses settings state"| node_settingsstate node_settingsstate -.->|"stores preferences"| node_database node_dbhook -->|"reads and refreshes"| node_database node_database -->|"reads and writes"| node_localstorage node_database -->|"persists academic data"| node_student click node_router "https://github.com/uic-ccs-web-development-2026-2027/grade-compute/blob/main/src/app/App.jsx" click node_login "https://github.com/uic-ccs-web-development-2026-2027/grade-compute/blob/main/src/pages/auth/LoginRegister.jsx" click node_authform "https://github.com/uic-ccs-web-development-2026-2027/grade-compute/blob/main/src/features/auth/hooks/useAuthForm.js" click node_accounts "https://github.com/uic-ccs-web-development-2026-2027/grade-compute/blob/main/src/features/auth/lib/accounts.js" click node_dashboard "https://github.com/uic-ccs-web-development-2026-2027/grade-compute/blob/main/src/pages/student/StudentDashboard.jsx" click node_subjectlist "https://github.com/uic-ccs-web-development-2026-2027/grade-compute/blob/main/src/pages/student/SubjectMenu.jsx" click node_subjectdetail "https://github.com/uic-ccs-web-development-2026-2027/grade-compute/blob/main/src/pages/student/SubjectDetail.jsx" click node_detailstate "https://github.com/uic-ccs-web-development-2026-2027/grade-compute/blob/main/src/features/subjects/hooks/useSubjectDetail.js" click node_records "https://github.com/uic-ccs-web-development-2026-2027/grade-compute/blob/main/src/features/term-records/components/CurrentTermRecords.jsx" click node_gradecalc "https://github.com/uic-ccs-web-development-2026-2027/grade-compute/blob/main/src/lib/grades.js" click node_rulelogic "https://github.com/uic-ccs-web-development-2026-2027/grade-compute/blob/main/src/lib/rules.js" click node_rulepages "https://github.com/uic-ccs-web-development-2026-2027/grade-compute/blob/main/src/pages/student/RuleDetailPage.jsx" click node_ruleeditor "https://github.com/uic-ccs-web-development-2026-2027/grade-compute/blob/main/src/features/grade-rules/hooks/useRuleEditor.js" click node_history "https://github.com/uic-ccs-web-development-2026-2027/grade-compute/blob/main/src/lib/history.js" click node_historychart "https://github.com/uic-ccs-web-development-2026-2027/grade-compute/blob/main/src/components/history-chart/HistoryChart.jsx" click node_sandboxpage "https://github.com/uic-ccs-web-development-2026-2027/grade-compute/blob/main/src/pages/student/TargetGradeSandboxPage.jsx" click node_sandbox "https://github.com/uic-ccs-web-development-2026-2027/grade-compute/blob/main/src/features/sandbox/components/TargetGradeSandbox.jsx" click node_settingspage "https://github.com/uic-ccs-web-development-2026-2027/grade-compute/blob/main/src/pages/settings/GlobalSettings.jsx" click node_settingsstate "https://github.com/uic-ccs-web-development-2026-2027/grade-compute/blob/main/src/features/settings/hooks/useGlobalSettings.js" click node_database "https://github.com/uic-ccs-web-development-2026-2027/grade-compute/blob/main/src/services/db.js" click node_dbhook "https://github.com/uic-ccs-web-development-2026-2027/grade-compute/blob/main/src/hooks/useDb.js" click node_session "https://github.com/uic-ccs-web-development-2026-2027/grade-compute/blob/main/src/services/session.js" click node_termcalc "https://github.com/uic-ccs-web-development-2026-2027/grade-compute/blob/main/src/lib/terms.js" click node_format "https://github.com/uic-ccs-web-development-2026-2027/grade-compute/blob/main/src/lib/format.js" click node_uikit "https://github.com/uic-ccs-web-development-2026-2027/grade-compute/blob/main/src/components/ui/button.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_router,node_login,node_authform,node_accounts toneBlue class node_dashboard,node_subjectlist,node_subjectdetail,node_detailstate,node_records,node_rulepages,node_ruleeditor toneAmber class node_history,node_historychart,node_sandboxpage,node_sandbox toneMint class node_settingspage,node_settingsstate,node_database,node_dbhook,node_session,node_localstorage toneRose class node_gradecalc,node_rulelogic,node_termcalc,node_format,node_uikit,node_student toneIndigo ``` ## Components ### Access and app shell - [App routes](https://github.com/uic-ccs-web-development-2026-2027/grade-compute/blob/main/src/app/App.jsx): `src/app/App.jsx` - [Login and registration](https://github.com/uic-ccs-web-development-2026-2027/grade-compute/blob/main/src/pages/auth/LoginRegister.jsx): `src/pages/auth/LoginRegister.jsx` - [Authentication flow](https://github.com/uic-ccs-web-development-2026-2027/grade-compute/blob/main/src/features/auth/hooks/useAuthForm.js): `src/features/auth/hooks/useAuthForm.js` - [Account validation](https://github.com/uic-ccs-web-development-2026-2027/grade-compute/blob/main/src/features/auth/lib/accounts.js): `src/features/auth/lib/accounts.js` ### Academic records - [Student dashboard](https://github.com/uic-ccs-web-development-2026-2027/grade-compute/blob/main/src/pages/student/StudentDashboard.jsx): `src/pages/student/StudentDashboard.jsx` - [Subject management](https://github.com/uic-ccs-web-development-2026-2027/grade-compute/blob/main/src/pages/student/SubjectMenu.jsx): `src/pages/student/SubjectMenu.jsx` - [Subject detail](https://github.com/uic-ccs-web-development-2026-2027/grade-compute/blob/main/src/pages/student/SubjectDetail.jsx): `src/pages/student/SubjectDetail.jsx` - [Subject workflow](https://github.com/uic-ccs-web-development-2026-2027/grade-compute/blob/main/src/features/subjects/hooks/useSubjectDetail.js): `src/features/subjects/hooks/useSubjectDetail.js` - [Term score records](https://github.com/uic-ccs-web-development-2026-2027/grade-compute/blob/main/src/features/term-records/components/CurrentTermRecords.jsx): `src/features/term-records/components/CurrentTermRecords.jsx` - [Grade rule pages](https://github.com/uic-ccs-web-development-2026-2027/grade-compute/blob/main/src/pages/student/RuleDetailPage.jsx): `src/pages/student/RuleDetailPage.jsx` - [Rule editor](https://github.com/uic-ccs-web-development-2026-2027/grade-compute/blob/main/src/features/grade-rules/hooks/useRuleEditor.js): `src/features/grade-rules/hooks/useRuleEditor.js` ### Grade analysis - [Grade history](https://github.com/uic-ccs-web-development-2026-2027/grade-compute/blob/main/src/lib/history.js): `src/lib/history.js` - [History chart](https://github.com/uic-ccs-web-development-2026-2027/grade-compute/blob/main/src/components/history-chart/HistoryChart.jsx): `src/components/history-chart/HistoryChart.jsx` - [Target sandbox page](https://github.com/uic-ccs-web-development-2026-2027/grade-compute/blob/main/src/pages/student/TargetGradeSandboxPage.jsx): `src/pages/student/TargetGradeSandboxPage.jsx` - [Sandbox planner](https://github.com/uic-ccs-web-development-2026-2027/grade-compute/blob/main/src/features/sandbox/components/TargetGradeSandbox.jsx): `src/features/sandbox/components/TargetGradeSandbox.jsx` ### Persistence and settings - [Account settings](https://github.com/uic-ccs-web-development-2026-2027/grade-compute/blob/main/src/pages/settings/GlobalSettings.jsx): `src/pages/settings/GlobalSettings.jsx` - [Settings state](https://github.com/uic-ccs-web-development-2026-2027/grade-compute/blob/main/src/features/settings/hooks/useGlobalSettings.js): `src/features/settings/hooks/useGlobalSettings.js` - [Browser database](https://github.com/uic-ccs-web-development-2026-2027/grade-compute/blob/main/src/services/db.js): `src/services/db.js` - [Database state hook](https://github.com/uic-ccs-web-development-2026-2027/grade-compute/blob/main/src/hooks/useDb.js): `src/hooks/useDb.js` - [Session state](https://github.com/uic-ccs-web-development-2026-2027/grade-compute/blob/main/src/services/session.js): `src/services/session.js` - **Browser localStorage** ### Shared logic and UI - [Grade computation](https://github.com/uic-ccs-web-development-2026-2027/grade-compute/blob/main/src/lib/grades.js): `src/lib/grades.js` - [Rule logic](https://github.com/uic-ccs-web-development-2026-2027/grade-compute/blob/main/src/lib/rules.js): `src/lib/rules.js` - [Term handling](https://github.com/uic-ccs-web-development-2026-2027/grade-compute/blob/main/src/lib/terms.js): `src/lib/terms.js` - [Formatting utilities](https://github.com/uic-ccs-web-development-2026-2027/grade-compute/blob/main/src/lib/format.js): `src/lib/format.js` - [UI primitives](https://github.com/uic-ccs-web-development-2026-2027/grade-compute/blob/main/src/components/ui/button.jsx): `src/components/ui/button.jsx` ### Other components - **Student** ## Connections - Student → App routes: opens app (evidence: `README.md`) - App routes → Login and registration: routes to (evidence: `src/app/App.jsx`) - Login and registration → Authentication flow: uses (evidence: `src/pages/auth/LoginRegister.jsx`) - Authentication flow → Account validation: validates account (evidence: `src/features/auth/hooks/useAuthForm.js`) - Authentication flow → Browser database: reads and saves (evidence: `src/features/auth/hooks/useAuthForm.js`) - App routes → Student dashboard: routes to (evidence: `src/app/App.jsx`) - App routes → Subject detail: routes to (evidence: `src/app/App.jsx`) - App routes → Subject management: routes to (evidence: `src/app/App.jsx`) - Student → Term score records: enters scores (evidence: `README.md`) - Subject detail → Subject workflow: uses (evidence: `src/features/subjects/hooks/useSubjectDetail.js`) - Subject workflow → Browser database: reads and writes (evidence: `src/features/subjects/hooks/useSubjectDetail.js`) - Subject workflow → Grade computation: computes grades (evidence: `src/features/subjects/hooks/useSubjectDetail.js`) - Term score records → Subject workflow: supports score entry - Grade computation → Rule logic: uses rules (evidence: `src/lib/rules.js`) - Grade computation → Term handling: uses terms (evidence: `src/lib/grades.js`) - Student → Grade rule pages: manages rules (evidence: `README.md`) - Grade rule pages → Rule editor: uses editor (evidence: `src/pages/student/RuleDetailPage.jsx`) - Rule editor → Browser database: reads and saves (evidence: `src/features/grade-rules/hooks/useRuleEditor.js`) - Rule editor → Rule logic: uses rules (evidence: `src/features/grade-rules/hooks/useRuleEditor.js`) - Student dashboard → History chart: shows history (evidence: `README.md`) - History chart → Grade history: builds chart data (evidence: `src/components/history-chart/HistoryChart.jsx`) - Student → Target sandbox page: plans target (evidence: `README.md`) - Target sandbox page → Sandbox planner: presents planner (evidence: `README.md`) - Student → Account settings: changes preferences (evidence: `README.md`) - Account settings → Settings state: uses settings state (evidence: `src/pages/settings/GlobalSettings.jsx`) - Settings state → Browser database: stores preferences - Database state hook → Browser database: reads and refreshes (evidence: `src/hooks/useDb.js`) - Browser database → Browser localStorage: reads and writes (evidence: `src/services/db.js`) - Browser database → Student: persists academic data (evidence: `README.md`)