EcoHacks App: Green Homes Now
Github Link
Inspiration
I was inspired to build this app because I feel that there is a lot of inaction when it comes to climate change due to the focus on macro actions. This focus can make individuals feel powerless, and I wanted to change this by creating a set of micro actions that were accessible and inclusive to everyone.
In the US, over 1/8th of the total emissions come from our homes so I thought this would be a great place to focus. From research I found a number of different impactful actions that people could do regardless of their age, or social or economic situation. This led me to build my app, Green Homes Now.
What it does
My app, Green Homes Now, is a quiz app that asks users about a set of their daily household actions. Their responses are used to calculate a score from 0 to 5 of how environmentally friendly their home and actions are, but also educates and empowers them about their impact.
After they take the quiz I review the questions explaining their actions' impact, and possible action items to help fight climate change. I also streamline the sharing process with easy share features for their friends and family. Finally I have a feature that shows different climate change organizations outside of housing that they can help to make an impact.
How we built it
I built this app using React and styled-components. I drew up the sketches in Figma, which helped alot with keeping design choices away from coding choices. Once the app was finished being built, I deployed it with github-pages and registered a custom domain with domain.com to be able to host it.
Challenges we ran into
I thought that this would be a flat app, but I found that half way through my React app had very nested components. This led to a lot of issues with prop threading and managing state. One of the biggest issues I had was managing child state and parent state at the same time. I had built selection validation in child elements, but was storing the selection values on the parent elements. Whenever I would select a value, it would wipe away the child state by rerendering it. I ended up having to completely redo sections of my app at the end to pull all the state to the top level App.js component.
Accomplishments that we're proud of
I'm proud to have connected my first domain.com domain to a githubs page deployed app. It felt good to learn more about deployment, hosting and cnames.
What we learned
I learned alot from this app, but the most important had to do with re-rendering and child - parent component relations. In React state is everything so you need to pay attention to who knows what and how they are able to share it. I think in the future I would either have less components, or use Redux to manage my state and avoid all the prop threading and extra useState variables I ended up using.
What's next for Green Homes Now
I would like to expand this service to a number of quizzes and an overall dashboard for users to continue to make positive, impactful actions. This dashboard would help them learn about their role in fighting climate change and keep them on track to be carbon neutral.
Log in or sign up for Devpost to join the conversation.