UBC Event Horizon

Logo

Inspiration

Did you know about the upcoming Yoga Rave? Or about the upcoming Science Olympics? There are constantly exciting events happening at UBC, but if you're like many students, keeping track of them all can be overwhelming. According to our survey, only 1% of UBC students are always able to keep up with events going on. With over 650 official AMS clubs, 26 departments, and dozens of student services, that's no surprise. But what if there was a way to always stay in the loop effortlessly?

What it does

Introducing Event Horizon – your centralized hub for all events at UBC. No more juggling between countless Instagram feeds and endless website tabs. From academic seminars, networking events, athletic competitions, to yoga raves, by bringing these events into one accessible platform, we're making it easier than ever for students to find their communities and engage in meaningful social experiences. Our mission is not just about convenience; it's about fostering a vibrant, interconnected community on campus.

Event Horizon provides a week of UBC events at a glance through an interactive calendar. When a user hovers over an event in the calendar, a tooltip appears. This tooltip is a small pop-up box that provides key information about the event, including date, time, location, and event link. Additionally, we've added a form that allows users to submit their own events to be featured on our calendar.

How we built it

Data Consolidation:

Since the primary source from which UBC students receive event-related info, according to our survey, was Instagram, we decided to start there. We wrote a python script (using requests, beautiful soup, re, pandas) to scrape the full list of AMS clubs for website links and subsequently scrape the website links for Instagram links. In total, we obtained 289 instagram accounts.

Then, we utilized PhantomBuster's Instagram Profile Scraping tool to scrape the top 10 posts from 15 accounts as a proof of concept (scraping takes some time!). Using the OpenAI API, we extracted posts that are event-related by engineering a custom prompt. For posts identified as events, we prompted the model once more to extract format-specific event details and stored the formatted event data in MongoDB.

Backend:

For the backend, we used Node.js and Express.js to create and manage endpoints for HTTP requests, enabling live operations like data retrieval and insertion into MongoDB through interactive components in our frontend. We used Postman to test these endpoints during development.

Front End:

An event horizon is the point of no return around a black hole. Because of this, we embraced a space theme for the frontend of our application, drafting it first in Figma and implementing it in React.js.

Challenges we ran into

Collaborating effectively around our strengths and weaknesses given that our team was comprised of four different interdisciplinary degrees
Losing progress because of too infrequent git branch merging
Attempting to use Next.js and Typescript for the frontend but switching back to React and Javascript after several hours
Prioritization of features we want to implement and efficient task delegation
Difficulty with parsing unstructured scraped data, even with AI guidance
Displaying fetched event data from MongoDB neatly in our calendar and tooltip functionality
Ensuring the interactive tooltip followed mouse movements and only appeared when hovering over a specific event
Attempting to implement a web component as the home screen background
Adding a "scroll-to" interaction in the Figma prototype between two frames nested within a larger frame

Accomplishments that we're proud of

Our largest accomplishment is that we created a functional and practical tool, even if just a pilot project, that received very positive feedback from judges, mentors, and fellow hackers. Numerous people mentioned they'd love to see us fully deploy it because they'd make use of it!

Some additional accomplishments:

Interactive, live week-based querying and rendering of event-related information
Automated and scalable scraping with Python and PhantomBuster
Data processing and cleaning with multiple OpenAI GPT models
The whole team pulled an all-nighter
One of only a couple of teams to haul monitors over to the hackathon =)

What we learned

Figma -> React workflow
noSQL/document-based databases, including using the MongoDB API for basic CRUD operations
Endpoint testing with Postman
Working extensively with time and date datatypes
Adding interactive components, such as the tooltip, that are layered on top of other components in React
Accessing properties of the data stored in MongoDB within React components

What's next for UBC Event Horizon

ICS Calendar integration to allow export of events to personal calendar
Variety of filters such as date, time, host
Run script to scrape Instagram posts at regular interval and update calendar with new events
Write additional python scripts to scrape other popular event websites
An AI-powered search bar that filters the calendar and offers "suggested events" based on your query