EcoLocal

• 

  Homepage: EcoLocal's mission, impact stats, and how we help users live more sustainably — tied to UN Goal 11.

• 

  Dashboard: See daily eco-challenges, earn points, unlock badges, and track your streaks.

• 

  Challenges & Leaderboard: Complete actions like "Use public transit" and climb the leaderboard with friends.

• 

  Weekly Impact Tracker: Track your eco-contributions — see CO₂ saved, water conserved, and how each action stacks up.

• 

  Visual Charts: Get a clear breakdown of environmental impact per challenge with Recharts-based visualizations.

• 

  Nearby Eco Spots: Discover and submit local recycling centres, thrift shops & eco cafés to help others live greener.

🌱 Inspiration

Urban areas generate over 70% of global CO₂ emissions — and cities are growing faster than ever. I wanted to build something fun and meaningful that helps everyday people take small eco-friendly actions that, together, create big impact.

Inspired by UN Sustainable Development Goal 11 — Make cities inclusive, safe, resilient, and sustainable — I created EcoLocal to gamify sustainable living and turn good habits into a movement.

🔄 What It Does

EcoLocal is a gamified web app that encourages urban users to live more sustainably by:

• 🟢 Giving daily eco-challenges (e.g. take public transport, use a reusable bag)
• 🏆 Awarding points, streaks, leader board and unlockable badges for completed actions
• 📈 Tracking weekly CO₂ and water saved via beautiful charts
• 🗺️ Showing a map of local eco-spots, like thrift stores and recycling stations
• 📍 Letting users submit new pins to crowdsource green locations

With a polished UI, confetti animations, toast alerts, and real-time updates — EcoLocal turns climate-friendly choices into a daily game.

🛠️ How I Built It

I built EcoLocal solo in under 10 days using:

• Next.js + Tailwind CSS for a clean, responsive frontend
  
• Firebase (Auth + Firestore) to store users, track challenges, badges & points
  
• Leaflet.js with OpenStreetMap for eco-location mapping
  
• Recharts to visualize weekly environmental impact
  
• Vercel for fast, free deployment
  
• Plus: gamified features like streak tracking, badge unlocks, and confetti 🎉

This was my first full-stack web project — and I learned everything as I built it!

🧠 What I Learned

• How to integrate Firebase Authentication and Firestore queries
  
• Managing nested user data (points, streaks, badges) in real-time
  
• Creating responsive UI with Tailwind and testing for mobile accessibility
  
• Using React state and conditional logic to trigger animations and reward loops
  
• Deploying with Vercel, fixing build issues, and debugging ESLint crashes

🚧 Challenges I Ran Into

• Making authentication work smoothly across platforms (Google login)
  
• Displaying dynamic, personalized data without UI flicker
  
• Balancing mobile responsiveness and usability
  
• Debugging build-time crashes on Vercel (solved by managing ESLint configs)
  
• Structuring Firestore documents for scalable challenge logic

🏆 Accomplishments I'm Proud Of

• Built and deployed a full-stack gamified app from scratch in just 10 days
  
• Completed all major features: daily challenges, points, badges, streaks, maps
  
• Designed an engaging UI that feels fun, motivating, and rewarding
  
• Created something that could genuinely help people live greener lives
  
• Learned more in 10 days than I ever expected — and had a blast doing it

🔮 What’s Next for EcoLocal

• 🛍️ Let users redeem points for local eco-coupons or digital goodies
  
• 🧠 Expand the challenge library using AI-based personalization
  
• 📲 Launch as a mobile-first progressive web app (PWA)

EcoLocal is just the start — I believe small steps, taken daily, can help make cities greener, cleaner, and more connected. Let's build sustainable habits, together. 🌎

Built With

• auth
• chart.js
• css
• firebase
• firestore
• leaflet.js
• next.js
• openstreetmap
• react
• react-hot-toast
• tailwind
• vercel