Skip to content

reimbo/tukko

Repository files navigation

IoTitude logo

IoTitude 2023

WIMMA Lab

wimma lab logo

  • WIMMA Lab is a learning environment where students solve assignments in multidisciplinary project teams.
  • Read more at wimmalab.org
  • Is a part of Jyväskylä University of Applied Sciences jamk.fi

Team Members

Name Description Company / entity Task Responsibilities LinkedIn
Reima Parviainen Team Leader IoTitude / Lead the project and handle test planning LinkedIn
Justus Hänninen Junior Developer IoTitude / Backend, TypeScript, SKILL-db API LinkedIn
Hai Nguyen Junior Developer IoTitude / Backend, API, Data visualization, Gitlab Pipeline LinkedIn
Ilia Chichkanov Junior Developer IoTitude / Backend, SKILL-db API LinkedIn
Olli Kainu Junior Developer IoTitude / Frontend LinkedIn
Otto Nordling Junior Developer / Tester IoTitude / Testing LinkedIn
Alan Ousi Junior Developer / Tester IoTitude / Testing LinkedIn

Team

Tukko

Tukko ("clog") is a traffic visualizer web application built with React

WIMMA Lab 2023 IoTitude created Tukko - Traffic Visualizer, an assigment given by Combitech. Tukko utilizes data from digitraffic API, and improves upon it by unifying the scattered info across multiple endpoints into our own much simpler API. We also gather data long term, which can later be shown to users to check for recent anomalies.

This data is then shown in a React based user interface, with mapping tools by Leaflet utilizing multiple plugins such as Geoman and Cluster markers. Utilizing custom icons, popups and tooltips, Tukko strives to convey information intuitively. For the more interested users, more in depth information is available. Development for Tukko followed best practices by utilizing a very strict ruleset maintained by Typescript and ESLint. Tukko is a complete product, but our team had many ideas left unfulfilled due to time constraints.

ReactMongoDBTypeScriptRedisExpess.jsNode.jsREST APIVite

Installation

For development environment you will need:

Development

# Use SSH to pull from Github
git pull git@github.com:reimbo/tukko.git
git pull git@github.com:reimbo/tukko-backend.git

# Change working directory to tukkos folder
cd traffic-visualizer
cd traffic-visualizer-backend

# Install node dependencies with npm for both
npm install

# Run frontend development environment with vite
# For backend the same and it runs "npm-run-all -p compose:dev debug"
npm run dev

Production (Docker)

# For backend install npm-run-all
sudo npm install -g npm-run-all

# Build and run backend containers
# "npm-run-all -p build compose:prod"
npm run prod

# Does the build and makes a Docker image for the frontend and runs it
# localhost:5173
# "docker stop container_name 2>/dev/null || true && docker rm travis --force 2>/dev/null || true && docker build -t travis:latest . && docker run -d --name travis -p 5173:80 travis:latest"
npm run prod

Redis need initialization

Check "I have read and understood the Terms" and Submit

  • Check "I have read and understood the Terms" and Submit

Redis

  • Username: default
  • Password: travis_is_the_best
  • Click Apply changes (a couple of times)

Access token on the .env

If you want to connect your Github/Gitlab ticketing system to the feedback form, create an access token with api-rights and add the token to the .env of the backend folder.

# Redis variables
REDIS_OM_URL=redis://redis-stack:6379
REDIS_OM_PASSW=tukko_is_the_best

#mongoDB variables
MONGO_INITDB_ROOT_USERNAME=admin
MONGO_INITDB_ROOT_PASSWORD=admin
DB_NAME=tukko
COLLECTION_NAME=tms
DB_CONN_STRING=mongodb://admin:admin@mongo:27017

# Node variables
TUKKO_DOMAIN=http://localhost:3001
PORT=3001
TMS_API_URL=https://tie.digitraffic.fi/api/tms/v1
TM_API_URL=https://tie.digitraffic.fi/api/traffic-message/v1
TMS_STATIONS_DATA_URL=https://tie.digitraffic.fi/api/tms/v1/stations/data
TMS_STATION_LIST_URL=https://tie.digitraffic.fi/api/tms/v1/stations

# Access token is used by the feedback form to insert 'customer feedback' labeled tickets
# straight into GitLab. You will need to generate a new one.
ACCESS_TOKEN=your_github_or_gitlab_access_token_here

Usage

Contributing

Pull requests are welcome.

License

MIT