Optimizing Uber cost with React

Image for post
Image for post

Sometimes you want to take a ride somewhere, but do not rush. In such situations, you checking time to time price of the trip. For such cases, I decided to write a simple app with React which will make requests to Uber API and tell when the price is best in comparison with older ones.

Design

I want this app to be as simple as possible. Only three pages: Start, Chart, and Info. For UI components will be used material-ui, for state management — redux, the map will be taken from mapbox, and chart from recharts. In order to hide Mapbox key will be used dotenv. Requests will be made with redux-saga.

Image for post
Image for post

Start

At first, I ask you to paste the Uber API key. It will be used only to make requests for ride estimation. I would glad to use only my API key, but Uber has a restriction — 100 requests per hour. Hopefully taking API key is very easy and how to do this will be described in the Info page. Then you can select the location with markers on the map and how long you will wait. All data from this form will be saved into localStorage and next time when you open the app you will not be forced to do the same staff once again.

Chart

When ride will be validated Start page will be replaced by Chart page. Here will be shown the chart with prices and notifications will appear when the price is better than all previous. Polling to Uber API made with the saga.

In order to show the price in fancy color, I am using a function which generates color according to price.

Info

In the Info page, I can see information about the application and how to get an API key. Also when you reach requests limit — will be shown an error with the number of seconds left to wait.

In result you can optimize the cost of your Uber ride: )

App: https://rodionchachura.github.io/optimize-uber-cost/

Repo: https://github.com/RodionChachura/optimize-uber-cost

Reach the next level of focus and productivity with increaser.org.

Image for post
Image for post
Increaser

Written by

Software engineer, creator of increaser.org. More at geekrodion.com

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store