CampusFest | Devpost

Map for finding events, sorted by proximity to current location
Popup for viewing more event details
Form for submitting event
Auth0 login screen
Successfully added an event

Inspiration

As high school students aspiring to enter the University of Waterloo, we look forward to having a life in university.

The problem?

Waterloo isn’t much of an eventful university. What makes matters worse, the few events that are out there are hard to discover.

Sure, there’s a general club site, but how often does it get updated? There’s also social media, but how would you search for clubs without knowing they exist? Also: what about parties? Other social events? People don’t know about them, and there isn’t enough motivation to host events when no one joins. We want to fix that.

What it does

CampusFest is a website that notifies people of upcoming campus events via a map that updates in real-time.

When a user goes on, they’ll see the most relevant events happening at the moment, determined by proximity and interest, sorted by tags. Additionally, our software features a search bar, a filter, and a hover. For security purposes, all users must create an account upon use, and hosts can restrict access to events. For instance, an event can be only available to students belonging to one faculty.

Event hosts can also easily submit their events and information to let others be aware of the social gatherings that are happening via a form that is also located on the site. This way, it’s super easy for them to let others know of their events, and it’s also much easier for others to locate your event too.

How we built it

The website is built with Next.js and styled with TailwindCSS. The authentication system is implemented using the Auth0 API, which allows users to log in with an email and password or Google OAuth. Once the user is authenticated, they will get view access to events based on their university and the groups they are enrolled in. The events are shown to the user through a map, implemented with React Leaflet, with location markers for all relevant events. The user can click on a location marker to learn more about the event. The home page features a search bar and filter menu for finding events easily. The events are also listed on the sidebar, sorted by proximity to the user’s current location. A user can also post a new event through a web form, with options for name, description, event type, etc., which updates the list of events stored on the website.

Challenges we ran into

Right off the bat, we could not find a map API that didn’t charge us or did not require a credit card number. After we finally found a usable map API, things went smoothly… until we lost a bit of code. It accidentally got deleted.

After 5 minutes of panicking, we recovered it 👍

Accomplishments that we're proud of

We are extremely happy to produce something that will improve our daily lives in the future. We also had a lot of fun creating a goofy slideshow for our pitch.

Most importantly, we saw a lot of improvement since the last hackathons we’ve gone to, be it coding, collaboration, or pitching skills. So this time, we are going to go for something more ambitious. Lastly, we’re really proud that we built this in time and that it actually functions.