GNEC H2O

• 

  Home Page

• 

  Login Page

• 

  Map Page

Inspiration

Our inspiration was another project called Litter Ladder, which is similar to our project but based around trash collection. Litter Ladder

What it does

Our project/pitch will provide information on water pollution and safe water to everyone. It lets users test water at home and see the results of tests in other parts of the world. This is a great way for hikers, campers, and others to find clean water while outside with nature.

How we built it

We used ReactJS and hosted our demo site using Netlify.

Challenges we ran into

This was the first time that we tried web development, so we had to jump through some hoops to get React working. We didn't really know what we were doing, so we had to do a lot of trial and error to get things working. The locomotive scrolling and Google Maps were difficult to work with, since React was something new that we had to learn and the APIs and libraries made it more complex.

Accomplishments that we're proud of

We're proud of creating a functional website that's also aesthetically pleasing. We spent a lot of time starting from scratch and building the website from the ground up, so we're very proud of what we managed to accomplish.

What we learned

We learned about web development and React. We used to think that web development was easy and trivial, but it turns out that it's very complex. Actually turning what you wanted in your head into the code for the website was very difficult for us, and was the source of many frustrations. We will also keep in note to find more teammates next time, since we felt very restricted by the time limit and we couldn't do as much as we wanted.

What's next for GNEC H2O

Since we were so inexperienced at web development, we had to Frankenstein most of our code together. As such, it doesn't look pretty and could probably use a lot of refactoring. If we had more time, we would probably extract some components into component files, and also make the locomotive scrolling less janky.

Built With

• css3
• google-maps
• javascript
• locomotive-scrolling
• react
• react-router