UBC Sauder Hub is a centralized platform designed to streamline student life by consolidating key resources into one easy-to-use platform. Built with React.js, Node.js, Typescript, MantineUI, and Firebase SDKs.
Problem
Despite a highly active faculty with over 50 clubs and hundreds of events annually, students found it surprisingly easy to miss important opportunities due to information fragmentation across multiple platforms:
Scattered Information Sources: Key updates and announcements were dispersed across various channels including Instagram stories, Linktrees, and group chats
Information Overload: Students experienced cognitive overload from managing multiple platforms simultaneously
Missed Opportunities: Critical posts such as club hiring announcements were often accidentally scrolled past, even by students actively waiting for them
Lack of Centralization: No single, reliable source existed to consolidate all opportunities in one accessible location
The existing campus infrastructure management system presented significant usability challenges:
Poor User Experience: The system was difficult to navigate and use, leading to student frustration
Mobile Incompatibility: Lack of mobile optimization hindered accessibility for a significant portion of the student body who primarily use mobile devices
Inefficient Workflow: The cumbersome booking process made it difficult for students to efficiently manage their study space needs
Navigation Difficulties: Students struggled to find and navigate to booked rooms and campus facilities because
Solution
Club Opportunities: Implemented a web scraping and data ingestion pipeline that aggregates events, hiring posts, and announcements from UBC Sauder club Instagram accounts. The system leverages a custom Node.js + Puppeteer crawler with parsing logic and integrates into a Firebase real-time database, ensuring students receive continuously updated content within the app.
Room Booking System: Developed a reservation management interface integrated with Sauder’s existing room booking APIs. Features include queueing logic for high-demand resources, stateful waitlist management, and scheduled push notifications for upcoming reservations. The UI was built in React/TypeScript with a responsive design optimized for both desktop and mobile PWA usage.
More to Come: Extending the platform with additional student-facing microservices such as a real-time building occupancy and directory system, a curated Sauder news feed with content delivery optimization, and other utilities designed to streamline student workflows and enhance campus navigation.
