ZotWater

• 

  Profile Page

• 

  FastAPI Backend

• 

  Log-in Page

• 

  Elements

• 

  Overview/Review Demo

• 

  Map Demo

• 

  Timeline

• 

  Home Page

Inspiration

We started off this hackathon brainstorming several ideas. From a dining hall app to a triviaesque ASCII RPG, we had several options to choose from. However, we ended up having to strike most of our ideas down for one reason or another, so we started discussing pain points. That's how ZotWater came to be. With the recent overwhelming heat, and the need to explore UCI as a brand new person to campus, ZotWater is intended to combat these problems students encounter on the daily.

What it does

ZotWater takes the data from an open source map that holds all the locations of the water fountains sprinkled across campus. We intended for users to be able to review and rate specific locations, with community-based consensuses being used to differentiate between good and bad fountains. However, we still needed to include an aspect of reusability. That's where the Petr stickers come in. Through granting a randomly chosen Petr sticker to the user once they review a fountain, students are incentivized to explore and use the app.

How we built it

We built ZotWater using Next.js, React, and Leaflet for the frontend, FastAPI and Python for the backend, and Supabase for our database all hosted on Vercel. We started by creating an interactive map of UC Irvine's campus that displays different water fountains and bottle-filling stations. Each fountain has its own information, ratings, and reviews that users can interact with.

From there, we implemented a login and signup system so users could track their refills, leave reviews, and collect Petr stickers. We also added a reward system where users can unlock different sticker rarities and earn milestones as they use more fountains. We connected the frontend and backend through API routes and used Vercel to deploy our project.

Our goal was to make something that was not only useful for UCI students but also fun and rewarding to use.

Challenges we ran into

We often had issues working with Git, especially when multiple people were working on different parts of the project at the same time. We ran into merge conflicts that caused a lot of confusion until our mentor (shoutout Mason!) helped us figure things out.

Another challenge was learning how to properly structure our code so that it was readable and could work with everyone else's sections. Since our project involved a frontend, backend, and database, connecting everything together was sometimes difficult. We also had to figure out how to make features like reviews, refill tracking, and collectibles work together without causing problems elsewhere in the application.

Despite these challenges, we worked together, debugged our code, and learned how to better communicate as a team.

Accomplishments that we're proud of

We're really proud that we were able to turn our idea into a working website during the hackathon! We created an interactive campus map where students can find and rate water fountains, track their water refills, and earn rewards.

One of our favorite features is the Petr sticker collection system, which makes something as simple as drinking water feel like a game. We're also proud of implementing user accounts, reviews, and milestones that make the website more interactive and personalized.

Most importantly, we're proud of how much we accomplished as a team, especially while learning new technologies and overcoming challenges along the way.

What we learned

Throughout this hackathon, we learned a lot about full-stack web development and what it takes to build an application from start to finish. We gained experience using technologies like Next.js, React, FastAPI, and Supabase, as well as connecting a frontend to a backend through APIs.

We also learned how important Git and version control are when working on a team. We realized that communication, organization, and writing readable code can make a huge difference when multiple people are contributing to the same project.

What's next for ZotWater

In the future, we'd love to expand ZotWater by adding more water fountain locations and making the map even more accurate. We also want to improve the user interface, add more collectible Petr stickers, and introduce new achievements to make staying hydrated even more fun.

Another feature we'd like to add is the ability for users to report broken fountains or update information about existing ones, so students can always find reliable places to refill their bottles.

Eventually, we'd love to see Zot Water become something UCI students actually use in their everyday lives, and maybe even expand the idea to other college campuses!

Built With

• fastapi
• figma
• javascript
• next.js
• python
• sql
• supabase
• vercel