Skip to content

Docs: Update ReadMe #40

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
KonsumGandalf merged 4 commits into from
Aug 25, 2025
Merged

Docs: Update ReadMe #40

Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
f12a8a1
feat: Final push
KonsumGandalf Aug 25, 2025
85d2f99
docs: README.md
KonsumGandalf Aug 25, 2025
9b17940
docs: README.md
KonsumGandalf Aug 25, 2025
e15fa09
docs: README.md
KonsumGandalf Aug 25, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
188 changes: 107 additions & 81 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,81 +1,107 @@
# Simra

<a alt="Nx logo" href="https://nx.dev" target="_blank" rel="noreferrer"><img src="https://raw.githubusercontent.com/nrwl/nx/master/images/nx-logo.png" width="45"></a>

✨ Your new, shiny [Nx workspace](https://nx.dev) is almost ready ✨.

[Learn more about this workspace setup and its capabilities](https://nx.dev/getting-started/tutorials/angular-standalone-tutorial?utm_source=nx_project&utm_medium=readme&utm_campaign=nx_projects) or run `npx nx graph` to visually explore what was created. Now, let's get you up to speed!

## Finish your CI setup

[Click here to finish setting up your workspace!](https://cloud.nx.app/connect/RGx3BjjnUA)

## Run tasks

To run the dev server for your app, use:

```sh
npx nx serve simra
```

To create a production bundle:

```sh
npx nx build simra
```

To see all available targets to run for a project, run:

```sh
npx nx show project simra
```

These targets are either [inferred automatically](https://nx.dev/concepts/inferred-tasks?utm_source=nx_project&utm_medium=readme&utm_campaign=nx_projects) or defined in the `project.json` or `package.json` files.

[More about running tasks in the docs &raquo;](https://nx.dev/features/run-tasks?utm_source=nx_project&utm_medium=readme&utm_campaign=nx_projects)

## Add new projects

While you could add new projects to your workspace manually, you might want to leverage [Nx plugins](https://nx.dev/concepts/nx-plugins?utm_source=nx_project&utm_medium=readme&utm_campaign=nx_projects) and their [code generation](https://nx.dev/features/generate-code?utm_source=nx_project&utm_medium=readme&utm_campaign=nx_projects) feature.

Use the plugin's generator to create new projects.

To generate a new application, use:

```sh
npx nx g @nx/angular:app demo
```

To generate a new library, use:

```sh
npx nx g @nx/angular:lib mylib
```

You can use `npx nx list` to get a list of installed plugins. Then, run `npx nx list <plugin-name>` to learn about more specific capabilities of a particular plugin. Alternatively, [install Nx Console](https://nx.dev/getting-started/editor-setup?utm_source=nx_project&utm_medium=readme&utm_campaign=nx_projects) to browse plugins and generators in your IDE.

[Learn more about Nx plugins &raquo;](https://nx.dev/concepts/nx-plugins?utm_source=nx_project&utm_medium=readme&utm_campaign=nx_projects) | [Browse the plugin registry &raquo;](https://nx.dev/plugin-registry?utm_source=nx_project&utm_medium=readme&utm_campaign=nx_projects)

[Learn more about Nx on CI](https://nx.dev/ci/intro/ci-with-nx#ready-get-started-with-your-provider?utm_source=nx_project&utm_medium=readme&utm_campaign=nx_projects)

## Install Nx Console

Nx Console is an editor extension that enriches your developer experience. It lets you run tasks, generate code, and improves code autocompletion in your IDE. It is available for VSCode and IntelliJ.

[Install Nx Console &raquo;](https://nx.dev/getting-started/editor-setup?utm_source=nx_project&utm_medium=readme&utm_campaign=nx_projects)

## Useful links

Learn more:

- [Learn more about this workspace setup](https://nx.dev/getting-started/tutorials/angular-standalone-tutorial?utm_source=nx_project&utm_medium=readme&utm_campaign=nx_projects)
- [Learn about Nx on CI](https://nx.dev/ci/intro/ci-with-nx?utm_source=nx_project&utm_medium=readme&utm_campaign=nx_projects)
- [Releasing Packages with Nx release](https://nx.dev/features/manage-releases?utm_source=nx_project&utm_medium=readme&utm_campaign=nx_projects)
- [What are Nx plugins?](https://nx.dev/concepts/nx-plugins?utm_source=nx_project&utm_medium=readme&utm_campaign=nx_projects)

And join the Nx community:

- [Discord](https://go.nx.dev/community)
- [Follow us on X](https://twitter.com/nxdevtools) or [LinkedIn](https://www.linkedin.com/company/nrwl)
- [Our Youtube channel](https://www.youtube.com/@nxdevtools)
- [Our blog](https://nx.dev/blog?utm_source=nx_project&utm_medium=readme&utm_campaign=nx_projects)
# SIMRA Result Viewer Frontend

<!-- TABLE OF CONTENTS -->
<details>
<summary>Table of Contents</summary>
<ol>
<li><a href="#about-the-project">About The Project</a></li>
<li>
<a href="#getting-started">Getting Started</a>
<ul>
<li><a href="#prerequisites">Prerequisites</a></li>
<li><a href="#deploying">Installation</a></li>
<li><a href="#development">Development</a></li>
</ul>
</li>
<li>
<a href="#project-structure">Project Structure</a>
<ul>
<li><a href="#apps">Apps</a></li>
<li><a href="#domains">Domains</a></li>
</ul>
</li>
<li><a href="#contact">Contact</a></li>
<li><a href="#resources">Resources</a></li>
<li><a href="#additional-tools">Additional Tools</a></li>
</ol>
</details>

## 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](https://github.com/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](https://docs.docker.com/get-docker/)
- Docker Compose: [Install Docker Compose](https://docs.docker.com/compose/install/)

1. Clone the repository:
```sh
git clone https://github.com/simra-project/result-viewer-frontend
```
2. Start the backend service, check out the [simra backend](https://github.com/simra/result-viewer-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:
```sh
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](https://nodejs.org/)
- Nx CLI: `npm install -g nx`

1. Start frontend development server:
```shell
nx serve
```

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

# Project Structure
## Apps

| Name | Path | Description |
|------------|------------|-----------------------------------------------------|
| `frontend` | [src](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](libs/common) | Shared utilities, types, components, and logic used across the frontend (e.g., atomic design components, helper functions, and constants). |
| `incidents` | [libs/incidents](libs/incidents) | Frontend logic for displaying incident data of rides. |
| `regions` | [libs/regions](libs/regions) | Displays regional risk data and interacts with APIs/services to fetch and filter rides or incidents by region. |
| `rides` | [libs/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](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](https://www.tu.berlin/3s/ueber-uns/team/prof-dr-ing-david-bermbach) |
| **Developer** | David Schmidt | [Portfolio](https://david.codinggandalf.com) • [Github](https://github.com/KonsumGandalf) |

# Resources

| Resource Type | Description | Link |
|-----------------------------|-------------------------------------------------------------------------------|---------------------------------------------------------------------------|
| **Project Management** | Kanban board tracking development progress and tasks | [Simra Project Board](https://github.com/users/KonsumGandalf/projects/11) |
| **K6s** | Performance tests to check the capabilities of the application | [k6s](k6s) |
| **Live Demonstration** | Interactive dashboard showcasing real-time cycling safety analytics | [Simra Dashboard](https://simra.codinggandalf.com) |

<p align="right">(<a href="#top">back to top</a>)</p>
Loading