I built this single-page React app to demo how Gig Car Share could allow users to view price estimates based on an inputted route, schedule, or time. Gig charges by the minute, hour, or day with various caps based on the amount of time elapsed. The app does all of this nasty math for you!
A live version of the app can be viewed here.
User can input pickup and dropoff lcoations.
The Mapbox geocoding API is called to populate search results and the Mapbox Directions API is called to determine the driving time between the two locations.
User can input pickup and dropoff datetimes.
User can input minutes, hours, and days.
Note how the estimate correctly accounts for the $15 per hour, $55 per 8 hours, and $85 per day pricing caps.
From the root directory, npm install to install all dependencies.
Update MAPBOX_TOKEN in App.js with your own public Mapbox token.
npm run start will get the local server running.
FareNavigation- The navigation bar at the top of the app; see Material-UI's Bottom Navigation.Route- The two input boxes that query the Mapbox Geocoding API and show results as a dropdown; see Material-UI's Autocomplete.Schedule- Houses both DatePicker components.DatePicker- Inputs for DateTime that open calendar selectors; see Material-UI Pickers.Time- Inputs for minutes, hours, days; see Material-UI's Text Field.Receipt- Visualizes price as a table; see Material-UI's Table.