/bus-frontend

Primary LanguageJavaScript

Bus Line Information

A React application that displays the top 10 bus lines and their respective bus stops. Users can toggle between showing all stops and the top 10 stops for each line.

Technologies/Tools Used

  • React
  • Redux
  • Redux Toolkit
  • React Testing Library
  • Jest

Setup & Run Instructions

  1. Clone the repository:

git clone https://github.com/m-deepankar-singh/bus-frontend.git

  1. Change to the project directory:

cd frontend

  1. Install the dependencies:

npm install

  1. Run the development server:

npm start

The application will open in your default web browser at http://localhost:3000.

  1. Run tests:

npm test

Swagger Documentation

You can find the API documentation at the following link:

Swagger API Documentation

Future Code Improvements

  1. Implement pagination for long lists of bus stops.
  2. Add search functionality to find specific bus lines and stops.
  3. Improve error handling for API calls and display user-friendly messages.
  4. Add more comprehensive test coverage for the application.

Challenge

The task is to write an application to find out which bus lines that have the most bus stops on their route, and to present the top 10 bus lines in a nice and formatted way in a web browser. The web page should show the names of every bus stop for each of the bus lines in the top 10 list. There are no requirements how the bus stops are sorted. To accomplish the task please use the Trafiklab’s open API (https://www.trafiklab.se/). You can find more information about the specific API on the documentation page: https://www.trafiklab.se/api/sl-hallplatser-och-linjer-2. You can register your own account at Trafiklab. The data should be automatically gathered from API for each run of the application.