Inspiration
Many UBC students struggle when attempting to build a workable timetable, especially when juggling lectures, labs, tutorials, and discussion sections while also needing to consider time conflicts, capacity limits, and visual layout. Existing tools such as Worklist and SSC provide official functionality, but they are not optimized for rapid iteration, clear visualization, nor personal scheduling preferences. We wanted to create a solution that is more modern, intuitive, and efficient—designed by students, for students.
What It Does
UBC Schedule Optimizer enables students to search and select multiple courses, then instantly generate several valid conflict-free timetable possibilities. Users can quickly enter courses using fast autocomplete search, view selections as color-coded chips, and generate schedules with a single click. A visually clean weekly grid is displayed to help compare layouts immediately, including accurate course information, section type, time placement, and consistent color mapping across the interface. Multi-schedule navigation has also been considered in the design and is prepared for future implementation.
How We Built It
The project is built using React for component-based UI development, Vite for fast build and development performance, and JavaScript for schedule generation logic. We implemented a custom time-and-day conflict detection engine and used handcrafted styling for precise calendar rendering. Code organization follows modular architecture, including separate components for search and selection, calendar visualization, schedule generation logic, conflict detection, and dataset handling. Throughout development, we prioritized readability, maintainability, and scalability.
Challenges
We encountered challenges in mapping time ranges into dynamic grid layouts and ensuring rendering accuracy across varying course durations. Achieving consistent color mapping required an intentional hashing approach to prevent collisions or visual confusion. We also refined UI structure to eliminate layout shifts caused by dropdown search results, redesigned positioning to maintain reliable interface alignment, and worked to keep the data layer, algorithmic logic, and UI components modular and independent. State management across selection input, algorithm output, and calendar display demanded careful planning to maintain clear and reliable component communication.
Accomplishments
We successfully delivered a polished, professional, and intuitive user interface combined with a functioning schedule generation engine built entirely from scratch. Our consistent course color mapping and visually structured timetable layout greatly enhance clarity and usability. The solution is accessible to first-time users while remaining adaptable for future development. Overall, this project represents a clean and modern reimagining of the UBC Worklist experience.
What We Learned
Throughout development, we learned how to architect a full React + Vite application, how to build complex UI layouts using CSS grid, how to design and implement time-based conflict detection logic, and how to structure component-driven state handling. Additionally, integrating algorithmic logic with a visual interface emphasized the importance of user experience and interaction design in student-facing tools.
Future Development
We plan to incorporate real UBC course and section data, introduce fully customizable scheduling preference filters such as earliest and latest class times, no-class days, and time-of-day preferences, and provide multi-schedule navigation for comparing multiple recommended options. We also aim to expand to a fully responsive mobile layout, include export features such as image output and calendar synchronization, and integrate dark mode and accessibility-focused interface enhancements. In the long term, we envision transforming Schedule Optimizer into a comprehensive academic planning platform rather than a standalone schedule tool.
Log in or sign up for Devpost to join the conversation.