# aidar-baiseitov/presight-execise architecture

> Architecture diagram of the GitHub repository aidar-baiseitov/presight-execise, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-09-25). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/aidar-baiseitov/presight-execise
- Repository: https://github.com/aidar-baiseitov/presight-execise

## Overview

User Directory is a searchable, filterable directory with a React client, Express API, and SQLite source of truth. A user’s query, selected filters, and sort are reflected in the URL; the client fetches paginated users and facets separately, then displays virtualized results. On the server, API routes validate requests and delegate list and facet queries to shared filtering logic over the database. The README documents health reporting and initial seeding as well. The graph follows the supplied source excerpts; wiring for unsampled UI and database modules is included only where documented or directly supported.

Main entry points: [`client/src/App.tsx`](https://github.com/aidar-baiseitov/presight-execise/blob/main/client/src/App.tsx) (Directory app), [`server/src/routes/api.ts`](https://github.com/aidar-baiseitov/presight-execise/blob/main/server/src/routes/api.ts) (API routes), [`server/src/db/connection.ts`](https://github.com/aidar-baiseitov/presight-execise/blob/main/server/src/db/connection.ts) (Database connection), [`server/src/index.ts`](https://github.com/aidar-baiseitov/presight-execise/blob/main/server/src/index.ts) (Server startup)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_client_ui["Directory interface"]
  node_app["Directory app<br/>[App.tsx]"]
  node_search["Search input<br/>[SearchBar.tsx]"]
  node_filters["Filter controls<br/>[FilterSidebar.tsx]"]
  node_sort["Sort controls<br/>[SortControls.tsx]"]
  node_active_filters["Active filters<br/>[ActiveFilters.tsx]"]
  node_user_list["Virtual user list<br/>[UserList.tsx]"]
end

subgraph group_client_data["Client state and data"]
  node_url_state["URL view state"]
  node_query_hooks["Directory queries"]
  node_api_client["API client<br/>[client.ts]"]
  node_api_types["Directory types<br/>[types.ts]"]
end

subgraph group_api["API and queries"]
  node_express_app["Express app<br/>[app.ts]"]
  node_api_routes["API routes<br/>[api.ts]"]
  node_validation["Query validation<br/>[validation.ts]"]
  node_user_queries["User and facet queries<br/>[userQuery.ts]"]
  node_server_types["API response types<br/>[types.ts]"]
end

subgraph group_storage["SQLite and data"]
  node_server_start["Server startup<br/>[index.ts]"]
  node_seed["Dataset seeding<br/>[seed.ts]"]
  node_db_connection["Database connection<br/>[connection.ts]"]
  node_schema["Relational schema<br/>[schema.ts]"]
end

node_visitor(("Directory user"))
node_sqlite[("SQLite database")]
node_dicebear["Dicebear avatars"]

node_visitor -->|"uses"| node_app
node_app -->|"renders"| node_search
node_app -->|"renders"| node_filters
node_app -->|"renders"| node_sort
node_app -->|"renders"| node_active_filters
node_app -->|"renders"| node_user_list
node_app -->|"reads and updates"| node_url_state
node_app -->|"loads data"| node_query_hooks
node_search -->|"emits query"| node_app
node_filters -->|"emits selections"| node_app
node_sort -->|"emits sort"| node_app
node_active_filters -->|"emits selections"| node_app
node_user_list -->|"emits hobby selection"| node_app
node_query_hooks -->|"requests data"| node_api_client
node_api_client -->|"uses contracts"| node_api_types
node_api_client -->|"HTTP requests"| node_express_app
node_express_app -->|"mounts API"| node_api_routes
node_api_routes -->|"parses parameters"| node_validation
node_api_routes -->|"dispatches list and facets"| node_user_queries
node_api_routes -->|"counts health users"| node_db_connection
node_user_queries -->|"queries and counts"| node_sqlite
node_user_queries -->|"returns typed results"| node_server_types
node_server_start -->|"opens database"| node_db_connection
node_server_start -->|"seeds if needed"| node_seed
node_server_start -->|"starts server"| node_express_app
node_db_connection -->|"opens and reads"| node_sqlite
node_db_connection -->|"initializes schema"| node_schema
node_seed -->|"writes dataset"| node_sqlite
node_seed -.->|"generates avatar URLs"| node_dicebear

click node_app "https://github.com/aidar-baiseitov/presight-execise/blob/main/client/src/App.tsx"
click node_search "https://github.com/aidar-baiseitov/presight-execise/blob/main/client/src/components/SearchBar.tsx"
click node_filters "https://github.com/aidar-baiseitov/presight-execise/blob/main/client/src/components/FilterSidebar.tsx"
click node_sort "https://github.com/aidar-baiseitov/presight-execise/blob/main/client/src/components/SortControls.tsx"
click node_active_filters "https://github.com/aidar-baiseitov/presight-execise/blob/main/client/src/components/ActiveFilters.tsx"
click node_user_list "https://github.com/aidar-baiseitov/presight-execise/blob/main/client/src/components/UserList.tsx"
click node_url_state "https://github.com/aidar-baiseitov/presight-execise/blob/main/client/src/hooks/useDirectoryParams.ts"
click node_query_hooks "https://github.com/aidar-baiseitov/presight-execise/blob/main/client/src/hooks/useDirectoryData.ts"
click node_api_client "https://github.com/aidar-baiseitov/presight-execise/blob/main/client/src/api/client.ts"
click node_api_types "https://github.com/aidar-baiseitov/presight-execise/blob/main/client/src/api/types.ts"
click node_express_app "https://github.com/aidar-baiseitov/presight-execise/blob/main/server/src/app.ts"
click node_api_routes "https://github.com/aidar-baiseitov/presight-execise/blob/main/server/src/routes/api.ts"
click node_validation "https://github.com/aidar-baiseitov/presight-execise/blob/main/server/src/validation.ts"
click node_user_queries "https://github.com/aidar-baiseitov/presight-execise/blob/main/server/src/services/userQuery.ts"
click node_server_types "https://github.com/aidar-baiseitov/presight-execise/blob/main/server/src/types.ts"
click node_server_start "https://github.com/aidar-baiseitov/presight-execise/blob/main/server/src/index.ts"
click node_seed "https://github.com/aidar-baiseitov/presight-execise/blob/main/server/src/db/seed.ts"
click node_db_connection "https://github.com/aidar-baiseitov/presight-execise/blob/main/server/src/db/connection.ts"
click node_schema "https://github.com/aidar-baiseitov/presight-execise/blob/main/server/src/db/schema.ts"

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_app,node_search,node_filters,node_sort,node_active_filters,node_user_list,node_visitor toneBlue
class node_url_state,node_query_hooks,node_api_client,node_api_types,node_sqlite toneAmber
class node_express_app,node_api_routes,node_validation,node_user_queries,node_server_types toneMint
class node_server_start,node_seed,node_db_connection,node_schema toneRose
class node_dicebear toneIndigo
```

## Components

### Directory interface

- [Directory app](https://github.com/aidar-baiseitov/presight-execise/blob/main/client/src/App.tsx): `client/src/App.tsx`
- [Search input](https://github.com/aidar-baiseitov/presight-execise/blob/main/client/src/components/SearchBar.tsx): `client/src/components/SearchBar.tsx`
- [Filter controls](https://github.com/aidar-baiseitov/presight-execise/blob/main/client/src/components/FilterSidebar.tsx): `client/src/components/FilterSidebar.tsx`
- [Sort controls](https://github.com/aidar-baiseitov/presight-execise/blob/main/client/src/components/SortControls.tsx): `client/src/components/SortControls.tsx`
- [Active filters](https://github.com/aidar-baiseitov/presight-execise/blob/main/client/src/components/ActiveFilters.tsx): `client/src/components/ActiveFilters.tsx`
- [Virtual user list](https://github.com/aidar-baiseitov/presight-execise/blob/main/client/src/components/UserList.tsx): `client/src/components/UserList.tsx`

### Client state and data

- [URL view state](https://github.com/aidar-baiseitov/presight-execise/blob/main/client/src/hooks/useDirectoryParams.ts): `client/src/hooks/useDirectoryParams.ts`
- [Directory queries](https://github.com/aidar-baiseitov/presight-execise/blob/main/client/src/hooks/useDirectoryData.ts): `client/src/hooks/useDirectoryData.ts`
- [API client](https://github.com/aidar-baiseitov/presight-execise/blob/main/client/src/api/client.ts): `client/src/api/client.ts`
- [Directory types](https://github.com/aidar-baiseitov/presight-execise/blob/main/client/src/api/types.ts): `client/src/api/types.ts`

### API and queries

- [Express app](https://github.com/aidar-baiseitov/presight-execise/blob/main/server/src/app.ts): `server/src/app.ts`
- [API routes](https://github.com/aidar-baiseitov/presight-execise/blob/main/server/src/routes/api.ts): `server/src/routes/api.ts`
- [Query validation](https://github.com/aidar-baiseitov/presight-execise/blob/main/server/src/validation.ts): `server/src/validation.ts`
- [User and facet queries](https://github.com/aidar-baiseitov/presight-execise/blob/main/server/src/services/userQuery.ts): `server/src/services/userQuery.ts`
- [API response types](https://github.com/aidar-baiseitov/presight-execise/blob/main/server/src/types.ts): `server/src/types.ts`

### SQLite and data

- [Server startup](https://github.com/aidar-baiseitov/presight-execise/blob/main/server/src/index.ts): `server/src/index.ts`
- [Dataset seeding](https://github.com/aidar-baiseitov/presight-execise/blob/main/server/src/db/seed.ts): `server/src/db/seed.ts`
- [Database connection](https://github.com/aidar-baiseitov/presight-execise/blob/main/server/src/db/connection.ts): `server/src/db/connection.ts`
- [Relational schema](https://github.com/aidar-baiseitov/presight-execise/blob/main/server/src/db/schema.ts): `server/src/db/schema.ts`

### Other components

- **Directory user**
- **SQLite database**
- **Dicebear avatars**

## Connections

- Directory user → Directory app: uses
- Directory app → Search input: renders
- Directory app → Filter controls: renders
- Directory app → Sort controls: renders
- Directory app → Active filters: renders
- Directory app → Virtual user list: renders
- Directory app → URL view state: reads and updates
- Directory app → Directory queries: loads data
- Search input → Directory app: emits query
- Filter controls → Directory app: emits selections
- Sort controls → Directory app: emits sort
- Active filters → Directory app: emits selections
- Virtual user list → Directory app: emits hobby selection
- Directory queries → API client: requests data
- API client → Directory types: uses contracts
- API client → Express app: HTTP requests
- Express app → API routes: mounts API
- API routes → Query validation: parses parameters
- API routes → User and facet queries: dispatches list and facets
- API routes → Database connection: counts health users
- User and facet queries → SQLite database: queries and counts
- User and facet queries → API response types: returns typed results
- Server startup → Database connection: opens database
- Server startup → Dataset seeding: seeds if needed
- Server startup → Express app: starts server
- Database connection → SQLite database: opens and reads
- Database connection → Relational schema: initializes schema
- Dataset seeding → SQLite database: writes dataset
- Dataset seeding → Dicebear avatars: generates avatar URLs