π± Sustainable Food Challenge: Project Story
π Inspiration
Food sustainability is a crucial issue in todayβs world, with carbon emissions, food waste, and unsustainable consumption patterns contributing significantly to environmental challenges. We wanted to create a tool that empowers individuals to make informed choices about their food consumption and waste habits. Our goal was to make sustainability both engaging and actionable, helping users track their impact and build better habits.
π‘ What We Learned
During the development of this project, we gained insights into:
- The environmental impact of different food choices and food waste.
- How to structure a web app with multiple features efficiently.
- Implementing user-friendly UI/UX elements to enhance usability.
- Storing and managing data locally using
localStorage. - API integration for fetching real-time product information.
π οΈ How We Built It
The project was developed using HTML, CSS, and JavaScript, with the following key features:
- Meal Carbon Calculator: Calculates the carbon footprint of meals and provides suggestions for lower-carbon alternatives.
- Food Waste Tracker: Logs food waste and provides weekly summaries with tips for reduction.
- Weekly Challenges: Encourages users to complete sustainability challenges and track their progress with a leaderboard.
- Grocery Scanner: Uses the OpenFoodFacts API to fetch sustainability data on products via barcode input.
To enhance functionality and design, we leveraged:
- Chart.js for visual data representation.
- Font Awesome for icons.
- LocalStorage for data persistence.
- Responsive design techniques to ensure accessibility across devices.
π₯ Challenges We Faced
- Data Accuracy: Finding reliable emissions data for a variety of food items was challenging.
- Optimizing Performance: Managing multiple interactive features without performance degradation.
- Dark Mode Persistence: Ensuring UI preferences remained consistent across sessions.
- API Integration: Handling API response variations and missing product information in the OpenFoodFacts database.
By overcoming these challenges, we built a project that not only educates but also encourages meaningful action toward food sustainability. πβ¨
Built With
- chart.js
- css
- html
- javascript
- openfoodfacts
Log in or sign up for Devpost to join the conversation.