ZotDrops

Inspiration

Petr drops are the heart of UCI culture.

What it does

ZotDrops allows Petr droppers to aggregate their Petr drops to make the process of collecting Petr stickers easier for students! This data is managed by an admin, and then is displayed on the home page od ZotDrops. The home page displays a map of the UCI campus displays the location of the Petr drop (right before the drop), as well as the time of the drop and the type of Petr sticker. The home page also displays a list of upcoming dates of Petr drops.

How we built it

We built ZotDrops using React, Javascript, CSS, and Leaflet for the front-end, and Python, Flask, MongoDB, and CORS for the back-end. Leaflet was used to develop the interactive ZotDrops map!

Challenges we ran into

Combining the back-end and front-end because originally both teams worked with pseudo-data, so integrating the two parts with real data was challenging.

Accomplishments that we're proud of

We all bonded as a team even though we didn't know each other until this morning. Also, Caroline beat Danny at WordHunt.

What we learned

We learned React, CSS, and Javascript, with no prior experience before today. We also created Figma mock-ups to brainstorm the user interface, which was also a new experience for some members of our team.

What's next for ZotDrops

A next step for ZotDrops would be implementing a user account system so that Petr droppers can register for Petr drops themselves, as opposed to the admin account updating the website.

Built With

Submitted to

ZotHacks 2021
- Winner Second Place

Created by

I worked on creating the backend for the first half of the hackathon, including creating the API endpoints for the frontend and setting up the MongoDB database. For the latter half of the hackathon, I helped to establish the connection between the Leaflet map and form with the server.

Danny H. Nguyen
I worked on creating the design for the project by making web page mock-ups in Figma and worked on the front-end by creating the homepage using React.

Mia Schroeder
I worked on the front-end part of the project. I focused on using Leaflet with React to deploy an interactive map that users can add pin-points on the map.

terynk
I worked on the backend for the first half of the hackathon, and then switched to the frontend after we had finished the majority of the backend. I then helped connect the frontend and backend at the end of the project. I also helped set up the mongo database.

Caroline Yeejia Wang

Updates

Mia Schroeder started this project — Nov 21, 2021 01:55 AM EST

Leave feedback in the comments!

Log in or sign up for Devpost to join the conversation.