# abrar-292/presight-test architecture

> Architecture diagram of the GitHub repository abrar-292/presight-test, 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/abrar-292/presight-test
- Repository: https://github.com/abrar-292/presight-test

## Overview

Presight is a full-stack user directory: people search and browse users, refine results by nationality and hobbies, choose sorting, and keep that view in the URL. The client requests paginated results and dynamic facets; the API validates query parameters, applies filter and sort semantics, and reads persisted SQLite data. The README also documents virtualized infinite scrolling, loading/empty/error states, and responsive cards. Server control flow and query behavior are supported by sampled source; client composition and some runtime details are inferred only from the tree and README.

Main entry points: [`client/src/pages/HomePage.tsx`](https://github.com/abrar-292/presight-test/blob/main/client/src/pages/HomePage.tsx) (Directory page), [`server/src/db/database.ts`](https://github.com/abrar-292/presight-test/blob/main/server/src/db/database.ts) (SQLite connection), [`server/src/index.ts`](https://github.com/abrar-292/presight-test/blob/main/server/src/index.ts) (API server), [`server/src/controllers/user.controller.ts`](https://github.com/abrar-292/presight-test/blob/main/server/src/controllers/user.controller.ts) (User controller)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_client["Directory client"]
  node_app["Client app<br/>[App.tsx]"]
  node_home["Directory page<br/>[HomePage.tsx]"]
  node_urlstate["URL filters<br/>[useUrlFilters.ts]"]
  node_userhook["User data hook<br/>[useUsers.ts]"]
  node_api_client["API client<br/>[users.api.ts]"]
  node_search["Name search<br/>[SearchBar.tsx]"]
  node_filters["Facet filters<br/>[FilterSidebar.tsx]"]
  node_sorting["Sort controls<br/>[SortControls.tsx]"]
  node_userlist["Virtual user list<br/>[UserList.tsx]"]
  node_usercard["User card<br/>[UserCard.tsx]"]
  node_states["Result states<br/>[EmptyState.tsx]"]
  node_errorstate["Error state<br/>[ErrorState.tsx]"]
end

subgraph group_api["User API"]
  node_routes["User routes<br/>[userRoutes.ts]"]
  node_controller["User controller<br/>[user.controller.ts]"]
  node_validation["Query validation"]
  node_service["User service<br/>[userService.ts]"]
  node_repository["User repository<br/>[user.repository.ts]"]
  node_server["API server<br/>[index.ts]"]
end

subgraph group_data["SQLite data"]
  node_database["SQLite connection<br/>[database.ts]"]
  node_schema["Database schema<br/>[schema.sql]"]
  node_seed["Data seeding<br/>[seed.ts]"]
end

node_visitor(("Directory visitor"))
node_sqlite[("SQLite database")]

node_visitor -->|"opens"| node_app
node_app -->|"shows"| node_home
node_home -->|"reads and updates"| node_urlstate
node_home -->|"loads results"| node_userhook
node_home -->|"renders"| node_search
node_home -->|"renders"| node_filters
node_home -->|"renders"| node_sorting
node_home -->|"renders"| node_userlist
node_userlist -->|"renders users"| node_usercard
node_home -.->|"shows empty state"| node_states
node_home -.->|"shows errors"| node_errorstate
node_userhook -->|"requests pages"| node_api_client
node_api_client -->|"HTTP requests"| node_routes
node_server -->|"mounts"| node_routes
node_routes -->|"dispatches"| node_controller
node_controller -->|"parses query"| node_validation
node_controller -->|"requests results"| node_service
node_service -->|"queries users and facets"| node_repository
node_repository -->|"executes SQL"| node_database
node_database -->|"reads and writes"| node_sqlite
node_database -->|"initializes from"| node_schema
node_server -->|"initializes"| node_database
node_server -->|"seeds if empty"| node_seed
node_seed -->|"inserts records"| node_database

click node_app "https://github.com/abrar-292/presight-test/blob/main/client/src/App.tsx"
click node_home "https://github.com/abrar-292/presight-test/blob/main/client/src/pages/HomePage.tsx"
click node_urlstate "https://github.com/abrar-292/presight-test/blob/main/client/src/hooks/useUrlFilters.ts"
click node_userhook "https://github.com/abrar-292/presight-test/blob/main/client/src/hooks/useUsers.ts"
click node_api_client "https://github.com/abrar-292/presight-test/blob/main/client/src/api/users.api.ts"
click node_search "https://github.com/abrar-292/presight-test/blob/main/client/src/components/SearchBar.tsx"
click node_filters "https://github.com/abrar-292/presight-test/blob/main/client/src/components/FilterSidebar.tsx"
click node_sorting "https://github.com/abrar-292/presight-test/blob/main/client/src/components/SortControls.tsx"
click node_userlist "https://github.com/abrar-292/presight-test/blob/main/client/src/components/UserList.tsx"
click node_usercard "https://github.com/abrar-292/presight-test/blob/main/client/src/components/UserCard.tsx"
click node_states "https://github.com/abrar-292/presight-test/blob/main/client/src/components/EmptyState.tsx"
click node_errorstate "https://github.com/abrar-292/presight-test/blob/main/client/src/components/ErrorState.tsx"
click node_routes "https://github.com/abrar-292/presight-test/blob/main/server/src/routes/userRoutes.ts"
click node_controller "https://github.com/abrar-292/presight-test/blob/main/server/src/controllers/user.controller.ts"
click node_validation "https://github.com/abrar-292/presight-test/blob/main/server/src/validations/userQuery.validation.ts"
click node_service "https://github.com/abrar-292/presight-test/blob/main/server/src/services/userService.ts"
click node_repository "https://github.com/abrar-292/presight-test/blob/main/server/src/repositories/user.repository.ts"
click node_server "https://github.com/abrar-292/presight-test/blob/main/server/src/index.ts"
click node_database "https://github.com/abrar-292/presight-test/blob/main/server/src/db/database.ts"
click node_schema "https://github.com/abrar-292/presight-test/blob/main/server/src/db/schema.sql"
click node_seed "https://github.com/abrar-292/presight-test/blob/main/server/src/db/seed.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_home,node_urlstate,node_userhook,node_api_client,node_search,node_filters,node_sorting,node_userlist,node_usercard,node_states,node_errorstate toneBlue
class node_routes,node_controller,node_validation,node_service,node_repository,node_server,node_sqlite toneAmber
class node_database,node_schema,node_seed toneMint
class node_visitor toneIndigo
```

## Components

### Directory client

- [Client app](https://github.com/abrar-292/presight-test/blob/main/client/src/App.tsx): `client/src/App.tsx`
- [Directory page](https://github.com/abrar-292/presight-test/blob/main/client/src/pages/HomePage.tsx): `client/src/pages/HomePage.tsx`
- [URL filters](https://github.com/abrar-292/presight-test/blob/main/client/src/hooks/useUrlFilters.ts): `client/src/hooks/useUrlFilters.ts`
- [User data hook](https://github.com/abrar-292/presight-test/blob/main/client/src/hooks/useUsers.ts): `client/src/hooks/useUsers.ts`
- [API client](https://github.com/abrar-292/presight-test/blob/main/client/src/api/users.api.ts): `client/src/api/users.api.ts`
- [Name search](https://github.com/abrar-292/presight-test/blob/main/client/src/components/SearchBar.tsx): `client/src/components/SearchBar.tsx`
- [Facet filters](https://github.com/abrar-292/presight-test/blob/main/client/src/components/FilterSidebar.tsx): `client/src/components/FilterSidebar.tsx`
- [Sort controls](https://github.com/abrar-292/presight-test/blob/main/client/src/components/SortControls.tsx): `client/src/components/SortControls.tsx`
- [Virtual user list](https://github.com/abrar-292/presight-test/blob/main/client/src/components/UserList.tsx): `client/src/components/UserList.tsx`
- [User card](https://github.com/abrar-292/presight-test/blob/main/client/src/components/UserCard.tsx): `client/src/components/UserCard.tsx`
- [Result states](https://github.com/abrar-292/presight-test/blob/main/client/src/components/EmptyState.tsx): `client/src/components/EmptyState.tsx`
- [Error state](https://github.com/abrar-292/presight-test/blob/main/client/src/components/ErrorState.tsx): `client/src/components/ErrorState.tsx`

### User API

- [User routes](https://github.com/abrar-292/presight-test/blob/main/server/src/routes/userRoutes.ts): `server/src/routes/userRoutes.ts`
- [User controller](https://github.com/abrar-292/presight-test/blob/main/server/src/controllers/user.controller.ts): `server/src/controllers/user.controller.ts`
- [Query validation](https://github.com/abrar-292/presight-test/blob/main/server/src/validations/userQuery.validation.ts): `server/src/validations/userQuery.validation.ts`
- [User service](https://github.com/abrar-292/presight-test/blob/main/server/src/services/userService.ts): `server/src/services/userService.ts`
- [User repository](https://github.com/abrar-292/presight-test/blob/main/server/src/repositories/user.repository.ts): `server/src/repositories/user.repository.ts`
- [API server](https://github.com/abrar-292/presight-test/blob/main/server/src/index.ts): `server/src/index.ts`

### SQLite data

- [SQLite connection](https://github.com/abrar-292/presight-test/blob/main/server/src/db/database.ts): `server/src/db/database.ts`
- [Database schema](https://github.com/abrar-292/presight-test/blob/main/server/src/db/schema.sql): `server/src/db/schema.sql`
- [Data seeding](https://github.com/abrar-292/presight-test/blob/main/server/src/db/seed.ts): `server/src/db/seed.ts`

### Other components

- **Directory visitor**
- **SQLite database**

## Connections

- Directory visitor → Client app: opens
- Client app → Directory page: shows
- Directory page → URL filters: reads and updates
- Directory page → User data hook: loads results
- Directory page → Name search: renders
- Directory page → Facet filters: renders
- Directory page → Sort controls: renders
- Directory page → Virtual user list: renders
- Virtual user list → User card: renders users
- Directory page → Result states: shows empty state
- Directory page → Error state: shows errors
- User data hook → API client: requests pages
- API client → User routes: HTTP requests
- API server → User routes: mounts
- User routes → User controller: dispatches
- User controller → Query validation: parses query
- User controller → User service: requests results
- User service → User repository: queries users and facets
- User repository → SQLite connection: executes SQL
- SQLite connection → SQLite database: reads and writes
- SQLite connection → Database schema: initializes from
- API server → SQLite connection: initializes
- API server → Data seeding: seeds if empty
- Data seeding → SQLite connection: inserts records