EcoSpark

EcoSpark is a gamified web app that helps teens build daily eco-friendly habits through fun missions, streaks, badges, and leaderboards—making climate action simple, social, and rewarding.

Comment

EcoSpark – Igniting Change, One Spark at a Time 🌱 Inspiration We were inspired by the urgent need to make sustainability practical and engaging. Many people want to be eco-friendly but don’t know where to start, or they lose motivation after a few days. Our idea was to create a simple, beautiful, and rewarding platform where users can see the impact of small eco-actions in real time — and feel good doing it.

⚡ What it does EcoSpark is a web-based prototype that:

Lets users log daily eco-actions like recycling, reducing electricity use, or using public transport.

Shows progress visually through charts, badges, and points.

Has mock AI recommendations (static suggestions in the prototype) to guide users.

Displays a community leaderboard to inspire friendly competition.

🛠 How we built it We focused on a clean, interactive, and hackathon-ready frontend:

React.js for the core interface

Tailwind CSS for fast, responsive styling

Framer Motion for animations when earning points or completing challenges

Static JSON data to simulate user accounts, actions, and leaderboard updates

Deployed on Netlify for a live demo

Since we didn’t have time for a real backend, we used mock APIs (JSON files & dummy data) to simulate:

User logins

AI eco-tips

Points and leaderboard updates

🚧 Challenges we ran into Time constraints: We had to balance between making it functional and keeping it visually impressive.

Data simulation: Making the leaderboard and eco-stats feel “live” without a backend took extra creativity.

Feature prioritization: We had to leave advanced features (IoT tracking, AI coach) as future plans.

🏆 Accomplishments we’re proud of Created a beautiful, smooth, and functional prototype in less than 36 hours.

Designed a clear user journey that impressed the judges.

Managed to make a frontend-only app feel interactive through clever use of animations and mock data.

📚 What we learned How to make frontend prototypes look like real apps even without backend logic.

The importance of design consistency and user flow in hackathon presentations.

How to effectively pitch future features without overpromising.

🚀 What’s next Add a real backend with live authentication and data storage.

Build an AI-powered eco-coach for personalized tips.

Integrate with IoT devices for automatic tracking of eco-actions.

Partner with local eco-friendly brands for real rewards.

Built With

Share this project:

Updates