KL Subway Outlets Finder Project (Frontend)

Introduction

The KL Subway Outlets Finder Project is a project which webscrap the Subway outlets in Kuala Lumpur area from the offical outlet locator.

This repository contains the frontend script for this project.
It should be used together with the backend script.

The frontend script is built using React.js with the support of Leaflet.

Prerequisites

Node 18.16.1 is used for the development.
Please install dependencies and launch the frontend.

npm install
npm start

The backend server should be launched simultaneously when the frontend script is launched.

Important Notes

• This frontend script should be used together with the backend script at https://github.com/TeoJJss/subway-kl-finder. The frontend script will send HTTP requests to the APIs in the backend server.
• The backend server is hosted at the 8000 port by default. If it is changed, please change the URL at ./src/App.js, url const.
• The frontend is hosted at the 3000 port by default.
• When the frontend is launched, the webpage takes some time to send HTTP request and render markers on the Leaflet map.

Interact with the markers on Leaflet map

Clicking on a marker on the Leaflet map will turn the clicked marker and other markers within 5km radius to yellow marker icon.

Use of search box

Currently, the search box which is located above the map supports the following queries:

• Which are the outlets that close the latest
• How many outlets are located in [area]

While this search functionality does not support other types of queries, feel free to try out multiple ways to express the above queries which are suppported (in English).
Matched outlets will be marked with red marker icons on the Leaflet map.