Inspiration
Our inspiration for DeltaHacks-12 was to transform environmentally sustainable goals into an interactive game by creating a website similar to Duolingo. The goal of this idea is to keep users engaged in eco-friendly habits by making them feel achievable and exciting. We know that living an environmentally sustainable lifestyle can feel challenging, but every little bit counts. By encouraging users to make small changes in their daily lives, we hope to help them work toward a greener future.
What it does
Eco Buddy gives users randomized environmentally sustainable goals each day. The tasks must be completed to keep Globert happy. As users finish their daily tasks, their streak increases and they earn XP, with more progress unlocking higher levels. The site also displays the amount of carbon emissions and water saved, along with a fun environmental fact that is refreshed regularly so users can learn something new while they play.
How we built it
The front end was built using React and Tailwind CSS to create a gamified interface with interactive progress tracking. The back end uses browser LocalStorage to manage user data such as streaks, XP, and daily challenges. We also integrated the Google Gemini API to generate eco-facts and motivational messages in real time. TypeScript was used throughout the project to keep data handling consistent and reliable.
Challenges we ran into
As we are all new to MongoDB, when we attempted to allocate our code into the database however we had difficulties merging the front-end with the back-end due to API integration issues.
Accomplishments that we're proud of
We successfully designed and deployed our first full-stack website as a team, marking our first hackathon experience. Throughout the process, we gained hands-on experience with core web technologies including HTML, CSS, JavaScript, and TypeScript, strengthening our understanding of front-end development, collaboration, and rapid prototyping under time constraints.
What we learned
Through this project, we learned the basics of HTML, CSS, and JavaScript, as well as the key steps involved in developing a website from start to finish. We also gained experience using tools like Google AI Studio, MongoDB Atlas, Vercel, Replit, and the built-in AI features in VS Code to generate and refine code more efficiently. In addition, we learned what GitHub is, how to use repositories, and how to collaborate effectively as a team using version control.
What's next for EchoBuddy
Future developments for Echo Buddy and Globert will include a secure user login system, features for collaborating and competing with friends and family, global and local leaderboards, and customizable goals tailored to individual lifestyles and sustainability objectives.
Built With
- css
- googleaistudio
- html
- javascript
- json
- react
- typescript
- vercel
Log in or sign up for Devpost to join the conversation.