As a student using the Explorer, I want course nodes to be color-coded by year level so I can quickly see the progression of the curriculum.
🧠 Context
src/components/CourseNode.tsx renders each node in the prerequisite graph. All nodes currently have the same border-gray-300 border regardless of course level.
Course codes follow the pattern DEPT XXXX (e.g. COMP 1405, COMP 3004) — the first digit of the numeric part indicates the year level: 1xxx, 2xxx, 3xxx, 4xxx.
The change is purely visual and isolated to CourseNode.tsx — no store changes, no new components.
🛠️ Implementation Plan
-
Open src/components/CourseNode.tsx.
-
Derive the year level from data.code by extracting the first digit of the numeric portion of the course code.
-
Replace the static border-gray-300 with a border color that varies by year level. Pick four visually distinct colors — one per level. Keep them readable against the white node background.
-
Run pnpm dev, open the Explorer, and verify nodes at each year level display a distinct border color.
✅ Acceptance Criteria
As a student using the Explorer, I want course nodes to be color-coded by year level so I can quickly see the progression of the curriculum.
🧠 Context
src/components/CourseNode.tsxrenders each node in the prerequisite graph. All nodes currently have the sameborder-gray-300border regardless of course level.Course codes follow the pattern
DEPT XXXX(e.g.COMP 1405,COMP 3004) — the first digit of the numeric part indicates the year level: 1xxx, 2xxx, 3xxx, 4xxx.The change is purely visual and isolated to
CourseNode.tsx— no store changes, no new components.🛠️ Implementation Plan
Open
src/components/CourseNode.tsx.Derive the year level from
data.codeby extracting the first digit of the numeric portion of the course code.Replace the static
border-gray-300with a border color that varies by year level. Pick four visually distinct colors — one per level. Keep them readable against the white node background.Run
pnpm dev, open the Explorer, and verify nodes at each year level display a distinct border color.✅ Acceptance Criteria
pnpm typecheckandpnpm teststill pass