|
1 | | -# Simra |
2 | | - |
3 | | -<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> |
4 | | - |
5 | | -✨ Your new, shiny [Nx workspace](https://nx.dev) is almost ready ✨. |
6 | | - |
7 | | -[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! |
8 | | - |
9 | | -## Finish your CI setup |
10 | | - |
11 | | -[Click here to finish setting up your workspace!](https://cloud.nx.app/connect/RGx3BjjnUA) |
12 | | - |
13 | | -## Run tasks |
14 | | - |
15 | | -To run the dev server for your app, use: |
16 | | - |
17 | | -```sh |
18 | | -npx nx serve simra |
19 | | -``` |
20 | | - |
21 | | -To create a production bundle: |
22 | | - |
23 | | -```sh |
24 | | -npx nx build simra |
25 | | -``` |
26 | | - |
27 | | -To see all available targets to run for a project, run: |
28 | | - |
29 | | -```sh |
30 | | -npx nx show project simra |
31 | | -``` |
32 | | - |
33 | | -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. |
34 | | - |
35 | | -[More about running tasks in the docs »](https://nx.dev/features/run-tasks?utm_source=nx_project&utm_medium=readme&utm_campaign=nx_projects) |
36 | | - |
37 | | -## Add new projects |
38 | | - |
39 | | -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. |
40 | | - |
41 | | -Use the plugin's generator to create new projects. |
42 | | - |
43 | | -To generate a new application, use: |
44 | | - |
45 | | -```sh |
46 | | -npx nx g @nx/angular:app demo |
47 | | -``` |
48 | | - |
49 | | -To generate a new library, use: |
50 | | - |
51 | | -```sh |
52 | | -npx nx g @nx/angular:lib mylib |
53 | | -``` |
54 | | - |
55 | | -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. |
56 | | - |
57 | | -[Learn more about Nx plugins »](https://nx.dev/concepts/nx-plugins?utm_source=nx_project&utm_medium=readme&utm_campaign=nx_projects) | [Browse the plugin registry »](https://nx.dev/plugin-registry?utm_source=nx_project&utm_medium=readme&utm_campaign=nx_projects) |
58 | | - |
59 | | -[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) |
60 | | - |
61 | | -## Install Nx Console |
62 | | - |
63 | | -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. |
64 | | - |
65 | | -[Install Nx Console »](https://nx.dev/getting-started/editor-setup?utm_source=nx_project&utm_medium=readme&utm_campaign=nx_projects) |
66 | | - |
67 | | -## Useful links |
68 | | - |
69 | | -Learn more: |
70 | | - |
71 | | -- [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) |
72 | | -- [Learn about Nx on CI](https://nx.dev/ci/intro/ci-with-nx?utm_source=nx_project&utm_medium=readme&utm_campaign=nx_projects) |
73 | | -- [Releasing Packages with Nx release](https://nx.dev/features/manage-releases?utm_source=nx_project&utm_medium=readme&utm_campaign=nx_projects) |
74 | | -- [What are Nx plugins?](https://nx.dev/concepts/nx-plugins?utm_source=nx_project&utm_medium=readme&utm_campaign=nx_projects) |
75 | | - |
76 | | -And join the Nx community: |
77 | | - |
78 | | -- [Discord](https://go.nx.dev/community) |
79 | | -- [Follow us on X](https://twitter.com/nxdevtools) or [LinkedIn](https://www.linkedin.com/company/nrwl) |
80 | | -- [Our Youtube channel](https://www.youtube.com/@nxdevtools) |
81 | | -- [Our blog](https://nx.dev/blog?utm_source=nx_project&utm_medium=readme&utm_campaign=nx_projects) |
| 1 | +# SIMRA Result Viewer Frontend |
| 2 | + |
| 3 | +<!-- TABLE OF CONTENTS --> |
| 4 | +<details> |
| 5 | + <summary>Table of Contents</summary> |
| 6 | + <ol> |
| 7 | + <li><a href="#about-the-project">About The Project</a></li> |
| 8 | + <li> |
| 9 | + <a href="#getting-started">Getting Started</a> |
| 10 | + <ul> |
| 11 | + <li><a href="#prerequisites">Prerequisites</a></li> |
| 12 | + <li><a href="#deploying">Installation</a></li> |
| 13 | + <li><a href="#development">Development</a></li> |
| 14 | + </ul> |
| 15 | + </li> |
| 16 | + <li> |
| 17 | + <a href="#project-structure">Project Structure</a> |
| 18 | + <ul> |
| 19 | + <li><a href="#apps">Apps</a></li> |
| 20 | + <li><a href="#domains">Domains</a></li> |
| 21 | + </ul> |
| 22 | + </li> |
| 23 | + <li><a href="#contact">Contact</a></li> |
| 24 | + <li><a href="#resources">Resources</a></li> |
| 25 | + <li><a href="#additional-tools">Additional Tools</a></li> |
| 26 | + </ol> |
| 27 | +</details> |
| 28 | + |
| 29 | +## About The Project |
| 30 | +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. |
| 31 | + |
| 32 | +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. |
| 33 | + |
| 34 | +# Getting Started |
| 35 | + |
| 36 | +## Prerequisites |
| 37 | +Before you begin, ensure you have the following installed on your local machine: |
| 38 | + |
| 39 | +- Docker: [Install Docker](https://docs.docker.com/get-docker/) |
| 40 | +- Docker Compose: [Install Docker Compose](https://docs.docker.com/compose/install/) |
| 41 | + |
| 42 | +1. Clone the repository: |
| 43 | + ```sh |
| 44 | + git clone https://github.com/simra-project/result-viewer-frontend |
| 45 | + ``` |
| 46 | +2. Start the backend service, check out the [simra backend](https://github.com/simra/result-viewer-backend) for more information. |
| 47 | +3. Edit environment variables in .env use the .env.example as a template. |
| 48 | + |
| 49 | +## Deploying |
| 50 | +To deploy and explore the application, you can use Docker Compose to set up the necessary services. |
| 51 | + |
| 52 | +1. Run the following command to start the services: |
| 53 | + ```sh |
| 54 | + docker compose up |
| 55 | + ``` |
| 56 | + |
| 57 | +2. Access the web application at `http://localhost:25080`. |
| 58 | + |
| 59 | + |
| 60 | +## Development |
| 61 | +To set up the development environment, ensure you have the following installed: |
| 62 | +- Node.js (v16 or later): [Install Node.js](https://nodejs.org/) |
| 63 | +- Nx CLI: `npm install -g nx` |
| 64 | + |
| 65 | +1. Start frontend development server: |
| 66 | + ```shell |
| 67 | + nx serve |
| 68 | + ``` |
| 69 | + |
| 70 | +2. Access the web application at `http://localhost:4200`. |
| 71 | + |
| 72 | +# Project Structure |
| 73 | +## Apps |
| 74 | + |
| 75 | +| Name | Path | Description | |
| 76 | +|------------|------------|-----------------------------------------------------| |
| 77 | +| `frontend` | [src](src) | The base entrance point of the angular application. | |
| 78 | + |
| 79 | +## Domains |
| 80 | + |
| 81 | +The nx project is structured into several domain libraries, each responsible for specific functionalities. |
| 82 | + |
| 83 | +| Name | Path | Description | |
| 84 | +|-------------|----------------------------------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| |
| 85 | +| `common` | [libs/common](libs/common) | Shared utilities, types, components, and logic used across the frontend (e.g., atomic design components, helper functions, and constants). | |
| 86 | +| `incidents` | [libs/incidents](libs/incidents) | Frontend logic for displaying incident data of rides. | |
| 87 | +| `regions` | [libs/regions](libs/regions) | Displays regional risk data and interacts with APIs/services to fetch and filter rides or incidents by region. | |
| 88 | +| `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. | |
| 89 | +| `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. | |
| 90 | + |
| 91 | + |
| 92 | +# Contacts |
| 93 | + |
| 94 | +| Role | Name | Contact | |
| 95 | +|------------------------|--------------------|------------------------------------------------------------------------------------------------------------| |
| 96 | +| **Project Supervisor** | David Bermbach | [TU Berlin Profile](https://www.tu.berlin/3s/ueber-uns/team/prof-dr-ing-david-bermbach) | |
| 97 | +| **Developer** | David Schmidt | [Portfolio](https://david.codinggandalf.com) • [Github](https://github.com/KonsumGandalf) | |
| 98 | + |
| 99 | +# Resources |
| 100 | + |
| 101 | +| Resource Type | Description | Link | |
| 102 | +|-----------------------------|-------------------------------------------------------------------------------|---------------------------------------------------------------------------| |
| 103 | +| **Project Management** | Kanban board tracking development progress and tasks | [Simra Project Board](https://github.com/users/KonsumGandalf/projects/11) | |
| 104 | +| **K6s** | Performance tests to check the capabilities of the application | [k6s](k6s) | |
| 105 | +| **Live Demonstration** | Interactive dashboard showcasing real-time cycling safety analytics | [Simra Dashboard](https://simra.codinggandalf.com) | |
| 106 | + |
| 107 | +<p align="right">(<a href="#top">back to top</a>)</p> |
0 commit comments