EcoAI

"Learn, act, and track your impact, all by using AI"

Comment

Inspiration

I created EcoAI because I noticed that many people want to help the environment, but do not know where to start or lack access to local eco-friendly opportunities. I wanted to build a platform that makes sustainability easy and actionable, especially for students who wish to make a difference but need guidance and motivation.

What it does

EcoAI is a web-based platform that helps users learn about environmental issues, track their eco-impact, and find local opportunities to take action. Users can:

  • View educational climate and sustainability facts.
  • Track points for eco-friendly activities.
  • Browse local opportunities (cleanup events, tree planting, volunteering, etc.)
  • See opportunities on a map and filter by type or distance.
  • Join opportunities and earn points for participation.

How we built it

EcoAI was built using:

  • React + TypeScript for the UI
  • Tailwind CSS for styling
  • React-Leaflet + Leaflet for the map and marker system
  • OpenStreetMap tiles for map data
  • Local storage for tracking points and activities
  • Custom logic for generating and filtering local opportunities

Challenges I ran into

The biggest challenge was making the map as accurate and responsive to the best of my ability. Initially, the map was not displaying correctly, and the user's location was really off. I had to improve the map update logic and adjust the way markers and location tracking were handled to make it feel more precise and user-friendly.

Accomplishments that I'm proud of

  • Built an MVP that includes education, tracking, and local opportunity discovery.
  • Created a clean, modern UI that feels intuitive and motivating.
  • Designed a points system and challenges to encourage long-term eco-friendly habits.
  • Successfully integrated maps and location-based features into a single platform.

What we learned

We learned how to combine multiple features into one cohesive product, including:

  • Handling location permissions and geolocation
  • Using Leaflet for maps and custom marker icons
  • Building a real-world MVP with a clean UX
  • Structuring React components and managing state effectively

What's next for EcoAI

In future updates, we plan to add:

  • Real API integration for accurate local opportunities
  • AI-powered personalized recommendations
  • More challenge types and social sharing features
  • A full user account system and cloud storage
  • A way for organizations themselves to access this platform and add opportunities to it so that users can directly select those opportunities.
  • Adding authentication and authorization features to make the platform save a user's data.

Built With

Share this project:

Updates