Eco-Quest

Inspiration

The inspiration for Eco-Quest came from a very personal place: my everyday observations right here in the Seattle area. It's easy to feel helpless when you see litter piling up on sidewalks and in our parks. I've also been noticing the very real effects of climate change, from unusually hot summers to altered rain patterns and the impact on local ecosystems. These daily reminders of the environmental challenges we face as a society sparked a desire to do more than just observe. I wanted to build a tool that could help turn that feeling of helplessness into action. The idea was to create a game that would not only encourage people to make small, positive changes, but also provide a way to track that progress and see the collective impact of a community working together to make our world a little greener one quest at a time.

What it does

Eco-Quest is a mobile web application that turns sustainable living into a game. Users can:

Complete Daily Quests: A fresh set of eco-challenges is presented each day, from recycling a bottle to walking instead of driving.

Earn Points & Rewards: Completing quests earns points that can be redeemed for real-world prizes and unlocks special badges.

Discover Local Events: A dynamic calendar highlights local eco-friendly events and historical facts, connecting users with their community.

Track Progress: The app's dashboard displays a user's total points and completed quests, while the leaderboard shows how they stack up against others.

How we built it

Eco-Quest was built entirely in a single HTML file using a combination of HTML, CSS, and JavaScript. I used Tailwind CSS for rapid, responsive layout design and custom CSS variables to create a soft, nature-inspired color palette. The application's state, including user scores, completed quests, and account information, is managed using the browser's localStorage API, allowing the app to function without a backend. The different views of the app (Dashboard, Leaderboard, Rewards, and Calendar) are dynamically rendered using JavaScript event listeners, creating a smooth single-page application experience.

Challenges we ran into

One of the main challenges was translating the "nature" concept into a tangible design- to basically make the website feel cozy and familiar to the user. This involved a lot of trial and error with color combinations and UI elements to create a soft and inviting aesthetic. Another significant challenge was managing the application's state on the client side. I had to carefully structure our JavaScript to ensure that all data was correctly saved to and loaded from localStorage and that the UI updated in real time. The dynamic calendar feature also posed a challenge, as it required intricate logic to correctly handle date calculations, event display, and view transitions.

Accomplishments that we're proud of

I'm most proud of the cohesive and polished user experience I was able to achieve. The design, from the pastel color scheme to the custom leaf icons, successfully conveys the app's theme and purpose. I'm also proud of the functionality of the dynamic calendar, which allows users to seamlessly switch between month and day views and see events. The app's core gamification loop (completing quests, earning points, and redeeming rewards) functions exactly as intended, which really cheered me up when other smaller parts weren't working properly during development.

What we learned

Through this project, I learned a great deal about the importance of cohesive design (especially the need for prior planning for this) and how to implement it effectively using modern CSS techniques. I gained valuable experience in client-side state management without a formal framework, solidifying my understanding of localStorage and event-driven programming. Finally, the process taught me the value of iterative development, where small, incremental changes to the UI and functionality lead to a more refined and robust final product.

What's next for Eco-Quest

In the future, I would love to expand Eco-Quest by adding a social media element to connect users in the same geographical area. This would allow people to unite, share their completed quests, and post about their eco-friendly activities. With a real-time, multi-user backend using a service like Firestore, I could implement features like a persistent/dynamic leaderboard, user profiles, and a shared feed of community-driven content. This would empower our community to not only track their individual progress but also celebrate their collective impact on the planet. Additionally, I would create an app to go along with the website as people on-the-go would most likely use an app on their phone rather than a website.

Built With

• css
• html
• javascript
• localstorage