Application showing real-time vehicle data.
The application shows the position of public transport vehicles in real time - if available or according to the timetable. If there is more than one line, you can select the line you are interested in from the side panel. After clicking on the stop, he can see the timetable for today or the next days. After clicking on the vehicle icon, we can see the three nearest stops.
There is a config file for a few agencies.
- The App is written in TypeScript.
- React-Bootstrap, Sass and Styled-Components are used to customize the UI.
- CRUD operations are performed using Axios.
- Client-side routing is done using React Router.
- Global state of the App is maintained by Redux.
- React is used to build client-side.
- Leaflet and React-Leaflet are used to render 2D maps of Earth.
- Earth maps are provided by OpenStreetMap.
- i18next is used to handle translations.
- Turf.js is used for spatial calculations.
- Some icons were taken from IconFinder.
This project was bootstrapped with Create React App.
- You must have node.js installed.
- Once you download the repository, you need install the dependencies with the command:
npm ci. - Choose the right configuration for your agency: copy
env.exampleto.envand edit the.envfile to set an app name, API key, and API server URL. More configuration options are available inconfig.ts. - Then you can run:
npm startor do build:npm run build. - Finally, there's deployment. Follow this instruction
- The main window - route ends with:
/app, e.g./app - Route view - route ends with
/app/route/[routeId], e.g./app/route/172 - Stop view for today (right now) - route ends with
/app/stop/[stopId], e.g./app/stop/1211_399 - Stop view for other day (timetable) - route ends with
/app/date/[selectedDate]/stop/[stopId], e.g./app/date/2023-04-04/stop/1211_399 - Vehicle view - route ends with
/app/vehicle/[vehicleId], e.g./app/vehicle/359633108368049 - Timetable view - route ends with
/stopIds/[stopId,stopId,stopId], e.g./stopIds/1211_48,1211_389,1211_999