EcoQuest

Inspiration

We were inspired by habit trackers and productivity gamification apps we found online and thought that extending this to sustainability would be very helpful. Books and videos exploring how gamified feedback loops impact motivation and behavior also supported our idea. We wanted to apply these insights to sustainable behavior, making eco-friendly habits fun and engaging through quests, rewards, and personalization. We wanted to be able to expand EcoQuest to the classroom and younger students to teach them the importance of eco-friendly habits. As a result, we made the ui/ux system easy to understand and satisfying for users of all groups to use.

What it does

EcoQuest is a retro-style web app that helps users build sustainable habits through gamification. Users can create an account and get daily/weekly eco-friendly tasks (like biking instead of driving). Through completing these tasks, users can earn coins and spend them in a virtual eco-shop filled with fun pixel-style items to fill their garden. This includes different trees and bushes. The garden provides a satisfying and easy way for users to track their checklist progress and manage their growing sustainable streak, as the # and type of greenery in your garden represent how many coins you have racked up through quests. This element makes the game competitive as well, allowing you to compare your progress with others (adding to the gamification element). The experience is designed to feel like a game while quietly building real-world eco-consciousness.

How we built it

We built EcoQuest using react for the frontend, using components and state to manage tasks, inventory, and navigation. For the backend server logic, we used Express.js and Node.js and used MongoDB Atlas for cloud-hosted storage of users, items, and tasks. To host the backend and the API for EcoQuest, we used render. Our backend includes endpoints for user authentication, inventory management, and task operations. Passwords are encrypted using bcrypt before being stored when the account is generated.

The frontend communicates with the backend via API requests, updating and displaying data in real-time. Styled Components and custom CSS for a retro 8-bit aesthetic.

Challenges we ran into

As first-time hackathon participants, this was the first fullstack webapp we have ever built. None of us had experience setting up a backend or integrating a cloud-hosted database. During the development of the backend, we had to do a lot of debugging for our API requests, using insomnia to make sure collections and data records were being stored properly. Learning how to store references and embedded documents in MongoDB (like tasks inside the user schema) was a technical challenge we’re proud to have overcome when constructing the backend. Creating the account system with the authentification and encryption of passwords was a challenge, but we’re proud that we implemented them mostly correctly.

Accomplishments that we're proud of

We’re especially proud of building a complete login system with encrypted passwords, a functioning database schema, and a working connection between frontend and backend. Deploying both to the cloud rather than hosting it online was a fulfilling accomplishment. We also loved creating the pixel-art style shop and watching it come to life, especially making Sustainable Skateboarding Steve move. Being able to securely store and update user data, track coins, and build a dynamic daily task system was an exciting achievement for us, especially as first-time hackers.

What we learned

Through this project, we learned how to use MongoDB for reading, writing, and updating user data in a real-world application. We learned how to build and secure user authentication, model complex schemas with Mongoose, and structure a RESTful API. On the frontend side, we picked up React fundamentals, component design, state management, and efficient form handling. We also learned how to deploy applications using Netlify and Render, and how to work as a team on GitHub to coordinate backend and frontend code.

What's next for EcoQuest

We plan to expand EcoQuest by adding a more immersive experience. This includes category-based shops, seasonal or limited-time challenges, animated rewards, and a system to track each user’s net carbon footprint reduced. We’ll integrate more real-time data, such as carbon emissions and air quality per city, to make the experience even more personal and motivating. Our goal is to keep players engaged through meaningful rewards and new daily challenges—making sustainability not only accessible, but fun.

Built With

• css
• express.js
• html
• javascript
• mongodb
• mongoose
• node.js
• react.js
• render