An interactive prerequisite dependency graph for UCSD students to plan and track their coursework. Visualize your entire academic path, including majors, minors, and GEs, as a live graph where each node is a course and each edge is a prerequisite.
Everything runs client-side. No account, no server, no data leaves your browser.
UCSD students pursuing double majors, minors, or complex degree paths often lose track of course ordering and prerequisite chains. Course Flow turns that complexity into a visual, interactive graph you can reason about at a glance.
- Each node is a course. Each edge is a prerequisite.
- Nodes are colored by status: taken, in progress, planning, not started.
- OR-branches (elective choices) surface as gray "unresolved" nodes until you pick a path.
- The graph auto-expands: satisfying a prerequisite propagates downstream and surfaces the next decision.
- Import from UCSD's plans.ucsd.edu data: 173 major plans and 112 minor programs are bundled.
- Select up to two majors, two minors, a college, and university requirements in one modal.
- The app auto-generates course groups and overlap rules based on your selections.
- Upload your UCSD degree audit PDF directly in the browser.
- The parser extracts course IDs, titles, units, completion status, and term/grade where available.
- Parsed courses are merged into your existing graph non-destructively.
- 7,227 courses from the UCSD catalog with parsed AND/OR prerequisite logic.
- Auto-layout using D3 force simulation and hierarchy for readable trees.
- Prerequisite chains expand automatically as you add courses.
- Right-click any node for quick status change or deletion.
- Click any node to open a detail panel with prerequisites, units, description, and purpose tags.
- OR prerequisites surface as unresolved gray nodes in the graph.
- Auto-resolve fires when exactly one option is satisfied.
- Manually pick a branch via a dropdown when multiple options are valid or none are taken.
- Resolution persists and propagates downstream immediately.
- Four statuses: Taken, In Progress, Planning, Not Started.
- Status drives prerequisite satisfaction throughout the entire graph.
- Quick-cycle status from the node itself or detail panel.
Courses are tagged with up to six categories: major, second major, minor, second minor, college GE, university requirement. Tags drive overlap calculations and the progress dashboard.
- Define course groups and set overlap caps between them (e.g. max 2 upper-division courses shared between major and minor).
- Supports both course-count and unit-count caps, with dual caps (e.g. at most 2 courses and at most 8 units).
- Auto-generated rules enforce UCSD's standard major/minor upper-division overlap constraints.
- Regenerate auto rules at any time after adding or changing programs.
- Completion stats per program (courses and units: taken / in progress / planning / total).
- Tracks courses removed from a degree plan separately, so nothing is silently lost.
- One-click restore for removed plan courses.
- Add any course from the catalog by ID or search by title.
- Assign purpose tags manually at add time.
- Edit prerequisite clauses for any course if the catalog data is wrong.
- Delete courses with smart recovery: prerequisite backlinks are preserved so the graph stays consistent.
- Export your full plan to a portable JSON file at any time.
- Re-import it later to restore your exact state: courses, statuses, OR selections, groups, overlap rules, and program info.
- Versioned format with forward-compatible migration on import.
- Full undo/redo stack (Cmd/Ctrl+Z, Cmd/Ctrl+Shift+Z) for all graph mutations.
- Toggle between dark and light themes. Preference persists across sessions.
All eight UCSD colleges are supported, with their specific GE sequences and category requirements.
?— open shortcut referenceCmd/Ctrl+Z— undoCmd/Ctrl+Shift+Z— redoEsc— close panel or modal
| Layer | Choice |
|---|---|
| Framework | React 19 + TypeScript |
| Build | Vite 7 |
| Graph | @xyflow/react (React Flow v12) |
| Layout | D3 force simulation + D3 hierarchy |
| Styling | Tailwind CSS v4 + CSS custom properties |
| UI primitives | Radix UI + shadcn-style components |
| PDF parsing | pdfjs-dist |
| Catalog scraping | Python 3 (requests, BeautifulSoup, tqdm) |
| Testing | Vitest (unit), Playwright (e2e), pytest (Python) |
| Linting | ESLint + typescript-eslint |
| Git hooks | Husky (lint + build + test on pre-commit) |
- Node.js 20+
- Python 3.8+ (only needed if you want to re-scrape catalog data)
npm install
npm run devOpen http://localhost:5173.
npm run build
npm run previewThe bundled course catalog and degree plans are pre-scraped snapshots. To refresh them:
pip install -r scripts/requirements.txtpython scripts/scrape_catalog.pyScrapes ~7,200 courses from the UCSD catalog with titles, units, descriptions, and parsed prerequisite clauses.
python scripts/scrape_plans.pyPulls all major degree plans and minor programs from plans.ucsd.edu.
python scripts/reparse_data.pyRegenerates src/data/all-courses-index.json for fast course search in the app.
# Run everything (unit + planner + python + e2e)
npm test
# Unit tests only (Vitest)
npm run test:unit
# Planner regression + contract tests (Node)
npm run test:planner
# Python scraper tests (pytest)
npm run test:python
# E2E tests (Playwright)
npm run test:e2e
# UI contract lint (checks for icon/emoji violations, etc.)
npm run test:ui-contractE2E tests cover: onboarding, course management, degree plan import, graph interaction, OR branch resolution, import/export, accessibility, and mobile layout.
The core save/restore format (GraphState) contains:
| Field | Description |
|---|---|
courses |
Array of courses with status and purpose links |
orSelections |
User's choices for each OR prerequisite branch |
groups |
Named course groups for overlap tracking |
overlapRules |
Rules with caps (course count and/or units) between groups |
programs |
Selected majors, minors, college |
removedPlanCourses |
Courses removed from a degree plan (kept for recovery) |
version |
Schema version for forward-compatible migration |
All processing happens in your browser. No data is sent to any server. The degree audit PDF you upload is parsed locally and never leaves your device.