WPI Roadmap
A universal solution to introduce you to WPI's major requirement system
Developed by WPI students for WPI students. Software Winner of GoatHack 2024.
Story
About
WPI Roadmap provides a clean, aesthetic visual solution to help incoming WPI students understand the major requirements system. The website is designed to be easy to use and understand, and is a great resource for students to use when planning their academic career by keeping track of their major requirements and progress as well as visualizing prerequisites and course offerings. This project was developed by Randy Huang, Tarun Eswar, Ajay Bhagavatula, Erica Dong, and Charles Tang for the GoatHacks 2024 hackathon at WPI.
Inspiration
Nearly all WPI students have encountered many difficulties understanding the WPI academic system—from consuming convoluted central tracking sheets to receiving contradictory advice about professors from upperclassmen to piecing together prerequisite diagrams for course progression—there exists a lack of unity in the realm of academic planning. As a team of WPI students, we aim to create a system to streamline the academic journey at WPI and reduce stress in incoming students.
What it does
WPI Roadmap provides a clean, aesthetic visual solution to help incoming WPI students understand the significant requirements system. The website is designed to be easy to use and understand and is an excellent resource for students to use when planning their academic career by keeping track of their major requirements and progress as well as visualizing prerequisites and course offerings.
WPI Roadmap offers two main pages: (1) the course progression visualizer and (2) a digitized central tracking sheet. The home page features a course progression tree hierarchical graph for each subject that color codes courses based on parameters such as level and Oscar rating, and allows users to view the courses and learn about the course difficulty and its description. Users can add courses to their tracking sheet if they have completed the course, which automatically adapts based on their selected major.
How we built it
We built the WPI Roadmap web application using full-stack technologies. We utilized ReactJS and packages such as ReactFlow and Ant-Design to style and develop components for the front-end web app. We also set up automated data pipelines through Javascript queries and web-scrapers with oscar.wpi.edu and courselistings.wpi.edu to ensure that course/teacher ratings and course offerings are up-to-date. To store user profile data and other pertinent information, we set up our No-SQL database in Firebase Firestore and used their provided authentication and hosting services, respectively. Lastly, to create the backend API, we used ExpressJS to create POST and GET requests to Firebase Firestore.
Challenges we ran into
The first challenge we ran into in fleshing out the idea was finding a component library for parsing and visualizing tree/hierarchal data structures for prerequisite courses. We experimented with numerous libraries and eventually decided upon the ReactFlow diagram. However, many features that were essential for our program were locked behind a paywall, so we had to independently develop much of the styling for the provided components.
The second major challenge we faced was obtaining the necessary data from oscar.wpi.edu and courselistings.wpi.edu. Since a custom API from these data sources was not feasible in the span of a few days, we built a custom web scraper that acts like an API that scrapes course reviews and course offerings to develop our course recommendation and management model.
Accomplishments that we're proud of
We are proud of the following accomplishments: Our teamwork and collaboration for sticking together over 2 days Creating a fully functioning visualization tree for nearly every major Implementing a single sign-on interface with personalized user accounts
What we learned
Since all of these tools were relatively new to us (none of us have previously done full-stack web app development), it took much preparation to learn the tools and find well-documented, functional, and easy-to-use libraries. We also learned that dividing up the tasks for coding a large project is essential, as specialization allows us to prototype individual components quickly and merge them for a final project.
What's next
At WPI, we hope to continue streamlining the system and integrate WPI Planner and Workday to create a unified workflow for all digital academic planning needs. We also would like to integrate IQP/MQP credits and independent study courses to better support the academic planning needs of the general student population. We hope also to integrate LLMs such as LLaMA open-source models to provide individualized and thorough feedback based on projected class/teacher scores and past performance in similar classes. We also hope to incorporate data streams from Rate My Professor for a more holistic approach to course evaluations.
Technical
Technology Used
Local Hosting
To run the project locally, you may clone this respository. You must have Node version 18+ installed on your machine.
git clone https://github.com/WPI-Roadmap/client-side.git
Then, install the dependencies.
cd client-side
npm install
Finally, run the project.
npm start
Go to localhost:3000 to view the project.
Feature List
- [x] Roadmap visualization for all majors (hierarchal diagram)
- [x] Sync with OSCAR.wpi.edu and COURSELISTINGS.wpi.edu for up-to-date course offerings and professor/course ratings
- [x] Tracking sheet digitization for helping you satisfy major requirements
- [x ] Profile syncing and WPI SSO
- [ ] LLM-based course recommendations based on your major, interests, and satisfaction with past courses
- [ ] Integrating WPI Planner, Workday, and Rate My Professor in a unified platform
Log in or sign up for Devpost to join the conversation.