Our Hackathon Journey: Building EcoStore 🌿

Inspiration

Our inspiration for EcoStore came from a shared passion for sustainability and frustration with how challenging it can be to make informed eco-friendly shopping decisions online. We realized that although many people care deeply about the environment, practical tools and easily accessible information were often missing from their shopping experiences. We wanted to bridge this gap, making sustainability effortless, engaging, and rewarding.

What We Learned

Throughout this hackathon, our learning curve was steep and incredibly rewarding. We delved deeply into understanding how to seamlessly integrate sustainability within everyday shopping behavior. Our research on user habits, sustainability metrics, and effective gamification strategies taught us valuable lessons about user engagement and motivation.

On the technical side, we expanded our skills significantly by working with new technologies. We became proficient in leveraging Google Cloud Firestore for efficient data storage and retrieval, using TanStack Query for state management, and integrating the Google Gemini API for generating informative eco-tips and news summaries.

How We Built EcoStore

EcoStore was built with careful consideration for both user experience and technical robustness:

• Frontend Development: We built a responsive and intuitive interface using React and TypeScript, utilizing Vite for fast development and hot-reloading. Tailwind CSS and shadcn/ui allowed us to rapidly prototype and polish our UI components, while Framer Motion added elegant animations that enhanced the overall user experience.

• Chrome Extension: Developing the Chrome extension was an exciting challenge. We created real-time product recommendation overlays for popular e-commerce sites like Amazon and eBay, enabling seamless eco-friendly shopping suggestions without interrupting the natural browsing flow.

• Backend and AI Integration: Our backend, powered by Vercel Serverless Functions (Node.js/TypeScript), efficiently handled requests from our frontend and extension. Google Gemini API integration allowed us to provide dynamic and relevant EcoNews and EcoTips content tailored to the user's interests and shopping habits.

• Impact Dashboard and Gamification: We employed Google Cloud Firestore to track user interactions and sustainability metrics, visualizing impact through interactive charts and a flourishing virtual tree. This dashboard, combined with badges and achievements, encouraged continuous engagement and behavior change.

Challenges We Faced

One of the main challenges was ensuring real-time performance and seamless integration between our web application, Chrome extension, and backend services. Syncing data consistently across different platforms required meticulous state management and optimization, particularly with Firestore and TanStack Query.

Another significant hurdle was curating accurate eco-friendly product suggestions. We had to carefully validate product data and develop an effective method to dynamically suggest alternatives based on sustainability criteria, which involved extensive testing and adjustments.

Lastly, integrating the Google Gemini API to generate meaningful, context-aware environmental tips and summaries was initially challenging due to API constraints and ensuring relevant content generation. With thorough documentation reviews and creative problem-solving, we successfully overcame these obstacles.

Reflection

Building EcoStore taught us invaluable lessons about teamwork, technical integration, and user-centered design. We are proud of creating a platform that genuinely supports eco-friendly shopping habits and promotes sustainable living. This project deepened our technical expertise and reinforced our belief that technology can powerfully influence positive change in our environment.

Built With

• css
• framer
• gemini
• geminiapi
• googlecloudfirestore
• googlegemini
• npm
• react
• router
• tailwind
• tanstack
• typescript
• vercel
• vite