Course Web App

Project Overview

UCSB Course Web App enabling rich search of courses, instructors, and locations, with authenticated personal schedules and historical insights. Built as a modern React SPA talking to a Spring Boot API backed by PostgreSQL plus MongoDB, with CI/CD pipelines keeping releases production-ready.

Role & Team

• Led UI development and partnered on backend work within a 6-member Agile squad using weekly sprints, PR reviews, and shared coding standards.
• Focused on data visualization, search UX, and ensuring temporal data remained correct across features.

Tech Stack

• Frontend: React, React Query, React Bootstrap, Recharts, Storybook, Jest with React Testing Library, ESLint.
• Backend: Spring Boot, JPA/Hibernate, PostgreSQL, MongoDB-backed course collections, RESTful APIs, Jacoco, Pitest.
• DevOps: GitHub Actions pipelines covering unit tests, coverage thresholds, formatting checks, mutation testing, and Storybook builds.

Key Contributions

• Built the historical grade visualization embedded on the course details page, keyed off course IDs and grouped by quarter plus instructor.
• Ensured course history views present newest quarters first across course, location, and instructor searches, aligning UX expectations with real data.
• Added targeted unit tests and Storybook stories to protect tooltip formatting, grouping logic, data completion, and sorting behaviors.

Historical Grade Data Visualization

• Goal: Help students compare grade distributions by quarter and instructor when deciding how to enroll.
• Backend integration: Added the GET /api/gradehistory/search endpoint, GradeHistory JPA entity and repository, the UCSB grade ingestion service, and a scheduled upload job plus factory that upserts CSV data without duplicates.
• Frontend UI: Grouped API results by yyyyq and instructor, rendering compact bar charts with Recharts, filling missing grade categories with zeros for stable axes, and ordering recent quarters first.
• Tooling: Crafted a tooltip formatter that surfaces both percentages and counts, and mocked ResponsiveContainer in tests to eliminate flaky chart rendering.

Quarter Ordering Fix

• Pre-sorted section arrays before rendering course, location, and instructor history tables so newest quarters always surface first.
• Expanded test suites to assert sorted inputs for each table, preventing regressions across the three views.

Quality & CI/CD

• Maintained React tests, Storybook stories, backend unit coverage, and Pitest mutation checks within GitHub Actions to keep both codebases deployable.
• Enforced formatting and linting guards while coordinating PostgreSQL and MongoDB persistence changes through the pipelines.

Impact

• Delivered an intuitive, production-ready workflow for evaluating grade histories, improving course selection decisions for students.
• Unified quarter ordering across major history pages, ensuring the freshest data is front-and-center every time the app renders.