CASA0017 Web Assessment - SafeBike

Contents

• About
• Showcase
• Design
• Installation
• Our Team

About

SafeBike is a web application that visualizes bike theft crime statistics in London. The application uses a data-driven backend powered by Node.js, and interactively displays historic data on bike theft incidents from the London Metropolitan Police. Users can use the filtering functions to view the number of bike theft cases broken down by Lower layer Super Output Areas (LSOAs) over a period of 24 months. Users can also use the routing function to plot a route through London that displays the safest places to park their bikes at their destination.

Data Sources

• APIs: OSM overpass, CycleStreets
• MPS Recorded Crime: Geographic Breakdown - MPS LSOA Level Crime (most recent 24 months), 24 months (https://data.london.gov.uk/dataset/recorded_crime_summary)
• LSOA 2021 boundaries (https://data.london.gov.uk/dataset/statistical-gis-boundary-files-london)

The MPS Crime Data contains data for all types of crime over the past 24 months. Therefore, it was necessary to filter the data to remove everything except bike theft incidents. This was done using a Jupyter notebook, which can be found in Website/data_processing, which was also used to merge the filtered data with the geographic boundaries for each LSOA. The merged data was then output as a .geojson file for use with Maplibre and Deck.gl.

Showcase

Demo video

SafeBike.-.Google.Chrome.2025-01-12.23-46-16.mp4

Final stills

Design

Users

SafeBike is primarly aimed to be used by people living and working around London who own and regularly use bicycles to travel around the city. The MPS Crime Data used to power the application only covers London, therefore other cities are not currently supported.

Wireframes

The initial wireframes below formed the basis for the development of the final site:

Installation

Prerequisites

Ensure you have the following installed on your system:

• Node.js
• npm
• Docker

Steps to Install Locally

1. Clone the repository:

   git clone https://github.com/ethmacc/casa0017-web-assessment-SafeBike

2. Navigate to the project directory and set up the :

   cd casa0017-web-assessment-SafeBike

3. Install dependencies using npm:

   npm install

4. Add config.js:

   ## go to this path
   cd .\casa0017-web-assessment\Website\src\ 
   ##create the config.js and API key
   touch config.js  ##also can create manually

5. Add API key to config.js:

   1. Visit the OpenRoute.
   2. Sign up for an account or log in if you already have one.
   3. Follow the instructions on the website to generate an API token.
   4. Copy the generated API token.
   5. Replace 'You own API Token' in the config.js file with your actual token.

   export const API_TOKEN = 'You own API Token';

6. Go to Website path folder:

   cd .\casa0017-web-assessment\Website

7. Run the website Locally in terminal:

   ## Run this command in terminal
   npm run dev
   ## Terminal will display like:
    VITE v6.0.3  ready in 209 ms
   
   ➜  Local:   http://localhost:5173/
   ➜  Network: use --host to expose
   ➜  press h + enter to show help

8. Go to Local address web page(here is http://localhost:5173/)

Our Team