SIMRA Result Viewer Frontend

Table of Contents

1. About The Project
2. Getting Started
   • Prerequisites
   • Installation
   • Development
3. Project Structure
   • Apps
   • Domains
4. Contact
5. Resources
6. Additional Tools

About The Project

SIMRA Result Viewer Frontend is the user interface for the data-driven platform that improves cycling safety by visualizing crowdsourced ride and near-miss incident data. The application helps identify high-risk areas, evaluates urban cycling infrastructure, and provides actionable insights through interactive maps and dashboards.

Built with Angular and Nx, this frontend connects to the SIMRA Result Viewer Backend to display cycling safety analytics.

Getting Started

Prerequisites

Before you begin, ensure you have the following installed on your local machine:

• Docker: Install Docker
• Docker Compose: Install Docker Compose

1. Clone the repository:

   git clone https://github.com/simra-project/result-viewer-frontend

2. Start the backend service, check out the simra backend for more information.
3. Edit environment variables in .env use the .env.example as a template.

Deploying

To deploy and explore the application, you can use Docker Compose to set up the necessary services.

1. Run the following command to start the services:

   docker compose up

2. Access the web application at http://localhost:25080.

Development

To set up the development environment, ensure you have the following installed:

• Node.js (v16 or later): Install Node.js
• Nx CLI: npm install -g nx

1. Start frontend development server:

    nx serve

2. Access the web application at http://localhost:4200.

Project Structure

Apps

Name	Path	Description
frontend	src	The base entrance point of the angular application.

Domains

The nx project is structured into several domain libraries, each responsible for specific functionalities.

Name	Path	Description
common	libs/common	Shared utilities, types, components, and logic used across the frontend (e.g., atomic design components, helper functions, and constants).
incidents	libs/incidents	Frontend logic for displaying incident data of rides.
regions	libs/regions	Displays regional risk data and interacts with APIs/services to fetch and filter rides or incidents by region.
rides	libs/rides	Handles ride-related logic: fetching ride data from the backend and providing ride visualization components to check if mapping process was successful, this functionality is not exposes in a production environment.
streets	libs/streets	Focuses on street-level data: fetching OSM street information, street safety metrics, and providing components to visualize risk assessment on street map as well as a detailed individual street report.

Contacts

Role	Name	Contact
Project Supervisor	David Bermbach	TU Berlin Profile
Developer	David Schmidt	Portfolio • Github

Resources

Resource Type	Description	Link
Project Management	Kanban board tracking development progress and tasks	Simra Project Board
K6s	Performance tests to check the capabilities of the application	k6s
Live Demonstration	Interactive dashboard showcasing real-time cycling safety analytics	Simra Dashboard

(back to top)