A modern UMass Boston course catalog and constraint-based schedule generator built with React, TypeScript, TailwindCSS, Node.js, and PostgreSQL. It allows students to browse 2,000+ courses and automatically generate conflict-free schedules using Depth-First Search (DFS) algorithm.
🌐 Page: https://umbwizard.vercel.app
- React
- TypeScript
- Node.js
- PostgreSQL
- Playwright
- TailwindCSS
- Vite
- REST API
- Search and filter through 2,000+ courses offered during the year with fast UI updates.
- Filter by academic year, semester, department, course, days, instructor, duration, time-range, and section-type.
- Generate conflict-free schedules based on selected courses and filters using a DFS backtracking algorithm.
- Color-coded calendar blocks, drag-to-swap between sections, side-by-side conflict rendering, and ranked schedule options.
- Optimized lookups using Map-based data structures and memoization in the frontend.
- Handles inconsistent data entries and missing "TBA" values during ingestion.
- Works across desktop, laptop, and mobile devices.
I started by building a web scraper using Playwright to extract the complete UMass Boston course catalog data and saved it to a JSON.
I realized that there was a lot of info, and some of it needed to be cleaned in cases where there was missing data, TBA values, or inconsistent formatting. So, I wrote functions to normalize meeting times, meeting days, and instructor names.
Next, I used Prisma to design a schema for the data, which included one-to-many and many-to-many relations.
Then, I built a responsive frontend, where I focused heavily on performance, ensuring that filtering remained instantaneous.
Finally, I implemented the DFS backtracking algorithm for schedule generation. The main challenge was exploring combinations efficiently while pruning time conflicts early instead of brute-forcing everything.
During this project, I've picked up important skills and a better understanding of complex ideas, which improved my logical thinking.
- Connecting Everything: Building both the frontend and backend gave me a much clearer picture of how systems communicate. From scraping data, to storing it in PostgreSQL, to serving it through an API, to rendering it in React.
- Thinking in Structure: Designing relationships between courses, sections, and meeting times improved how I think about relational data. I had to carefully model how everything connects so queries stayed clean and efficient.
- Efficiency Matters: Generating schedules and filtering thousands of courses forced me to think about optimization. Map-based lookups, pruning logic, and memoization made the app feel fast and responsive.
- Smarter Rendering: Using
useMemohelped me better understand React’s rendering behavior and how to prevent unnecessary recalculations when working with large datasets.
- Real-World Data: Scraping the university catalog showed me that real production data is messy. I had to normalize inconsistent formats and handle missing fields before the rest of the system could function properly.
- Confidence in Code: Using TypeScript across the stack made the codebase safer and easier to refactor. Clear types between frontend and backend reduced unexpected runtime issues.
- This project wasn’t just about generating schedules. It helped me think more like a systems engineer — understanding how architecture, data modeling, and performance all connect.
- Export schedules to Google Calendar / iCal
- Show live enrollment status and seat availability
- Filter by GenEd / distribution attributes
- Add instructor rating (RateMyProfessor) integration
- Persist pinned courses across sessions
- Add dark mode
To run the project in your local environment, follow these steps:
- Clone the repository to your local machine.
- Set up a local PostgreSQL database.
- Copy
.env.exampleto.envand fill in yourDATABASE_URL. - Run
npm run setup - Run
npm run db - Run
npm run dev(backend) - In another terminal, run:
cd clientnpm run dev
- Open http://localhost:5173 in your browser.