Eco-friends

Activity Post. Here you can upload your data for the current date and calculates your carbon score.
Activity Post. Here you can upload your data for the current date and calculates your carbon score. Inputs filled.
Activity Post. After uploading data you will see it will appear in the bottom and also get a message of successfully submission
Home Page. Here you can see the users activities and your main stats.
The Architecture of our project.

Inspiration:

As 21st century citizens we are facing a number of critical environmental issues. Our polar caps are melting and ocean levels are rising. As a direct consequence of global warming we are getting unnatural seasons, with temperatures which have not been recorded in the last few decades. Solving environmental problems starts with us becoming more aware about the problem and so that was our inspiration behind building Eco-Friends.

What it does

Eco-Friends is a social app which inspires us to interact with the environment more consciously. After our day is done we can log in and input the environmentally sustainable activities we have done. For example what is the distance you have walked on foot as opposed to taking a car which emits harmful greenhouse gases and how much waste you have recycled as opposed to disposing of. The app then calculates a carbon footprint score(lower being the better) using a formula we have derived and uses that to compare you, environmentally speaking, on how you rank compared to other people in your friend list. We believe keeping each other accountable will go a long way towards making Earth a better and greener place to live in.

How We built it

We wanted to create a scalable Fullstack application. We split this into 3 pages; a welcome page, a page for recording sustainable activities and signup/login page. We started with creating a React boilerplate using create-react-app and organizing components into individual folders to keep all code compartmentalized. We used react-bootstrap to handle the UI components. For our user authentication and database, we decided to use Firebase due to its low cost and easy integration with the React frontend. On our Signup page, we use Firebase to create and store user data to our Firestore database. This data is then used to authenticate our users on the login page.

Challenges We ran into

Our first challenge was deciding on what service will make the biggest impact on improving sustainability and whether we will be able to accomplish our tasks in time. We initially settled on building a food delivery app which would improve your mental health by recommending appropriate snacks in healthy proportions but switched gears to our current idea as we were dubious to whether people will exactly follow our app’s suggestions to curb their intake when they are hungry. As a result of switching tasks midway it was a challenge to finish our app in the limited time.

We also faced challenges connecting our react app to firebase and deciding on the correct schema for storing the carbon footprint data.

Accomplishments that We're proud of

We are proud of the fact that we came up with our current idea after a lot of deliberation. As far as we know there isn’t any social network which is focused on saving the environment.

We are also proud of working together as a cohesive team.

What We learned

The key learnings we are particularly proud of are creating a deployable Full-Stack Application using ReactJS, implementing React Hooks and callbacks, and using Firebase for Authentication and Data Store. We also learned how to use Git branches to simultaneously work on a codebase and meet deadlines with more speed. This combination of collaborative learning made the overall experience extremely rewarding for all four of us.

What's next for Eco-friends

Integrate AR into our app to make it more interactive. Add a QR code scanning feature which will make adding friends easier. Integrate with a fitbit device so that we can automatically update our records on sustainable activities like running, walking by querying an api instead of manually inputting on the website.