EcoQuest

• 

  Challenge Page

• 

  Inventory & Badges

• 

  Leaderboard

Inspiration

Sustainability often feels overwhelming, abstract, and hard to measure at an individual level. While many students care about the environment, there’s a disconnect between intention and action. We were inspired by platforms like Duolingo that successfully turn small, daily habits into engaging streak-based experiences. We asked ourselves: What if sustainable living felt like a game instead of a responsibility? EcoQuest was born from the idea of making climate action visible, rewarding, and community-driven especially on a college campus where small actions can scale into meaningful impact.

What it does

EcoQuest is a gamified sustainability platform that turns real-world eco-friendly actions into location-based quests. Users can: Discover nearby sustainability challenges on a live map Complete real-world eco missions (recycling, biking, energy saving, cleanups) Earn points and track progress Compete on leaderboards Engage with a sustainability-focused community By transforming small actions into measurable progress, EcoQuest makes sustainable behavior consistent, visible, and rewarding.

How we built it

We built EcoQuest as a full-stack web application. Frontend: Built with a modern React/Next.js-based framework for dynamic UI and smooth navigation between map, inventory, leaderboard, and community screens. Backend & Auth: Integrated authentication and data management to track user progress and points. Render Avatar: Blender Map Integration: Implemented location-based rendering of sustainability quests. Gamification System: Designed a points and quest-completion structure to reinforce positive behavior loops. We focused heavily on user experience clean UI, clear challenge cards, and visual feedback to make the app feel engaging and intuitive.

Challenges we ran into

Balancing gamification with realism We had to design challenges that were achievable but still meaningful in real-world impact. State management & syncing user progress Ensuring points, inventory, and quest completion updated correctly across pages required careful backend-frontend coordination. Design clarity vs. feature overload It was tempting to add more mechanics, but we prioritized a clean, demo-ready experience.

Accomplishments that we're proud of

Successfully built an interactive, location-based quest system Created a complete gamified loop (challenge → completion → reward → leaderboard) Designed a polished UI with multiple integrated screens Delivered a working prototype within hackathon constraints Successfully used Blender to build a 3d model

What we learned

Gamification can be a powerful behavior-change tool when designed intentionally Simplicity in product design often creates stronger user experiences Small, clearly defined features executed well are more impactful than overly complex systems Sustainability solutions must focus on habit formation, not just awareness

What's next for EcoQuest

Partner with campus organizations to sponsor real challenges Integrate impact metrics (CO₂ saved, energy reduced, waste diverted) Introduce reward redemption with local businesses Expand beyond campus to city-wide sustainability ecosystems Our long-term vision is for EcoQuest to become a behavior-change platform that makes climate action measurable, social, and scalable.

Built With

• and
• api
• continuous
• css
• deployment
• design
• firebase
• google
• hosting
• location-based
• maps
• modern
• next.js-?-frontend-framework-for-building-a-dynamic
• points
• quest
• quests
• render
• responsive
• responsive-web-app-react-?-component-based-ui-development-firebase-authentication-?-user-login-and-secure-authentication-firebase-firestore-?-real-time-database-for-storing-user-progress
• styling
• tailwind
• ui
• vercel
• visualization