/stolen-bikes

Stolen bikes are a typical problem in Berlin. The Police want to be more efficient in resolving stolen bike cases.

Primary LanguageTypeScript

Stolen Bike Index

GitHub package.json version

This project has developed using React, TypeScript, Styled-Components, ESLint and follow the Git Flow praticses.


Table content


Requirements to development

  • node >=14
  • npm >=6
  • vscode (include extensions)

vscode extension

  • ESLint
  • Prettier

Initial setup

Create .env file

FAST_REFRESH=false # if Windows
PORT=3001
REACT_APP_BIKE_API=https://bikewise.org/api/v2
REACT_APP_GOOGLE_KEY=REPLACE_YOUR_KEY_HERE

Install packages dependencies

Run the command below from this root path

yarn or npm install

Development (Run local commands)

https://localhost:4000/

Run server

yarn dev or npm run dev

Changelog [click here]

Based on Conventional Changelog [here]

How it works?

If this is your first time using this tool and you want to generate all previous changelogs, you could do

conventional-changelog -p angular -i CHANGELOG.md -s -r 0

This will overwrite any previous changelogs if they exist.

All available command line parameters can be listed using CLI: conventional-changelog --help.

Hint: You can alias your command or add it to your package.json. EG: "changelog": "conventional-changelog -p angular -i CHANGELOG.md -s -r 0".


Product Requirements

As a police officer:

  • I want to see a list of reported bike thefts for the Berlin area.
  • I want to see the first 10 bike theft cases, with the ability to - paginate (10 cases per page).
  • I want to see a total number of bike theft cases.
  • For each reported bike theft I want to see:
    • Case title
    • Case description
    • Date of the theft
    • Date of when the case was reported
    • Location of the theft
    • Picture of the bike, if available
  • I want to filter reported bike thefts by partial case title.
  • I want to filter reported bike thefts by date range.
  • I want to see a loading state until the list is available.
  • I want to see an error state if the list is unavailable.
  • I want to see an empty state if there are no results.