This web app fetches buses arrival/departure data of a specific station/stop place in Helsinki through digitransit GraphQl endpoint and shows them properly both for desktop and mobile users.
install packages:
npm install
run development (localhost:3000
):
npm start
run production (localhost:5000
):
npm run build && serve -s build
the project developed using node v16.x.x and npm v8.x.x
this project is Unit Tested carefully! to run all the test cases with coverage report:
npm run test src -- --coverage
to run a specific test case:
npm run test PATH_TO_SPEC_FILE
to run only changed test files:
npm run test
- buses list showing
- buses positive and negative delays handling
- synced global clock and buses list arrival estimation
- real time data updating
- ~90% code coverage
- responsive design implementation
- React
- Typescript
- Styled-components
- Apollo Graphql
- Graphql typescript code generator
- React Testing Library
A real bus checker web app should not show the incoming buses in 3-digit next minutes! But due to lack of data samples and to show how the minutes estimation feature works, we don't filter bus arrivals in more than 1 hour!
- add
eslint
andprettier
. - add integration tests for
<App />
container. - refactor and move global clock from
<Clock />
component to a Top-level container. - add integration tests for synced clock of global clock and buses list.
- migrate from
npm
toyarn
- config jest coverage to ignore unnecessary files
- provide performance measurements
- provide bundle analysis
- add cypress ui tests