DEV Community

Cover image for EcoMark - Discover your environmental footprint
Mitchel Techie
Mitchel Techie

Posted on

EcoMark - Discover your environmental footprint

DEV Weekend Challenge: Earth Day

This is a submission for Weekend Challenge: Earth Day Edition

EcoMark – A Simple Way to Reflect on Our Carbon Footprint

What I Built

For this challenge, I built EcoMark, a lightweight web app that helps people quickly understand their everyday environmental impact.

The idea was simple:

Most of us care about the planet, but we don’t always know how our daily habits translate into real impact.

EcoMark bridges that gap by turning a few lifestyle choices into a clear, understandable carbon score, along with practical suggestions for improvement.

Users answer a few short questions about:

  • How they get around
  • What they eat
  • Their energy usage
  • Their shopping habits

Based on this, the app calculates a score and places them into a category:

  • Green Hero
  • Improving
  • High Impact

To make it more useful (and less judgmental), the app also generates personalized tips to help users reduce their footprint in realistic ways.


Demo

👉 Try it here:

EcoMark

Video

Video


Code

The project was built and deployed using:

  • JavaScript
  • HTML/CSS
  • Google Gemini API
  • Replit (development + hosting)

How I Built It

I approached this project with a focus on simplicity, clarity, and usability, especially since many users might access it on mobile devices.

1. Carbon Scoring Logic

Instead of trying to build a scientifically perfect calculator, I designed a simple scoring system that reflects relative impact:

  • Higher-emission activities (e.g., frequent car use, meat-heavy diets) increase the score
  • Lower-impact choices (walking, plant-based diets) reduce it

This keeps the experience intuitive while still meaningful.


2. Backend with JavaScript

I used JavaScript to:

  • Handle form input
  • Process user responses
  • Calculate the carbon score
  • Render results dynamically

3. AI-Powered Suggestions with Google Gemini

One of the most interesting parts of this project was integrating the Google Gemini API.

Instead of hardcoding advice, I generate tips dynamically based on the user’s score.

  • Higher scores → stronger, more impactful suggestions
  • Lower scores → reinforcement of good habits

This made the app feel more:

  • Personalized
  • Engaging
  • Practical

4. Building with Replit

Since I didn’t have access to a full development setup, I built everything directly in Replit.

This influenced my approach:

  • Keeping the architecture simple
  • Avoiding unnecessary dependencies
  • Prioritizing fast iteration

It turned out to be a great way to go from idea → working product quickly.


5. Design Choices

I intentionally kept the UI:

  • Clean
  • Minimal
  • Mobile-friendly

The goal was to make the experience feel approachable rather than overwhelming.


What I Learned

This project reminded me that:

  • You don’t need complex systems to communicate important ideas
  • AI works best when it enhances—not replaces—core logic
  • Constraints can lead to better, more focused solutions

Future Improvements

If I had more time, I’d love to:

  • Add location-based recommendations
  • Improve scoring accuracy
  • Include visual progress tracking
  • Let users compare lifestyle scenarios

Final Thoughts

EcoMark isn’t meant to be a perfect measurement tool.

It’s a conversation starter—a small way to help people reflect on their habits and take simple steps toward a more sustainable lifestyle.

Small changes, multiplied by many people, can make a real difference.


Thanks for reading! 🌱

Top comments (0)