# sam-raiden/react-dotnet-example architecture

> Architecture diagram of the GitHub repository sam-raiden/react-dotnet-example, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-07-31). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/sam-raiden/react-dotnet-example
- Repository: https://github.com/sam-raiden/react-dotnet-example

## Overview

#### Purpose and Entry Points
This is a React + ASP.NET Core example application centered on user management. The backend starts through `Program.cs`, configures HTTP services and middleware in `Startup.cs`, and exposes a user API via `Controllers/UsersController.cs`. The browser application enters through `ClientApp/src/index.js` and renders `ClientApp/src/App.js`.

#### ASP.NET Core Host and API Boundary
The .NET project (`react-dotnet-example.csproj`) hosts the API and likely serves or coordinates the React build. `Startup.cs` is the architectural boundary for dependency injection, routing, CORS/static-file behavior, and SPA integration. `Controllers/UsersController.cs` defines the HTTP-facing contract consumed by the client.

#### User Domain and Persistence Abstraction
The domain is deliberately small: `Models/User.cs` represents user data, while `Models/IUserRepository.cs` separates API/controller logic from storage implementation. `Models/UserRepository.cs` supplies the concrete repository, making it the replacement point for a database-backed implementation without changing controller consumers.

#### Client Application and UI Stages
React owns the interactive user workflow. `ClientApp/src/App.js` composes the application shell; `ClientApp/src/components/Header.js` provides page-level navigation/header UI. User creation and presentation are split into `ClientApp/src/components/CreateUser.js`, `ClientApp/src/components/Users.js`, and `ClientApp/src/components/DisplayBoard.js`, allowing input, retrieval, and display responsibilities to remain distinct.

#### Client-to-API Data Flow
UI components call `ClientApp/src/services/UserService.js`, which is the frontend transport boundary for the backend user endpoints. The expected flow is: create/list action in a React component → `UserService` HTTP request → `UsersController` → `IUserRepository`/`UserRepository` → user data returned to React for board/list rendering. This service layer is the primary place to change endpoint URLs, request formats, authentication headers, or error handling.

#### Runtime and Delivery
The application requires a .NET Core/ASP.NET Core runtime and Node/npm tooling for the React client, indicated by `react-dotnet-example.csproj` and `ClientApp/package.json`. `Dockerfile` defines container packaging. Kubernetes deployment resources in `kube/deployment.yml`, `kube/service.yml`, and `kube/manifest.yml` provide the operational boundary for running the container behind a cluster Service.

#### Configuration and Environment Boundaries
Server configuration is sourced from `appsettings.json` and environment-specific overrides in `appsettings.Development.json`. The client has its own environment file at `ClientApp/.env`. These are separate configuration scopes: server settings affect ASP.NET hosting/services, while client settings are embedded or applied during the React build/runtime process.

