Have you ever spent hours manually calculating the 'CO2 cost' per mile of various vehicles and thought to yourself, there needs to be an easier, faster way to consume this information? There is so much great data, that is so hard to reach. This issue provided a perfect project for my final Flatiron School project.
The site would primarily be a React application and use Redux as a state management tool. Using Thunk allowed me to easily use asynchronous API calls and seamlessly handle the data when it returned.
The project started with two main goals, first was to make an easy-to-understand graphical interface that explained why electricity is 'dirtier' or 'cleaner' during different times of the day. The next component was to give consumers a tool to compare real emissions data for fuel (and electric!) cars to help them better decide on a vehicle to purchase. After all, a lot of car companies are talking about the environment, but a tool that allows users to dive back 10-20 years at a time and see how much progress has actually been made is more valuable. Actions speak louder than words!
The first piece of the project was relatively simple, it utilized a public API, meaning I did not need to handle any type of authorization tokens, special hashing, or anything of the like. The API did require time formatted in a particular manner and this required manual calculations. Once the Container responsible for the chart rendered a blank graph, a React lifecycle method componentDidMount() was used to fire off the asynchronous fetch request. This allowed me to load the information I had ready, as it became available and increase their user experience.
The next phase of the project proved to be more complex. I had decided from the outset that the user should have the ability to select as many vehicles as they decided to compare at once. This presented a fun problem to solve, and ultimately I opted to assign a prop to each of the "vehicle selection containers" I rendered on the screen. While mapping state to props, I used a ternary operator to check if the "vehicle selection container" existed in state, and if not, I created a unique key within state using the prop handed into the "vehicle selection container." This allows me to integrate a drop down menu that prompts the user how many vehicles they would like, and then render as many components they chose, automatically creating different props for each one. This is very handy as the chart package, ApexCharts, auto-scales the Y axis, so looking at two very dirty cars appears similar to two very clean cars, unless they are rendered at the same time.
The next main feature of the site is a series of API calls to the US EPA's API. These API calls are basically a menu-driven approach to selecting a particular year, manufacturer, and model of vehicle. As the information for the years is returned, the next API call will ask for all the manufacturers for that particular year, and return them, etc...
Once the user has selected year, make and model, we are returned a federal vehicle ID. With that ID, we make our last call to the EPA's API and are sent back many details on the vehicle. For fuel cars, we're able to directly apply the Grams CO2 per mile measurement to our charts. At this point, it became clear the ideal solution for pure battery electric vehicles was to apply the kWh/100 miles rating, to the real-time data from the UK API. This allowed me to display the 'dirtiest' and 'cleanest' gram CO2 per mile, depending on how clean the electricity was at the time of charge. Fantastic, a data-driven visual that allowed users to freely select a vehicle and display how clean it was.
So why is this all so important?
Well, as home heating and transportation move to full electrification consumers need a tool that can help handle the new loads in the cleanest possible way. Engineering solutions that double, or quadruple efficiencies of machinery can be extraordinarily expensive and therefore never succeed in the market. How many engineering hours would it take a 30mph car to reach 60-120mpg? I'm not sure, but I can tell you the technology has never reached production vehicles. If you had an electric vehicle, shifting the charge time from 6 pm (peak pollution time) to overnight can easily achieve this reduction. It only makes sense, therefore, to do this when the option is available. Many manufacturers of electrical appliances or vehicles make no mention of this while purchasing products. A Useful Tool should exist to fill this gap.
Top comments (0)