SFU Grad Map

Hover over a course to see the post and prerequisites.
Initial layout after seraching for a selected course.
Search for a course prerequisite after searching for a course

Inspiration

The idea for SFU Grad Map emerged from our shared frustration with the goSFU system’s outdated and unintuitive design. Many students struggle to find prerequisite information, especially for 200-level and upper-division courses, which often requires manually navigating through multiple course outline pages. We wanted to create a solution that simplifies this process by providing a clear, interactive, and visually engaging way to explore degree progressions.

What it does

SFU Grad Map is a web application that allows students to easily visualize their academic journey. By searching for a course, users can instantly see its description, prerequisites, and equivalent courses displayed in a dynamic and interactive graph. This helps students understand course dependencies, plan their future semesters efficiently, and make informed decisions about their academic paths.

How we built it

We built SFU Grad Map using Next.js with JavaScript as our main development framework. The Gemini API powers the course data extraction, transforming unstructured prerequisite information into organized and readable JSON outputs. We used D3.js to create the course visualization graph, ensuring smooth transitions and intuitive interactions. The user interface was designed using shadcn and aceternity component libraries to maintain a modern, responsive, and cohesive design system.

Challenges we ran into

One of the biggest challenges we faced was the Gemini API rate limit, which affected our ability to process multiple courses quickly. Handling course equivalencies was also complex, as certain courses could substitute for others depending on program requirements. We also explored building a manual parser for faster performance, but quickly realized that SFU’s course descriptions used natural language too inconsistently to parse reliably. Balancing accuracy, performance, and maintainability required significant iteration in both logic and system design.

Accomplishments that we're proud of

We are proud of building a fully functional prototype that successfully integrates the Gemini API and displays course relationships in a clear, visual format. Our team overcame data parsing challenges, optimized API usage, and created an interface that genuinely improves the student experience. We also developed a scalable system architecture that can easily support future features such as multi-semester planning or integration with student transcripts.

What we learned

Through this project, we learned how to work with AI-powered APIs for structured data extraction, manage asynchronous API calls efficiently, and design data visualizations that communicate complex relationships effectively. We also deepened our understanding of frontend system design, state management, and the trade-offs between manual and AI-driven parsing. Most importantly, we learned how to collaborate efficiently under time constraints and align design goals with technical feasibility.

What's next for SFU Grad Map

Looking ahead, we plan to expand SFU Grad Map by introducing user authentication and personalized degree tracking, allowing students to log in and visualize their progress toward graduation. We also aim to integrate real-time data from SFU’s course outline system to ensure up-to-date information on prerequisites and course availability. In the long term, we envision supporting recommendation features that help students optimize their course load based on prerequisites, semester offerings, and workload distribution. Additionally, we are exploring caching and custom parsing techniques to further reduce dependency on API rate limits and improve system performance.