This started as an idea for an app to view fountains on campus at Purdue University. The app would be lighthearted but still serious enough to allow its developers to gain valuable experience.

What it does

This application displays a map with fountain locations to the user. The user can then browse through fountains close to their location, search for a certain fountain by name, or simply click on a marker on the map to view information about the fountain.

The biggest feature of hydRate, and the reason for its name, is that users can view and add their own ratings for each fountain in the app. This way, you won't get stuck with a foutain with low pressure, lukewarm, or off-tasting water. Now you can feel confident in the quality of a water fountain before you embark on your journey to get some water!

How we built it

We used an Angular 8 frontend communicating with a firestore database to complete our tech stack. This allowed the app to be simple, light, and powerful.

Challenges we ran into

Existential crisis at 5am due to CSS difficulties, and tedious Typescript linting warnings that prevented us from literally writing any line of code without thinking that we need to retake an introductory level programming course.

Loading data from firestore and putting into an angular modal template was particularly tricky, and CSS and HTML presented constant challenges.

Accomplishments that we're proud of

We are proud of the UI we were able to create and the functionality we were able to accomplish within the short time span allowed for this project. For our first web development experience, this was a very worthwhile project.

What we learned

Angular, CSS, HTML, and other basic web development skills. Also how to work as a team effectively.

What's next for hydRate

Feature expansion (discussion, profile, and about components) and eventual online deployment to GitHub pages or a similar service.

Share this project: