Inspiration
The growing environmental crisis inspired us to create a solution that empowers individuals to take meaningful steps toward sustainability. We wanted to make the 3Rs—Reduce, Reuse, Recycle—more accessible and actionable in daily life using technology, gamification, and AI guidance.
What it does
DigiGreen is a sustainability-focused web app that promotes eco-friendly living through:
- Reduce: Carbon footprint tracker using the Carbon Interface API and a food product scanner powered by the OpenFoodFacts API.
- Recycle: Interactive map displaying nearby recycling stores using the OpenMap API and Leaflet.js.
- Reuse: Eco-store showcasing reusable and sustainable products.
- Voice-AI Assistant (Garv Chatbot): Built with ElevenLabs to guide users on their green journey.
- Authentication & Database: Managed with Supabase for secure login and real-time data handling.
How we built it
We used React.js for the frontend, Supabase for authentication and database, Carbon Interface API for emissions tracking, OpenFoodFacts API for scanning and product details, and OpenMap API + Leaflet.js for mapping recycling centers. The AI assistant was integrated using ElevenLabs for natural voice interaction. The app is deployed on Netlify for fast and reliable access.
Challenges we ran into
- Integrating multiple APIs smoothly without performance issues.
- Handling accurate location-based data for recycling centers.
- Designing a UI that balances functionality, aesthetics, and accessibility.
- Synchronizing real-time database updates with Supabase while ensuring security.
Accomplishments that we're proud of
- Becoming finalists at the DigiGreen Hackathon.
- Successfully integrating 4+ APIs to create a seamless user experience.
- Designing a visually appealing and easy-to-use interface for all age groups.
- Building a functional AI voice assistant to make sustainability guidance more engaging.
What we learned
- Effective API integration and error handling for dynamic applications.
- Mapping and geolocation handling with Leaflet.js and OpenMap.
- Optimizing frontend performance when dealing with real-time and API-heavy data.
- The importance of blending technology with environmental awareness to inspire real change.
What's next for DigiGreen
- Add gamification with badges and rewards for eco-friendly actions.
- Expand the recycling locator to support global data sources.
- Integrate machine learning to give personalized sustainability tips.
- Partner with local stores and NGOs to encourage on-ground eco-friendly initiatives.
Built With
- leaflet.js
- react
- supabase
- three.js
Log in or sign up for Devpost to join the conversation.