Taiwan-Bus-Plus

THE F2E 3rd - Week 3 - Work
UI Designer : 鹽酥G
UI source

Tool keywords: TDX api, react, leaflet, tailwind, scss, docker, openstreetmap-api

Overview

This application helps people to look up the estimated arrival time of bus conveniently.

Requirement

• Nodejs-14

Getting started

Download code

$ git clone https://github.com/Zhima-Mochi/Taiwan-Bus-Plus.git
$ cd Taiwan-Bus-Plus
$ npm install

Create environment file in current file path

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

Run

$ npm run start : .env # Or .env.example

Now, have fun with http://localhost:3000/.

Demo

• github page

Feature & Introduction

Upon first entering the website, you'll need to wait about 15 seconds for data to update.

Route and stop searches use Trie (dictionary tree) for prefix word search.

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.