Green Habit Tracker Webapp

Inspiration

The idea for the Green Habit Tracker was inspired by the growing need for individuals to take actionable steps toward sustainability. With climate change becoming an increasingly urgent issue, I wanted to create a tool that empowers people to make small, positive changes in their daily habits that collectively have a big impact. The app is designed to encourage users to track their carbon footprint, reduce waste, conserve water, and promote sustainable living. I wanted to create something simple yet powerful, making sustainability more accessible and tangible for everyone.

What it does

The Green Habit Tracker helps users track their daily sustainable actions, such as reducing carbon emissions, recycling, saving water, and more. It offers a personalized sustainability dashboard that visualizes their impact over time, a carbon footprint calculator to estimate their emissions based on activities, and daily challenges to gamify green habits. The app also provides location-based sustainability recommendations, such as local recycling centers or eco-friendly events. It connects users to a broader community of eco-conscious individuals, sharing progress and encouraging others to take action.

How Ibuilt it

I used the following technologies to build the web app:

• Frontend: Next.js and React for a responsive, fast, and dynamic user experience. Tailwind CSS was used to quickly design and customize the interface.
• Backend: Node.js and Express for building the API and handling user authentication. We used MongoDB to store user data, such as progress and achievements.
• APIs: Integrated the Carbon Intensity API to calculate carbon footprints based on energy usage and daily habits. We also used Google Maps API for location-based recommendations.
• Authentication: NextAuth.js was used to handle secure user authentication, allowing users to track their progress across devices.
• Gamification: Introduced a points and rewards system to encourage user engagement and habit tracking. Users earn rewards for completing sustainability challenges and can compete with others on the leaderboard.

Challenges I ran into

• Data accuracy: One of the biggest challenges was ensuring the carbon footprint calculations were accurate. Different users have different lifestyles, so we had to find a way to estimate the emissions based on a variety of factors such as location, energy consumption, and transportation habits.
• Integrating APIs: Working with external APIs, especially for sustainability-related data, required a lot of testing and iteration to make sure the data was correct and up-to-date. Some APIs had rate limits or didn't provide the exact information we needed.
• User engagement: Getting users to consistently log their sustainable actions was a challenge. I had to design an interface that was simple and easy to use, with regular reminders and motivation to keep users on track.

Accomplishments that I'm proud of

• Personalized Dashboard: We’re especially proud of the personalized sustainability dashboard, which gives users actionable insights into their environmental impact and motivates them to reduce their carbon footprint.
• Gamification: The leaderboard and rewards system turned out to be a fun and effective way to engage users. It encouraged them to track their habits more regularly and participate in sustainability challenges.
• Local Recommendations: Integrating Google Maps API for location-based suggestions, such as nearby recycling centers or eco-friendly events, added a valuable, real-world dimension to the app.

What I learned

• User Experience: I learnt how important it is to make sustainability tracking simple and fun. Many users may feel overwhelmed by the idea of reducing their carbon footprint, so I needed to create an app that made the process enjoyable and easy to integrate into their daily routines.
• API Integration: I gained hands-on experience working with various third-party APIs and overcoming challenges like rate limiting and incomplete data.
• Gamification: The importance of making sustainability fun was reinforced by our experience implementing the gamified challenges. Positive reinforcement through rewards can drive long-term behavior change.

What's next for Green Habit Tracker Webapp

• Mobile App: I plan to develop a mobile version of the app to reach a wider audience and make it even easier for users to track their habits on the go.
• Expanded API Integrations: I aim to expand the app’s capabilities by integrating more data sources such as energy usage from smart home devices (Nest, etc.) and more detailed transportation data.
• Partnerships: I'm exploring partnerships with sustainability-focused brands to offer users exclusive discounts on eco-friendly products and services.
• Community Features: I'd like to implement features that allow users to collaborate on sustainability goals, create challenges, and interact more directly with the community.

Built With

• carbon-intensity-api
• cloud
• firebase
• google-maps
• javascript
• mongodb
• next.js
• nextauth.js
• node.js
• react
• socket.io
• stripe
• sustainability
• tailwind-css
• vercel