Inspiration

Electric vehicles are inevitably the future mode of transportation. However, electric vehicles may be intimidating to the uninformed, and those interested in purchasing an electric vehicle may struggle find one that fits their needs. The inspiration for creating EasyEV stems from the desire to inform the uninformed about electric vehicles and their impact, and to create an elegant and eloquent experience for those interested in purchasing one or investing in EV related stocks.

What it does

Our website features a home, explore, compare, quiz, and news page.

Home

The home page features navigation for the user to start a quiz or visit the news page. The text below the banner explains reasons to purchase an electric vehicle, and has drop-down menus for answers to frequently-asked questions. Home Demo

Explore

The explore page contains a grid containing a vast collection of various electric vehicles.

Explore Page Demo

The user can choose to sort this collection by manufacturer, and also has the option to search for a particular car by its name. Each car in the grid can be expanded to reveal more information.

Explore Company Demo

If a car has not been released yet, the user can opt in to receive an texts about updated to the car they are interested in. This is accomplished through the Twilio API.

Receive message Demo

Compare

The compare page allows the user to compare any two cars by selecting them from a drop-down menu. The differences in the specifications of the two cars are highlighted by color. Red means that a car is worse in a certain specification and green means that a car is better in a certain specification.

Compare Demo

EV Quiz

The quiz page features three questions about the user's preferences accompanied by three dropdown menus for each question. After choosing an option for each question, the two cars that fit the criteria the most are shown and compared.

EV Quiz Demo

News

News is one of the most important factors in both making smart purchasing decisions as well as investing. Our news page combines stock information of various companies at the top, where a ticker is red when the company's stock price is down on the day, and green when the company's stock is up on the day, with news articles. Below the stock section, news articles pertaining to electric vehicles are shown, where the image, title, date, description, and sentiment score are displayed for each article. The sentiment score is determined by feeding the contents of the article into the Google Cloud natural language processing service. The stock and news information is updated live, and retrieved using API's provided by GNews and AlphaVantage.

News Demo

How we built it

The frontend of our website was created using Gatsby for React, HTML, and CSS, and our backend was managed through Javascript and graphQL to retrieve data from markdown files. We also made calls to various APIs such as the Google Cloud Natural Language Processing API, Twilio API for text messages, GNews for current news and AlphaVantage for live stocks. We created components for each section of our application ranging from the PostCard for a car, NewsPostCard for news and SingleCar for the page for each car. Then using the components we pipe in data from either fetching JSON from APIs or querying the markdown schema using GraphQL to create modular and reusable code.

Challenges we ran into

We ran into two primary challenges while building EasyEV. The first problem was setting up the API's. Since neither of us had much experience in backend, we had to learn how to properly manage requests to servers, and to find API's that would fit our needs. The second problem was deciding on a layout for our website that was aesthetically pleasing and functional for our users.

Accomplishments that we're proud of

We are very proud of how our website looks and feels. The layout of each page feels intuitive, and is elegant in how each element on each page looks. Looking back from the barely functioning and rather aesthetically unpleasant prototype that we started with, we feel very accomplished in the final product.

What we learned

We have obtained a much more profound understanding of Javascript/React/GatsbyJS/GraphQL, and how to create an effective full-stack application In addition, we have learned how to responsibly handle API requests, and how to effectively interpret their responses. We also learned how to use Netlify, and how to purchase and redirect domains with DNS configurations.

What's next for EasyEV

We plan on using a database to store user interactions with our site, so that visitors can view electric vehicles that are popular on our website, and to add a more sophisticated recommendation system.

Built With

Share this project:

Updates