Main entry points: [`ClientApp/src/App.js`](https://github.com/sam-raiden/react-dotnet-example/blob/main/ClientApp/src/App.js) (App shell), [`Startup.cs`](https://github.com/sam-raiden/react-dotnet-example/blob/main/Startup.cs) (Startup), [`ClientApp/src/services/UserService.js`](https://github.com/sam-raiden/react-dotnet-example/blob/main/ClientApp/src/services/UserService.js) (User service), [`ClientApp/src/components/Users.js`](https://github.com/sam-raiden/react-dotnet-example/blob/main/ClientApp/src/components/Users.js) (Users)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_server["ASP.NET Core Server"]
  node_project[".NET project"]
  node_program["Program<br/>entry point<br/>[Program.cs]"]
  node_startup["Startup<br/>host configuration<br/>[Startup.cs]"]
  node_controller["Users API<br/>HTTP controller<br/>[UsersController.cs]"]
  node_user["User<br/>domain model<br/>[User.cs]"]
  node_repository_contract["User repository contract<br/>repository interface<br/>[IUserRepository.cs]"]
  node_repository[("User repository<br/>repository implementation<br/>[UserRepository.cs]")]
  node_server_config["Server configuration<br/>[appsettings.json]"]
end

subgraph group_client["React Client"]
  node_client_package["Client package<br/>Node project<br/>[package.json]"]
  node_client_entry["React entry<br/>browser entry point<br/>[index.js]"]
  node_app["App shell<br/>React composition<br/>[App.js]"]
  node_header["Header<br/>React component<br/>[Header.js]"]
  node_create_user["Create user<br/>React component<br/>[CreateUser.js]"]
  node_users["Users<br/>React component<br/>[Users.js]"]
  node_display_board["Display board<br/>React component<br/>[DisplayBoard.js]"]
  node_user_service["User service<br/>frontend transport<br/>[UserService.js]"]
  node_client_env["Client environment<br/>configuration<br/>[.env]"]
end

subgraph group_delivery["Container &amp; Kubernetes"]
  node_docker{{"Container image<br/>container packaging"}}
  node_deployment{{"Kubernetes deployment<br/>cluster workload<br/>[deployment.yml]"}}
  node_service{{"Kubernetes service<br/>cluster network boundary<br/>[service.yml]"}}
  node_manifest["Kubernetes manifest<br/>cluster resources<br/>[manifest.yml]"]
end

node_project -->|"builds"| node_program
node_program -->|"starts"| node_startup
node_startup -->|"routes to"| node_controller
node_startup -->|"registers"| node_repository_contract
node_server_config -.->|"configures"| node_startup
node_controller -->|"depends on"| node_repository_contract
node_repository_contract -->|"implemented by"| node_repository
node_repository -->|"stores"| node_user
node_client_package -->|"builds"| node_client_entry
node_client_entry -->|"renders"| node_app
node_app -->|"composes"| node_header
node_app -->|"composes"| node_create_user
node_app -->|"composes"| node_users
node_users -->|"renders"| node_display_board
node_create_user -->|"creates via"| node_user_service
node_users -->|"lists via"| node_user_service
node_client_env -.->|"configures"| node_user_service
node_user_service -->|"HTTP user requests"| node_controller
node_docker -->|"packages"| node_project
node_deployment -->|"runs image"| node_docker
node_service -->|"exposes"| node_deployment
node_manifest -.->|"includes"| node_deployment
node_manifest -.->|"includes"| node_service

click node_project "https://github.com/sam-raiden/react-dotnet-example/blob/main/react-dotnet-example.csproj"
click node_program "https://github.com/sam-raiden/react-dotnet-example/blob/main/Program.cs"
click node_startup "https://github.com/sam-raiden/react-dotnet-example/blob/main/Startup.cs"
click node_controller "https://github.com/sam-raiden/react-dotnet-example/blob/main/Controllers/UsersController.cs"
click node_user "https://github.com/sam-raiden/react-dotnet-example/blob/main/Models/User.cs"
click node_repository_contract "https://github.com/sam-raiden/react-dotnet-example/blob/main/Models/IUserRepository.cs"
click node_repository "https://github.com/sam-raiden/react-dotnet-example/blob/main/Models/UserRepository.cs"
click node_server_config "https://github.com/sam-raiden/react-dotnet-example/blob/main/appsettings.json"
click node_client_package "https://github.com/sam-raiden/react-dotnet-example/blob/main/ClientApp/package.json"
click node_client_entry "https://github.com/sam-raiden/react-dotnet-example/blob/main/ClientApp/src/index.js"
click node_app "https://github.com/sam-raiden/react-dotnet-example/blob/main/ClientApp/src/App.js"
click node_header "https://github.com/sam-raiden/react-dotnet-example/blob/main/ClientApp/src/components/Header.js"
click node_create_user "https://github.com/sam-raiden/react-dotnet-example/blob/main/ClientApp/src/components/CreateUser.js"
click node_users "https://github.com/sam-raiden/react-dotnet-example/blob/main/ClientApp/src/components/Users.js"
click node_display_board "https://github.com/sam-raiden/react-dotnet-example/blob/main/ClientApp/src/components/DisplayBoard.js"
click node_user_service "https://github.com/sam-raiden/react-dotnet-example/blob/main/ClientApp/src/services/UserService.js"
click node_client_env "https://github.com/sam-raiden/react-dotnet-example/blob/main/ClientApp/.env"
click node_docker "https://github.com/sam-raiden/react-dotnet-example/blob/main/Dockerfile"
click node_deployment "https://github.com/sam-raiden/react-dotnet-example/blob/main/kube/deployment.yml"
click node_service "https://github.com/sam-raiden/react-dotnet-example/blob/main/kube/service.yml"
click node_manifest "https://github.com/sam-raiden/react-dotnet-example/blob/main/kube/manifest.yml"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_project,node_program,node_startup,node_controller,node_user,node_repository_contract,node_repository,node_server_config toneBlue
class node_client_package,node_client_entry,node_app,node_header,node_create_user,node_users,node_display_board,node_user_service,node_client_env toneAmber
class node_docker,node_deployment,node_service,node_manifest toneMint
```

## Components

### ASP.NET Core Server

- [.NET project](https://github.com/sam-raiden/react-dotnet-example/blob/main/react-dotnet-example.csproj): project · Hosts the API and coordinates the client application. · `react-dotnet-example.csproj`
- [Program](https://github.com/sam-raiden/react-dotnet-example/blob/main/Program.cs): entry point · `Program.cs`
- [Startup](https://github.com/sam-raiden/react-dotnet-example/blob/main/Startup.cs): host configuration · Configures DI, middleware, routing, and SPA behavior. · `Startup.cs`
- [Users API](https://github.com/sam-raiden/react-dotnet-example/blob/main/Controllers/UsersController.cs): HTTP controller · User endpoint contract consumed by React. · `Controllers/UsersController.cs`
- [User](https://github.com/sam-raiden/react-dotnet-example/blob/main/Models/User.cs): domain model · `Models/User.cs`
- [User repository contract](https://github.com/sam-raiden/react-dotnet-example/blob/main/Models/IUserRepository.cs): repository interface · `Models/IUserRepository.cs`
- [User repository](https://github.com/sam-raiden/react-dotnet-example/blob/main/Models/UserRepository.cs): repository implementation · Storage replacement point for the user domain. · `Models/UserRepository.cs`
- [Server configuration](https://github.com/sam-raiden/react-dotnet-example/blob/main/appsettings.json): configuration · Base and development ASP.NET settings. · `appsettings.json`

### React Client

- [Client package](https://github.com/sam-raiden/react-dotnet-example/blob/main/ClientApp/package.json): Node project · Node/npm tooling and client dependencies. · `ClientApp/package.json`
- [React entry](https://github.com/sam-raiden/react-dotnet-example/blob/main/ClientApp/src/index.js): browser entry point · `ClientApp/src/index.js`
- [App shell](https://github.com/sam-raiden/react-dotnet-example/blob/main/ClientApp/src/App.js): React composition · `ClientApp/src/App.js`
- [Header](https://github.com/sam-raiden/react-dotnet-example/blob/main/ClientApp/src/components/Header.js): React component · `ClientApp/src/components/Header.js`
- [Create user](https://github.com/sam-raiden/react-dotnet-example/blob/main/ClientApp/src/components/CreateUser.js): React component · Collects user creation input. · `ClientApp/src/components/CreateUser.js`
- [Users](https://github.com/sam-raiden/react-dotnet-example/blob/main/ClientApp/src/components/Users.js): React component · Retrieves and presents user data. · `ClientApp/src/components/Users.js`
- [Display board](https://github.com/sam-raiden/react-dotnet-example/blob/main/ClientApp/src/components/DisplayBoard.js): React component · Renders user results. · `ClientApp/src/components/DisplayBoard.js`
- [User service](https://github.com/sam-raiden/react-dotnet-example/blob/main/ClientApp/src/services/UserService.js): frontend transport · Centralizes HTTP requests and API concerns. · `ClientApp/src/services/UserService.js`
- [Client environment](https://github.com/sam-raiden/react-dotnet-example/blob/main/ClientApp/.env): configuration · Client build/runtime environment scope. · `ClientApp/.env`

### Container & Kubernetes

- [Container image](https://github.com/sam-raiden/react-dotnet-example/blob/main/Dockerfile): container packaging · `Dockerfile`
- [Kubernetes deployment](https://github.com/sam-raiden/react-dotnet-example/blob/main/kube/deployment.yml): cluster workload · `kube/deployment.yml`
- [Kubernetes service](https://github.com/sam-raiden/react-dotnet-example/blob/main/kube/service.yml): cluster network boundary · `kube/service.yml`
- [Kubernetes manifest](https://github.com/sam-raiden/react-dotnet-example/blob/main/kube/manifest.yml): cluster resources · `kube/manifest.yml`

## Connections

- .NET project → Program: builds
- Program → Startup: starts
- Startup → Users API: routes to
- Startup → User repository contract: registers
- Server configuration → Startup: configures
- Users API → User repository contract: depends on
- User repository contract → User repository: implemented by
- User repository → User: stores
- Client package → React entry: builds
- React entry → App shell: renders
- App shell → Header: composes
- App shell → Create user: composes
- App shell → Users: composes
- Users → Display board: renders
- Create user → User service: creates via
- Users → User service: lists via
- Client environment → User service: configures
- User service → Users API: HTTP user requests
- Container image → .NET project: packages
- Kubernetes deployment → Container image: runs image
- Kubernetes service → Kubernetes deployment: exposes
- Kubernetes manifest → Kubernetes deployment: includes
- Kubernetes manifest → Kubernetes service: includes