THE F2E 3rd - Week 3 - Work
UI Designer : 鹽酥G
UI source
Tool keywords: TDX api, react, leaflet, tailwind, scss, docker, openstreetmap-api
This application helps people to look up the estimated arrival time of bus conveniently.
- Nodejs-14
$ git clone https://github.com/Zhima-Mochi/Taiwan-Bus-Plus.git
$ cd Taiwan-Bus-Plus
$ npm install
.env
REACT_APP_API_ID=FFFFFFFF-FFFF-FFFF-FFFF-FFFFFFFFFFFF
REACT_APP_API_KEY=FFFFFFFF-FFFF-FFFF-FFFF-FFFFFFFFFFFF
See motc ptx api documentation.
You can use .env.example directly.
$ npm run start : .env # Or .env.example
Now, have fun with http://localhost:3000/.
When searching for a route, you can omit the Chinese characters before the route number. For example, for the 藍32 in New Taipei City, you can search with 32.
Nearby stops are displayed on a map. Clicking on a stop will show which bus routes are available at that stop. Each route can link to a bus timetable.
In the bus arrival timetable, if there's at least one stop approximately 500 meters from you, the scrollbar will automatically position itself to that stop, highlighted with a blue background.
When there's no input and no city/county selection for stop search, the default is the stops near you.
If there are no stops nearby, non-nearby stops will be displayed.