Nature Clash

• 

  Home Page

• 

  Login Page

• 

  Global Challenges Page

• 

  Group Challenges Page

Inspiration

We combined two things we are very passionate about, climate change and competition, into an application that brings people around the world to work together to preserve our planet.

What it does

Users do challenges revolved around promoting climate change. Users received points from the challenges, and there is a leaderboard displaying how you are doing compared to your peers and strangers. Additionally, there is a groups leaderboard feature which allows groups of friend, family, or teams to create their own groups and engage in friendly competition. We were looking for social impact by bringing people together and at the same time raise their awareness to sustainability. Additionally, the app offers a gamification of sustainable practices showing users how easy it is to live a green lifestyle.

How we built it

We used React.js to create the mobile website application. We used functional components and React hooks to create dynamic pages. Additionally, we used Firebase Realtime Database to keep track of user information. This information is stored in three tables, global leaderboard, users, and groups tables. These are queried on their respective pages and allow for instant updating of information.

Challenges we ran into

Accessing user information from firebase. Querying Firebase proved to be difficult as we had limited experience with the software. In the end we were able to find a solution that worked for us, but we certainly have room to grow our knowledge of Firebase.

Accomplishments that we're proud of

Creating an application that can store user information, and allow other users to see other user information.

What we learned

We learned new CSS methods and different features in React.js and Firebase.

What's next for Nature Clash

We want to add a feature for the user to select certain challenges as goals. Also, we want to add a feature to help users keep track of how close they are to their goals. We would like to add more incentive for users, like cashing in a certain amount of points for prizes like stickers.

Built With

• css
• firebase
• html
• javascript
• react.js