ZOTPOP

Inspiration

We were tired of missing out on free food and merch drops… posts on Instagram stories didn’t reach everyone, and CampusGroups was hard to filter through. So, we created ZOTPOP!! It’s a centralized, real-time digital bulletin board dedicated to notifying students about campus popups/events that suit their interests.

What it does

ZOTPOP is a real-time event platform designed specifically for UCI Students. Users start by creating an account and adding their email address for verification purposes. Once authenticated, the homepage shows a live feed of the nearest events on campus. When students walk past a cool popup event, they can click the creation button to submit a post with information about the event to let others know of it too. Submitting an event immediately triggers automated email notifications via smtplib and email.message libraries to alert the community. Users can also filter the homepage feed using interest tags like free food, free merch, discounts, and career development.

How we built it

We started by designing our user and event databases on Supabase using SQL commands. Then, we wrote REST API endpoints using FastAPI to connect the frontend requests with data in the Supabase. The frontend portion was built using React (HTML/CSS/JS), where we considered factors like simplicity in filtering options, skeleton loading screens, and an aesthetically pleasing color scheme. For location selection, we utilized OpenStreetMap tiles that hyperlinked to Google Maps to show the location of the event. The backend was built by using a FastAPI server that exposes RESTful endpoints for session management, user authentication, and event posts. User credentials and event datasets are stored inside Supabase, and event creation triggers real-time email dispatching through smtplib and email.message Python libraries.

Challenges we ran into

We first wanted to implement a UCI SSO to ensure only UCI students would be able to edit/view events, but that required submitting a form to OIT, which we did not have time to do. We ended up using an email generator with temporary email addresses to test our platform’s notification functionality. However, UCI quarantines the emails from our provider, so we removed the requirement for the email to end in an @uci.edu address. We also sent a lot of information for the .env file over Discord, but Discord automatically added an extra “/” to one of our env file entries, which caused a lot of confusion and broke the signup functionality only on some of our machines. Finally, our code was set up after our database by different team members, therefore, some of the fields/entries were mismatched (i.e. posted_at -> submitted_at) so we had to rectify that.

Accomplishments that we're proud of

Surviving!!! (jk) None of us had any prior hackathon experience, so planning the entire app, thinking of nuances in the design/tech stack, figuring out how to connect the frontend and backend, learning to use SQL, and so much more… all of those contributed to a very enlightening learning experience. We were also proud of our being able to accomplish all of our must-haves and should-haves in the plan for our MVP, as well as customizing the UI to have the look we were imagining.

What we learned

Vai - Got more familiar with terminal commands and Git/GitHub, as well as learned about Supabase and how to write SQL commands. Skylla - Familiarized myself with Supabase, getting the hang of VS, and gained exposure to new tools! Lena - Fullstack development and how to write endpoints. This was my first time doing web development in a large project. Aivo - First time doing fullstack development (previously have made static webpages) especially with learning about persistent databases and connecting that to the frontend.

What's next for ZOTPOP

Looking ahead, we want to integrate the official UCI Single Sign-On (SSO) so that all posted popups are verified through legitimate campus credentials. We also plan to make an RSVP system for some popups to make the lines shorter on campus and allow people to ensure they get the experience they were hoping for during the pop up rather than them running out of materials. Finally, we aim to enhance the main feed map with custom category markers, displaying distinct pin icons for food, merch, and career popups across campus.