doc: Documentation

README.md

@@ -27,7 +27,7 @@ end
   yourApp --> third
 ```
 
-### Network Simulator as proxy
+## Network Simulator as proxy
 
 By using this network simulation application as a proxy,
 you can simulate these conditions without modifying your application or the third-party service.
@@ -48,6 +48,31 @@ networkSim --> third
 style networkSim stroke-width:3px
 ```
 
+## How to use Network Simulator
+
+Lets say you have an application that calls a third-party service at the URL: `https://payment-gateway.com/`.
+The payment gateway has an OpenAPI specification, where you have generated a client for it.
+
+It has an operation to list accounts on: `GET /v1/accounts`.
+
+You therefore have set a `baseURL` for you client to `https://payment-gateway.com` and the client can then call the operation with the full URL: `https://payment-gateway.com/v1/accounts`.
+
+### URL Structure for calling through Network Simulator
+
+To use the Network Simulator, you first need to define a target system in the Network Simulator UI.
+You can name it `payment-gateway` and set the target URL to `https://payment-gateway.com`.
+
+You must then change the `baseURL` of your client to point to the Network Simulator instead.
+
+Assuming the Network Simulator is running locally on port `9898`, you would set the `baseURL` to `http://localhost:9898/forward/payment-gateway`.
+
+So, by setting your client's `baseURL` to `http://localhost:9898/forward/payment-gateway`, all requests to the payment gateway will now go through the Network Simulator.
+You can then configure different network and the operation `GET /v1/accounts` will be called as `http://localhost:9898/forward/payment-gateway/v1/accounts`.
+
+The URL structure is as follows:
+
+![URL Structure](images/url-explanation.png)
+
 # Building and Running
 
 ## Prerequisites
@@ -201,7 +226,7 @@ Read more about the backend and how it works [here](backend)
 - **Communication**: RESTful APIs for backend interaction
 - **Dashboard**: Provides user interface for scenario management
 
-Read more about the frontend and how it works [here](backend)
+Read more about the frontend and how it works [here](frontend)
 
 # Bruno
 

backend/README.md

@@ -108,6 +108,7 @@ target_systems {
     BIGINT timeoutMs
     BOOL followRedirects
 }
+    target_systems ||--o{ scenarios : ""
 scenarios {
     INT id PK
     BOOL enable_scenario
@@ -119,6 +120,7 @@ scenarios {
     TEXT response_body
     BIGINT timeout_ms
     BOOL follow_redirects
+    INT target_system_id FK
 }
     scenarios ||--o{ scenario_headers : ""
 scenario_headers {

backend/documentation-db.yml

@@ -69,6 +69,14 @@ tables:
         dataType: bool
         nullable: true
         comment: Whether to follow HTTP redirects for this scenario.
+      - name: target_system_id
+        dataType: int
+        nullable: true
+        foreignKey:
+          enforceReference: true
+          tableName: target_systems
+          columnName: id
+        comment: Identifier of the associated target system.
   - name: scenario_headers
     fields:
       - name: id

frontend/README.md

@@ -1,6 +1,6 @@
 # Network Simulator - Frontend
 
-This project was generated using [Angular CLI](https://github.com/angular/angular-cli) version 21.0.2.
+This project was generated using [Angular CLI](https://github.com/angular/angular-cli) version 21.
 
 ## Prerequisites
 
@@ -38,16 +38,6 @@ To execute unit tests with the [Vitest](https://vitest.dev/) test runner, use th
 ng test
 ```
 
-## Running end-to-end tests
-
-For end-to-end (e2e) testing, run:
-
-```bash
-ng e2e
-```
-
-Angular CLI does not come with an end-to-end testing framework by default. You can choose one that suits your needs.
-
 ## Additional Resources
 
 For more information on using the Angular CLI, including detailed command references, visit the [Angular CLI Overview and Command Reference](https://angular.dev/tools/cli) page.