Taxi Status App - Built with React, TypeScript, Redux, Redux Observable, and RxJS
Quick Start
-
Clone (
git clone git@github.com:wentjun/taxi-app.git), or directly download this repository. -
Install dependencies.
npm i -
Start the application in development mode. Opens the application on http://localhost:3000.
npm start -
Due to CORS restrictions from the API endpoint, you may need to install an additional plugin to ensure that the application can run smoothly on localhost.
If you are running the application on Chrome, simply download a plugin such as this, which will overwrite CORS headers and perform cross-domain requests.
If you are running the safari on Safari, enable Developer mode by going to 'Preferences', followed by 'Advanced'. On the 'Develop' section on the top menu, check 'Disable Cross-Origin Restrictions'.
Current Features
-
Selecting the number of drivers to be rendered on the map. The input can be changed via the range slider, or input text box. Do take note of the zoom levels will result in 'clustering', or 'declustering' of the markers which represent the drivers.
-
Updating of the user's current location by double clicking on the map.
-
Viewing of driver's ETA, relative to the user's current location.
Upcoming Features
-
Implementation of Service Workers and Progressive Web Application for improved performance, and refined experience for mobile users.
-
Additional option of updating the user's current location using forward, and reverse geocoding.
Credits
- Map markers: Icon made by mynamepong from https://www.flaticon.com.
Architecture & Libraries
- Main application components
-
React.js, with Presentation and Container components.
-
CSS in JS. This application uses Styled Components for that purpose.
-
Reactive JavaScript (RxJS).
-
Mapbox for rendering of the map.
- State Management with Redux. The following additional libraries help to manage the verbosity incurred from integrating TypeScript and RxJS with Redux.
-
Usage of typesafe actions
-
Handling of effects (also known as 'epics') using Redux-observables.
Advanced References & Documentation
For those who are already familiar with React.js, the following resources will greatly help you in implementing TypeScript, Redux, and Reactive JavaScript (RxJS) into your application.