# mosh-hamedani/react-course-part1 architecture

> Architecture diagram of the GitHub repository mosh-hamedani/react-course-part1, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-09-26). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/mosh-hamedani/react-course-part1
- Repository: https://github.com/mosh-hamedani/react-course-part1

## Overview

This is a React and TypeScript course-example repository, not a single integrated business product. The active application workflow renders a user list, loads users through a cancellable hook, and supports optimistic create, update, and delete operations through an HTTP client. Separate source areas demonstrate reusable UI, validated forms, and expense-tracker components. The README documents broader course topics, but sampled source and the tree do not establish wiring for every example or deployment workflow.

Main entry points: [`src/components/UserList.tsx`](https://github.com/mosh-hamedani/react-course-part1/blob/main/src/components/UserList.tsx) (User list), [`src/services/user-service.ts`](https://github.com/mosh-hamedani/react-course-part1/blob/main/src/services/user-service.ts) (User service), [`src/main.tsx`](https://github.com/mosh-hamedani/react-course-part1/blob/main/src/main.tsx) (React entry), [`src/App.tsx`](https://github.com/mosh-hamedani/react-course-part1/blob/main/src/App.tsx) (App)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_application["Active application"]
  node_entry["React entry<br/>[main.tsx]"]
  node_app["App<br/>[App.tsx]"]
  node_user_list["User list<br/>[UserList.tsx]"]
end

subgraph group_user_api["User API"]
  node_user_hook["User hook<br/>[useUsers.ts]"]
  node_user_service["User service<br/>[user-service.ts]"]
  node_http_service["HTTP service<br/>[http-service.ts]"]
  node_api_client["API client<br/>[api-client.ts]"]
end

subgraph group_ui_examples["UI examples"]
  node_list_group["Selectable list<br/>[ListGroup.tsx]"]
  node_button["Styled button<br/>[Button.tsx]"]
  node_form_example["Validated form<br/>[Form.tsx]"]
end

subgraph group_expenses["Expense tracker"]
  node_expense_form["Expense form<br/>[ExpenseForm.tsx]"]
  node_expense_categories["Expense categories<br/>[categories.ts]"]
  node_expense_filter["Expense filter<br/>[ExpenseFilter.tsx]"]
  node_expense_list["Expense list<br/>[ExpenseList.tsx]"]
end

node_browser(("Browser user"))
node_jsonplaceholder{{"JSONPlaceholder API"}}

node_browser -->|"opens app"| node_entry
node_entry -->|"renders"| node_app
node_app -->|"renders"| node_user_list
node_user_list -->|"uses state"| node_user_hook
node_user_hook -->|"loads users"| node_user_service
node_user_list -->|"mutates users"| node_user_service
node_user_service -->|"creates service"| node_http_service
node_http_service -->|"sends requests"| node_api_client
node_api_client -->|"HTTP calls"| node_jsonplaceholder
node_expense_form -->|"uses options"| node_expense_categories

click node_entry "https://github.com/mosh-hamedani/react-course-part1/blob/main/src/main.tsx"
click node_app "https://github.com/mosh-hamedani/react-course-part1/blob/main/src/App.tsx"
click node_user_list "https://github.com/mosh-hamedani/react-course-part1/blob/main/src/components/UserList.tsx"
click node_user_hook "https://github.com/mosh-hamedani/react-course-part1/blob/main/src/hooks/useUsers.ts"
click node_user_service "https://github.com/mosh-hamedani/react-course-part1/blob/main/src/services/user-service.ts"
click node_http_service "https://github.com/mosh-hamedani/react-course-part1/blob/main/src/services/http-service.ts"
click node_api_client "https://github.com/mosh-hamedani/react-course-part1/blob/main/src/services/api-client.ts"
click node_list_group "https://github.com/mosh-hamedani/react-course-part1/blob/main/src/components/ListGroup/ListGroup.tsx"
click node_button "https://github.com/mosh-hamedani/react-course-part1/blob/main/src/components/Button/Button.tsx"
click node_form_example "https://github.com/mosh-hamedani/react-course-part1/blob/main/src/components/Form.tsx"
click node_expense_form "https://github.com/mosh-hamedani/react-course-part1/blob/main/src/expense-tracker/components/ExpenseForm.tsx"
click node_expense_categories "https://github.com/mosh-hamedani/react-course-part1/blob/main/src/expense-tracker/categories.ts"
click node_expense_filter "https://github.com/mosh-hamedani/react-course-part1/blob/main/src/expense-tracker/components/ExpenseFilter.tsx"
click node_expense_list "https://github.com/mosh-hamedani/react-course-part1/blob/main/src/expense-tracker/components/ExpenseList.tsx"

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_entry,node_app,node_user_list,node_browser toneBlue
class node_user_hook,node_user_service,node_http_service,node_api_client toneAmber
class node_list_group,node_button,node_form_example,node_jsonplaceholder toneMint
class node_expense_form,node_expense_categories,node_expense_filter,node_expense_list toneRose
```

## Components

### Active application

- [React entry](https://github.com/mosh-hamedani/react-course-part1/blob/main/src/main.tsx): `src/main.tsx`
- [App](https://github.com/mosh-hamedani/react-course-part1/blob/main/src/App.tsx): `src/App.tsx`
- [User list](https://github.com/mosh-hamedani/react-course-part1/blob/main/src/components/UserList.tsx): `src/components/UserList.tsx`

### User API

- [User hook](https://github.com/mosh-hamedani/react-course-part1/blob/main/src/hooks/useUsers.ts): `src/hooks/useUsers.ts`
- [User service](https://github.com/mosh-hamedani/react-course-part1/blob/main/src/services/user-service.ts): `src/services/user-service.ts`
- [HTTP service](https://github.com/mosh-hamedani/react-course-part1/blob/main/src/services/http-service.ts): `src/services/http-service.ts`
- [API client](https://github.com/mosh-hamedani/react-course-part1/blob/main/src/services/api-client.ts): `src/services/api-client.ts`

### UI examples

- [Selectable list](https://github.com/mosh-hamedani/react-course-part1/blob/main/src/components/ListGroup/ListGroup.tsx): `src/components/ListGroup/ListGroup.tsx`
- [Styled button](https://github.com/mosh-hamedani/react-course-part1/blob/main/src/components/Button/Button.tsx): `src/components/Button/Button.tsx`
- [Validated form](https://github.com/mosh-hamedani/react-course-part1/blob/main/src/components/Form.tsx): `src/components/Form.tsx`

### Expense tracker

- [Expense form](https://github.com/mosh-hamedani/react-course-part1/blob/main/src/expense-tracker/components/ExpenseForm.tsx): `src/expense-tracker/components/ExpenseForm.tsx`
- [Expense categories](https://github.com/mosh-hamedani/react-course-part1/blob/main/src/expense-tracker/categories.ts): `src/expense-tracker/categories.ts`
- [Expense filter](https://github.com/mosh-hamedani/react-course-part1/blob/main/src/expense-tracker/components/ExpenseFilter.tsx): `src/expense-tracker/components/ExpenseFilter.tsx`
- [Expense list](https://github.com/mosh-hamedani/react-course-part1/blob/main/src/expense-tracker/components/ExpenseList.tsx): `src/expense-tracker/components/ExpenseList.tsx`

### Other components

- **Browser user**
- **JSONPlaceholder API**

## Connections

- Browser user → React entry: opens app
- React entry → App: renders
- App → User list: renders
- User list → User hook: uses state
- User hook → User service: loads users
- User list → User service: mutates users
- User service → HTTP service: creates service
- HTTP service → API client: sends requests
- API client → JSONPlaceholder API: HTTP calls
- Expense form → Expense categories: uses options