Check Your Source

Introducing our web platform that sheds light on your local energy sources! With our user-friendly search feature, discover where your energy comes from with ease.

Comment

Inspiration

We want to advocate for a cleaner future by educating users about where they are getting their electricity from and to promote users to advocate for better energy sources for their region.

What it does

The webpage takes a text input from the user and matches the location to the closest region provided by the API to display where the user's energy is coming from. The API information is converted into a chart via chart.js and displayed along a table.

How we built it

We used the React framework and pulled data from an API and displayed it in a digestible format on a webpage using Chart.js.

Challenges we ran into

  1. We tried to hide our API key on a static website but we realized we could not do this.
  2. It was our first time using Chart.js, which was difficult to learn.
  3. We had some troubles with UI and UX.
  4. For some of us it was our first time using React.
  5. Deciding how we would encompass all of the locations in the API for the user to access

Accomplishments that we're proud of

  1. We are proud that we were able to figure out Chart.js in such a short amount of time and that we overcame the UI/UX challenges we faced.
  2. Additionally we learned how to Geocode and pull data from the API so that we did not need to hard code a drop down menu.
  3. Understand the importance of UI/UX design to encourage usability

What we learned

  1. We learned how to deploy a React webpage
  2. Color Schemes and fonts are extremely important to the viewing experience of a webpage
  3. We learned how to Geocode with an API to fetch longitude latitude based on searching incomplete addresses
  4. Displaying data as a PI chart using Chart.js React
  5. Implementing and formatting HTML tables with data being pulled from an API

What's next for Check Your Source

  1. We want to provide more accurate data from more regions, narrow it down to cities in particularly.
  2. We want to use the user location to fetch the information of local energy ministers or politicians in the area so that users can reach out the these members to advocate for better energy sourcing.

Project Github

https://github.com/SyndicateGit/CheckYourSource

Note

Please install node.js when you are checking through the zip file

run npm install

Share this project:

Updates