Inspiration
Making Energy Matter
In an era where energy and natural resources are being overconsumed, we believe immediate action needs to be taken. However, people are not aware of how disastrous the situation is. So we created a website that helps visualize the energy usage trends and help people understand their energy usage patterns, revealing how minor adjustments in their habits can lead to a greater environmental impact. In order to make their savings feel more salient, we attempted to create an experience that includes a social and an immediate environment component that contextualizes efforts to save energy in a way that matters to people.
What it does
Fungi: Energy Conservation is a website that keeps track of your energy-saving progress and provides you with solutions on how to further improve. It contains data visualization where you can see energy and water usage trends over the past 12 months and shows a pie chart that compares the usage between different energies. This allows the user to visualize that these small changes over time can lead to significant impact. Furthermore, achievements are used to give a rewarding sense of accomplishment to the user when they reach certain conservation goals. Fungi: Energy Conservation also fosters a sense of community as it allows the users to share their ideas and connect in the community posts section. The website also offers outlook reports of different resources over the next few decades. Lastly, the Advanced Savings Calculator allows users to input the source and quantity which outputs a pie chart for a clearer visual comparison, and also outputs a result of the total usage along with an estimated monthly cost.
How we built it
In this hackathon, we approached the build process with collaboration and a learning mindset. We made sure that all our team members were able to take part in the project, whether it was front-end, back-end, or researching. Communication was the key to our collaboration.
Challenges we ran into
- Coming to a consensus on an idea that could be realistically implemented within the time frame. We eventually decided on one idea and expanded on it from there.
- There were issues with mobile compatibility. Many of the UI elements scaled improperly for a phone’s aspect ratio. It took a few more hours of additional effort to make the mobile version look appealing.
- One of our members was participating in the event remotely, we heavily relied on Discord for communication. Despite initial challenges, it worked out well and each member was able to contribute their strength
Accomplishments that we're proud of
We are very proud of the current user interface. The design is clean and professional and feels friendly and encouraging. We are especially proud of the calculator because of its intractability. Through the input fields and pie charts, users can visualize how their resource utilization stacks up. This provides the user with immediate feedback and prompts them to reflect on their habits.
What we learned
Throughout this project, we gained valuable experience on teamwork, application of skills to hands-on projects, and the process of development under time pressure. Under this time pressure, communication was key to our coordination to get the project completed and presentable state before the deadline.
For some of us, this was an introduction to hackathons, and it was an invaluable experience. Though we were somewhat uncertain going headfirst into an event like this, we learned a lot about each step in the development process from ideation to presentation. We were introduced to powerful frameworks that are used to create projects with ease.
What's next for Fungi: Energy Conservation?
The site would benefit greatly from an account system that would make collecting data for a user across various devices feasible as well as providing the foundation for creating a gamified account comparison system. This gamified aspect would provide a social component that could help jumpstart further efforts to drive down energy usage. Linking accounts together based on social affiliation through a social media hook would provide the everyday user a more tangible experience.
We would also like to refine a local impact aspect of the website where we translate energy savings directly into real-life impact on the local ecology and conservation efforts that can make the user’s energy-savings feel more meaningful. We have managed to include a solutions page and report page that provides an idea of what this implementation direction would entail; Users would come to learn about the climate problems in their local area by helping combat them, setting up a positive relationship with energy-saving rather than the burden of work it is often communicated as. This could eventually be a source of continued environmental updates where users would be reminded of their local area’s climate-progress and make further grassroots policy efforts more frictionless.
These social features, along with the gamified energy saving, would provide the unique value add to the website that separates it from other websites in its vicinity. Ultimately, this is how we would go about building a better tomorrow where people are socially rewarded for making a more sustainable future.
Built With
- chart.js
- git
- javascript
- lucidereact
- netlify
- npm
- react
- react-chartjs-2
- react.lazy
- reacthooks
- reactrouter
- suspense
- tailwindcss
- typescript
- vite


Log in or sign up for Devpost to join the conversation.