Fountain Finder W&M

Provides the closest water fountains and bottle filling stations given a user's location, promoting hydration and sustainability through the reduction of single-use plastic bottles.

Comment

Inspiration

Water fountain and bottle filling locations around campus here at W&M are oftentimes just not intuitive. Sometimes it feels like you have to wander halfway across a building before you can find somewhere to fill your water bottle, and when you only have 10 minutes to get from Boswell to Tucker on a Monday morning, guesswork just doesn't cut it! We knew we could do better.

What it does

Fountain Finder W&M features a map of the William & Mary campus with a marker for every fountain. Each fountain has information about its physical surroundings so it can be found easily, and each listing even includes the status of the filter light if it has one!

A user can specify a certain building and floor to see all fountains on that level and they can filter the fountains so they just see ones with bottle fillers. We wanted to ensure that any question a user has about a specific fountain can be answered by a Fountain Finder listing.

How we built it

The process for Fountain Finder started long before we even began to think about coding. We realized that since there were no water fountain maps that already existed, the most precise way to get their coordinates was to physically walk through the buildings to record latitude and longitude at each fountain. We spent hours exploring buildings and taking down over 150 water fountains' precise locations across campus in the weeks leading up to the hackathon, but we did all our coding the weekend of the event.

We utilised a decoupled backend and front-end. For the backend, the Ts.ED TypeScript framework was used to maintain a database connection via Prisma as an object-relational mapper. An Angular-Tailwind-Material front-end allowed us to use the latest features whilst maintaining a meticulous CSS design. The database is hosted on Heroku.

Challenges we ran into

The biggest challenge by far was using Angular, since some of us didn't have any experience working with it whatsoever. However, we overcame this challenge by working together, supporting each other when we needed help, and focusing on our individual strengths to ensure the best possible product.

Time was also a huge constraint for the massive number of features we wanted to include in our app. We just couldn't implement everything in the hours we had. However, we tried to pick the most essential features and we focused on making those as functional as possible.

Accomplishments that we're proud of

Overall, we were beyond impressed with how our app turned out. It looks smooth and professional, and although it's not finished by our standards, it has all the functionality it should. It probably would be finished if we hadn't set our goals so high in the beginning. But you know what they say, and we were aiming for the moon! :D

What we learned

We all pushed ourselves to learn a lot more about Angular and the many aspects of web development. This project was a reach for us, and even if it's not entirely polished yet, we learned valuable skills of teamwork, time management, and grace under pressure... we're all so tired.

We also learned a lot about the buildings on campus! Finding all those fountains meant learning that if you walk confidently and smile at authorities, no one will stop you.

And last but not least... we learned it takes a lot more than a can-do attitude to learn a whole framework in a weekend. Next time we'll all know that we should do our research ahead of time.

What's next for Fountain Finder W&M?

We couldn't get the fountain coordinates of every building on campus, so we plan to add more in the coming months if it proves to be a useful resource. Additionally, we're looking forward to getting the precise location features up and running to give users a more personalized experience.

Built With

Share this project:

Updates