mlh-fellowship / vehico

Saving the environment one trip at a time 🌳

🚌 VehiCO 🚌

Saving the environment one trip at a time 🌳

VehiCO (pronounced Vehicle) is a webapp that aims to help users be more environmentally-conscious and make informed decisions by comparing the CO₂ emission of different transportation modes for their trip. We also encourage users to take actions and contribute to sustainability efforts by providing a convenient way for them to neutralize their emission by donating to plant trees.

Try it out!

---

⭐ How VehiCO Works

Usage

Input origin and destination addresses 📍

We support address autocomplete for your input!

View Map Route and Trip Report for different transportation modes 🚴‍

You can view the distance, travel duration, and CO2 emission (in ton) based on your trip's origin and destination. To put your trip's CO2 emission into perspective, we also provided a chart comparing your trip's emission with other contexts! Once you decide on the transportation mode of your choice, you can get more detailed directions and routing by selecting Get Directions.

Neutralize your trip's carbon emission with an offset donation 🌲

In addition to helping you make more informed decisions of your choice of transportation mode, we also provided a convenient way for you to offset your carbon emission by donating to climate change organizations to plant trees!

Try out the API:

With the server running (instructions below), navigate to https://vehico-server.herokuapp.com/api-docs/ to test out the Swagger docs for the API.

🚀 Technology Stack:

• Frontend:
• Backend:
• Version Control:
• Deployment:

👉 Getting Started

Installation:

• Fork and clone the repo

$ git clone https://github.com/MLH-Fellowship/VehiCO.git
$ cd VehiCO

Build and run using Docker

Build the containers for both client and server:

$ docker-compose up --build

Run the containers for client and server:

$ docker-compose up -d

Run using npm:

Frontend:

• Install dependencies

$ cd client
$ npm install

• Run the server and react app

$ npm run dev

Backend:

• Install dependencies

$ cd server
$ npm install

• Run the server

$ npm start

Navigate to http://localhost:3000/ to test the application.

Pulling docker images from Github registry:

• For client:

$ docker pull ghcr.io/susiejojo/vehico:client

• For server:

$ docker pull ghcr.io/susiejojo/vehico_server:server

❤️ Contributing

If you have suggestions for how VehiCO could be improved, or want to report a bug, open an issue! Contributions of all kinds are welcomed!

For more, check out the Contributing Guide.

📄 License

MIT © 2020 MLH Fellowship

Made with ❤️ by Chau Vu and Dipanwita Guhathakurta during Sprint 5 of the MLH Fellowship Explorer Batch, Fall 2020.

vehico's Issues

UI Design Mockup

Task(s)

Create mockup UI screens for:

• Start & Destination inputs
• Main dashboard (map, transportation mode tabs, sidebar for displaying stats and offset amount)

Acceptance Criteria

Figma design with above screens ready for approval

Dependencies

N/A

Resources

N/A

Notes

Display Map on Main Dashboard

Task(s)

• Render a Map on the Main Dashboard
• Draw markers for start and end locations
• Draw a default route between the two markers (default car)

Acceptance Criteria

Map rendered on main dashboard with markers for starting and destination locations as well as a default route

Dependencies

#4 #10

Resources

• https://react-leaflet.js.org/

Notes

Back button

Task(s)

• Add a back button from the /map route to redirect back to the landing page ( / route)

Acceptance Criteria

Back button that redirects from the /map route to the / route

Dependencies

N/A

Resources

N/A

Notes

Sidebar displaying Trip Report

Task(s)

• Create a sidebar next to the rendered map
• Display distance and duration of route from API
• Display carbon footprint data returned from API #11
• Render Get Directions button with Google Maps redirect

Acceptance Criteria

Sidebar displaying trip report including distance, duration, and CO2 emission
Refer to #4 for design

Dependencies

#11

Resources

#4 for design mockup

Notes

Support different types of car

Description

Since different types of car (diesel vs petrol) have different CO2 emission rate, we can allow the user to specify the type of car they're using to get a more accurate report for their trip

Task(s)

• User input dropdown for type of car
• Modify API to query with given type of car

Acceptance Criteria

When car is chosen as transportation mode, user also has the option to choose which type of car they're traveling with (through a dropdown), and the corresponding carbon footprint data will be returned

Dependencies

N/A

Resources

https://triptocarbon.com/documentation/api/footprint

Notes

Update README with gifs and deployed app link

Task(s)

• Add gifs for various travel modes on README

• Add installation through Docker instructions.

• Paste the deployed app link on README

Acceptance Criteria

README should be updated with the mentioned data.

Dependencies

None

Resources

Notes

Deployment

Task(s)

• Deploy app to Cloud Run

Acceptance Criteria

Live app!

Dependencies

#5

Resources

N/A

Notes

Continuous Deployment

Task(s)

• Set up Github Actions for continuous deployment

Acceptance Criteria

Deployed app is updated at new merges to the main branch

Dependencies

#6

Resources

Notes

Fetch distance and get carbon footprint

Task(s)

• fetch distance between start and end points using OSM API/ Leaflet

• call the endpoint when the maps page is loaded

• Send the distance with correct units and travel mode to TriptoCarbon API

• Return the carbon footprint for the route

Acceptance Criteria

The carbon footprint value should be returned by the API endpoint and sent to the sidebar for display.

Dependencies

#9, #10

Resources

• https://triptocarbon.com/documentation/api/footprint
• https://help.openstreetmap.org/questions/37861/distance-matrix-api

Notes

Offset Information

Task(s)

• Research rate for carbon footprint to monetary offset amount
• Implement frontend modal to display offset info and donation button (redirect to donation page for now)

Acceptance Criteria

• Modal displayed with offset amount information and donation button

Dependencies

N/A

Resources

• #4 for modal design mockup
• https://www.conservation.org/retire-carbon-credits#

Notes

Dockerization

Task(s)

• Create Dockerfile
• Create image & push to Repository

Acceptance Criteria

Dockerfile and image

Dependencies

N/A

Resources

N/A

Notes

Sidebar displaying carbon footprint stats & offset info

Task(s)

• Create a sidebar next to the rendered map
• Display carbon footprint data returned from API #11
• Display neutralize offset information with donate button that redirects to donation page (for now)

Acceptance Criteria

Sidebar displaying carbon footprint data and offset info with donate button

Dependencies

#11

Resources

N/A

Notes

Community Readiness

Task(s)

• Project README (Description / Tech Stack / Getting Started Guide / Links / Badges)
• Contributing Guidelines
• Code of Conduct
• Issue Template
• PR Template

Acceptance Criteria

Completed above documentations

Dependencies

N/A

Resources

README template

Notes

Change transportation mode from Tabbar

Task(s)

• Adjust vehicle icons to fit the tab bar.

• Send the travel mode data to the Routing API (GraphHopper for now) in RoutingMachine.js

• Send the mode, origin, and destination latlng values to the server at /api endpoint as query parameters.

• Return the response fetched from the endpoint and render the carbon footprint, distance and time values on the sidebar.

• Send the carbon footprint to the bar graph on the sidebar.

• Allow switching between travel modes and displaying the changed distance, time and carbon footprint values as well as route.

• (if possible) Cache the response to prevent multiple calls to the APIs.

Acceptance Criteria

The user should be able to switch between various travel modes from the buttons and see changes on the sidebar and the change in map routes.

Dependencies

#11, #12

Resources

Notes

Start & End Destinations Input Screen

Task(s)

• Textboxes to input start & end destinations
• Button to confirm and redirect to main dashboard

Acceptance Criteria

Start & end destination input screen according to design mockup

Dependencies

N/A

Resources

#4 for mockup design

Notes