About the Project

Inspiration

The increasing global emphasis on sustainability and renewable energy inspired us to create this project. We wanted to provide a user-friendly way for individuals, researchers, and policymakers to access real-time insights into renewable energy usage. By visualizing the most renewable-energy-driven hours in a given location, we hope to encourage greater awareness and advocacy for sustainable practices.

What We Learned

Throughout the project, we explored:

• API Integration: Leveraging the Electricity Map API to fetch renewable energy data taught us how to effectively work with RESTful APIs.
• Data Visualization: Implementing Chart.js for displaying data allowed us to enhance user interactivity and present complex data in an intuitive format.
• Frontend and Backend Coordination: We learned how to seamlessly integrate a Python Flask backend with a dynamic JavaScript frontend.
• Handling Real-World Data: Managing and processing real-time energy data helped us understand the challenges of working with large datasets and ensuring accuracy.

How We Built the Project

1. Backend:
   • Built with Python and Flask, the backend fetches renewable energy data from the Electricity Map API.
   • Data processing is performed to calculate the top 5 hours with the highest percentage of renewable energy usage.
2. Frontend:
   • Designed with HTML, CSS, and JavaScript, the frontend provides an intuitive interface for users to input coordinates and API keys.
   • Data visualization is handled using Chart.js to create interactive bar charts.
3. Integration:
   • Used fetch API in JavaScript to communicate with the Flask backend.
   • Data is dynamically updated on the frontend based on API responses.

Challenges We Faced

• Data Accuracy: Some API responses contained missing or incomplete data, requiring additional handling to ensure meaningful results.
• Cross-Origin Issues: Integrating a local Flask server with a frontend required managing CORS configurations.
• Chart Responsiveness: Ensuring the chart remained responsive across various screen sizes took additional effort in styling and chart configuration.
• API Limits: Handling rate limits and ensuring optimal API usage while testing was a balancing act.

Conclusion

This project reinforced the importance of data accessibility and visualization in promoting sustainability. By merging technology and awareness, we believe we can drive positive change in energy usage behaviors worldwide.

Built With

• css
• html
• javascript
• python