What you see when you first get to our site
Did someone say trip to San Fran?!?!? :D

GreenRide

Inspiration

We've all heard of it before. Carbon emissions are bad for our globe!

But how easy is it to see how our everyday commute contributes to carbon emissions? Without an easy-to-use interface that provides tangible, customized feedback based on your travel method and routes, it's hard to know how we affect our local environments.

GreenRide brings dynamic emissions and environmental metrics right where you need it most - on your maps, next to the routes you travel every day.

We want to make it easy for each individual to see how their daily commute affects their environment. And so we introduce to you... GreenRide!

What it does

GreenRide gives you everything you would expect from a navigation system. From routes to customizable and smart filling starting point and destination fields, GreenRide brings you dynamic, traditional maps. GreenRide revolutionizes traditional maps by bringing and calculating carbon dioxide emissions completely personalized by car make, model, year, and number of passengers. Users can easily see how much carbon dioxide they emit based on their everyday travels and routes. Using this, they can better understand how their everyday travels impacts their carbon footprint and the environment at large.

How we built it

React.js Frontend
Tailwind styling
Google Maps API to get basic map display
GitHub pages

Challenges we ran into

1) Displaying route on maps: displaying routes based on the user's selected source and destination was much more challenging than expected. The base implementation of Google Maps' API does not provide an easy-to-use interface to draw routes. So, we had to build and tune some components to be able to send our location data (places, cities, states, all converted to latitude and longitude) to our Maps component in order to render the appropriate routes. We also had to design components carefully so that the route would update each time the user updated their locations.

2) Car make and models list does not always render properly: We had to be very careful with our synchronization across components since selecting a certain car make decides all the possible car models and corresponding model years that can be selected in our dropdown menu. In addition, we had to be careful with user input and ensure that all input is appropriate for the given field.

3) Auto-filling locations: we had to ensure we properly waited for data to arrive so that we can dynamically update the list of available locations as the user types.

Accomplishments that we're proud of

1) A clean design that looks sleek and cleanly delivers information to help individuals make more sustainable decisions.

2) Drawing routes that dynamically update based on user-selected locations.

3) Providing a wide range of data that is sure to allow any individual to properly customize their journey and get personalized metrics on carbon dioxide emissions.

What we learned

1) Tailwind is very nice. 2) Maps are difficult to deal with 3) Teslas are outstanding for reducing carbon footprint

What's next for GreenRide

There are plenty of features we could add, including but not limited to

Adding new forms of transportation
Adding visualizations to see how an individual's carbon emissions stack up against people in a similar area
Adding a history so individuals can track their carbon dioxide emissions across an entire day, week, or months
Providing recommendations of better routes to take or better, practical (i.e. does not add more time strain to a person's schedule) forms of transportation that both minimize carbon dioxide emissions
Taking traffic into account to deliver even more involved analytics
Adding stops / multiple destinations
Adding links and icons to let users connect to carpool, scooter, and public transportation services