/BikeApp

Displays bike journeys and bike station information in Helsinki

Primary LanguageC#MIT LicenseMIT

Bike App

Contents

Description

This is a web app that displays bike journeys and bike station information in Helsinki. The app is built with React and .NET 6.0. The backend is a REST API that uses MariaDB as a database. The frontend is a single page application that uses Vite as a build tool and TailwindCSS as a CSS framework. The app is dockerized and can be run with single command.

Data

The data that is used in this web app is owned by City Bike Finland.

Dataset for bike stations:

Technologies

Backend

  • Docker - Containerization
  • MariaDB - Database
  • Dotnet 6.0 - Backend framework
  • xUnit - Testing framework

Frontend

  • React - Frontend framework
  • Vite - Build tool
  • Playwright - Testing framework
  • material-ui - UI framework
  • TailwindCSS - CSS framework
  • PostCSS - CSS preprocessor
  • Leaflet - Map library
  • React Router - Routing
  • Axios - HTTP client
  • React-table - Table component
  • React-paginate - Pagination component

Configuration

You don't need to configure anything to run the app. The app is dockerized and can be run with single command. However, if you wish to change the configuration, you can do so by changing the environment variables.

Frontend

You can change the values of the environment variables in the docker-compose.yml file.

  • VITE_API_URL: The URL of the backend API. Default value is http://localhost:5000/api.

csvimport

You can change the database connection string in the csvimport/src/ImportData.cs file.

Backend

You can change the values of the environment variables in the docker-compose.yml file. And you can change the database connection string in the backend/Services/MySQLHelper.cs file.

  • connectionString: The variable that holds the database connection string. Default value is Server=host.docker.internal;Port=3306;User ID=root;Password=Abc123;Database=bikeapp;.

  • You can change the database root password in the docker-compose.yml file. Under the db service, change the MARIADB_ROOT_PASSWORD variable. Default value is Abc123. Remember to change the password in the connectionString variable as well.

  • You can change the database name in the docker-compose.yml file. Under the db service, change the MARIADB_DATABASE variable. Default value is bikeapp. Remember to change the database name in the connectionString variable as well.

  • All the ports etc. are configured in the docker-compose.yml file.

  • After you have changed the database connection string, you have to rebuild the docker image. You can do so by running the following command in the root folder of the project:

    docker-compose up -d --build

Installation

  1. Clone the repository
  2. Make sure you have docker installed. You can find the installation instructions here.
  3. Make sure you have docker-compose installed. You can find the installation instructions here.
  4. Run the following command in the root folder of the project:
docker-compose up -d
  1. Wait for the docker container(s) to start. It can take a while the first time you run it.
  2. Database population can take a while. You can check the progress by running the following command:
docker logs import
  1. Open the browser and go to http://localhost:5000/swagger to play with the API.
  2. Open the browser and go to http://localhost:8000 to play with the web app.

Usage

Frontend

You can use the web app by going to http://localhost:8000 in your browser.

Backend

You can play with the API directly from the Swagger UI http://localhost:5000/swagger/index.html.

Tests

Backend

You can run the tests by running the following command after you have successfully started docker container(s) (step 6) and populated the database (step 3):

docker exec backend dotnet test Backend-BikeApp.dll

NOTE: You must have the database running and populated in order to run the tests.

Frontend

You can run the tests by running the following command outside of the docker container in the root directory after you have successfully started docker container(s) (step 6): Make sure you have Node.js installed. You can find the installation instructions here. Then run the following commands:

cd frontend
npx playwright install
npx playwright install-deps
npm run test

NOTE: You must have the backend, frontend containers running in order to run the tests.

API

You can see all the API endpoints and documentation in the Swagger UI. You can also play with the API directly from the Swagger UI.

TODO

Data import

  • Import data from the CSV files to a database or in-memory storage
  • Validate data before importing
  • Don't import journeys that lasted for less than ten seconds
  • Don't import journeys that covered distances shorter than 10 meters

Journey list view

  • List journeys
    • If you don't implement pagination, use some hard-coded limit for the list length because showing several million rows would make any browser choke
  • For each journey show departure and return stations, covered distance in kilometers and duration in minutes
  • Show the total number of journeys in the list
  • Pagination
  • Ordering per column
  • Searching
  • Filtering

Station list

  • List all the stations
  • Pagination
  • Searching

Single station view

  • Station name
  • Station address
  • Total number of journeys starting from the station
  • Total number of journeys ending at the station
  • Station location on the map
  • The average distance of a journey starting from the station
  • The average distance of a journey ending at the station
  • Top 5 most popular return stations for journeys starting from the station
  • Top 5 most popular departure stations for journeys ending at the station
  • Ability to filter all the calculations per month

More

  • Endpoints to store new journeys data or new bicycle stations
  • Running backend in Docker
  • Running backend in Cloud
  • Implement E2E tests
  • Create UI for adding journeys or bicycle stations