UCSC Major Classes Planner (College Planner Webapp)

A React-based planner that helps UCSC students build a quarter-by-quarter 4-year plan. Search a major, drag & drop required courses into a calendar grid, view prerequisites, and export the plan to CSV.

---

Features

• Major search with dropdown and remote fetch of requirements/prereqs.
• Drag & drop schedule builder across Fall/Winter/Spring/Summer for 4 years.
• Course detail popups showing prerequisites.
• Export to CSV with a single click.
• GE palette for dropping GE requirements.
• Global app state via React Context.

---

Tech Stack

• Frontend: React 18, CRA toolchain, react-dnd, react-select, reactjs-popup.
• Utilities: papaparse (CSV), testing-library (dev).
• Styling: Plain CSS modules per component.
• Data source: REST endpoint .../api/majors/<Major Name> returning requirements and prerequisites.

---

Project Structure

purrgod-college-planner-webapp/
├── README.md
├── package.json
├── public/
│   ├── index.html
│   └── manifest.json
├── src/
│   ├── App.js                 # App shell + providers
│   ├── Bar.js / Bar.css       # Top bar + Export button
│   ├── Calendar.js / .css     # Main layout (search + grid + side panels)
│   ├── ClassesList.js / .css  # Major requirements list + prerequisite popup
│   ├── GEList.js / .css       # GE “tiles” palette with popup
│   ├── GridComponent.js / .css# 4x4 quarter grid, drag & drop, CSV export
│   ├── MajorContext.js        # Context for prereqs + indexing
│   ├── Search.js / .css       # Major dropdown + fetch logic
│   ├── index.js / index.css
│   └── App.css
├── web.py, mon.py             # Catalog scraper prototypes (BeautifulSoup)
└── tempCodeRunnerFile.py

---

Getting Started

Prerequisites

• Node.js 16+ and npm.

Install & Run

# install
npm install

# start dev server
npm start

# production build
npm run build

The app will open at http://localhost:3000/.

---

Usage Guide

1. Search a major in the top search bar (e.g., “Computer Science: Computer Game Design B.S.”), then click Search.
   The app fetches requirements and prerequisites for the major and populates the Major Reqs panel. :contentReference[oaicite:2]{index=2}
2. Drag classes from the Major Reqs panel (left) or GE’s panel (right) into any quarter cell in the 4-year grid.
3. View prerequisites: click a course in Major Reqs to open a popup with prereq info. :contentReference[oaicite:3]{index=3}
4. Remove a class: double-click a class inside a grid cell to delete it from that cell. :contentReference[oaicite:4]{index=4}
5. Export: click Export to CSV in the top bar to download 4-year-plan.csv. :contentReference

---

Key Components & Data Flow

• Search.js

  • Renders a searchable dropdown (react-select).
  • On Search, calls GET https://uscc-classes.osc-fr1.scalingo.io/api/majors/<Major Name> and updates context with:
    • preReq (array/object mapping) and majorIndexes (course→index).
    • Passes requirements to Calendar to render Major Reqs. :contentReference[oaicite:6]{index=6}

• ClassesList.js

  • Displays the fetched requirement list; items are draggable.
  • Click opens a popup showing that course’s prerequisites from context.

• GridComponent.js

  • Maintains a 4 years × 4 quarters grid (16 cells).
  • Supports drag-in from lists, move between cells, and double-click to delete.
  • Provides ExportButton that serializes the grid as CSV and triggers a download.

• GEList.js

  • Static set of GE codes you can drag into any quarter; includes popup scaffold.

• MajorContext.js

  • Holds preReq and majorIndexes for cross-component access.

---

Configuration Notes

• The default data API is hardcoded in Search.js. If you run your own backend, change:

  const apiEndpoint = `https://uscc-classes.osc-fr1.scalingo.io/api/majors/${selectedMajor.value}`;
  

  to your service URL.

• CSV Export: The grid is flattened and exported with headers: Year, Fall, Winter, Spring, Summer. Quotes in course names are escaped.

---

Optional: Scraping Scripts

• web.py and mon.py are prototype scrapers built with requests and BeautifulSoup (and mon.py includes a MongoDB insert).
  They target UCSC catalog pages to collect requirements and prerequisites. These scripts are not required to run the web app and should be used responsibly (rate limits, ToS).

---

Roadmap

• Add auth and per-user plan saving.
• Backend service for persistent plans and validated prerequisite graphs.
• Course conflict detection and unit load warnings.
• Printing and PDF export.
• Mobile layout improvements.

---