OneBusAway-React-Webapp

Application showing real-time vehicle data.

Description

General Info

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.

Notes

There is a config file for a few agencies.

Built With and Credits

• 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.

Getting Started and Deployment

This project was bootstrapped with Create React App.

1. You must have node.js installed.
2. Once you download the repository, you need install the dependencies with the command: npm ci.
3. Choose the right configuration for your agency: copy env.example to .env and edit the .env file to set an app name, API key, and API server URL. More configuration options are available in config.ts.
4. Then you can run: npm start or do build: npm run build.
5. Finally, there's deployment. Follow this instruction

Routes

1. The main window - route ends with: /app, e.g. /app
2. Route view - route ends with /app/route/[routeId], e.g. /app/route/172
3. Stop view for today (right now) - route ends with /app/stop/[stopId], e.g. /app/stop/1211_399
4. Stop view for other day (timetable) - route ends with /app/date/[selectedDate]/stop/[stopId], e.g. /app/date/2023-04-04/stop/1211_399
5. Vehicle view - route ends with /app/vehicle/[vehicleId], e.g. /app/vehicle/359633108368049
6. Timetable view - route ends with /stopIds/[stopId,stopId,stopId], e.g. /stopIds/1211_48,1211_389,1211_999

License

GNU AGPLv3