How aidar-baiseitov/presight-execise works
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: App.tsx Directory app · api.ts API routes · connection.ts Database connection · index.ts Server startup
Components 22
Directory interface
- Directory app
client/src/App.tsx - Search input
client/src/components/SearchBar.tsx - Filter controls
client/src/components/FilterSidebar.tsx - Sort controls
client/src/components/SortControls.tsx - Active filters
client/src/components/ActiveFilters.tsx - Virtual user list
client/src/components/UserList.tsx
Client state and data
- URL view state
client/src/hooks/useDirectoryParams.ts - Directory queries
client/src/hooks/useDirectoryData.ts - API client
client/src/api/client.ts - Directory types
client/src/api/types.ts
API and queries
- Express app
server/src/app.ts - API routes
server/src/routes/api.ts - Query validation
server/src/validation.ts - User and facet queries
server/src/services/userQuery.ts - API response types
server/src/types.ts
SQLite and data
- Server startup
server/src/index.ts - Dataset seeding
server/src/db/seed.ts - Database connection
server/src/db/connection.ts - Relational schema
server/src/db/schema.ts
Other components
- Directory user
- SQLite database
- Dicebear avatars
Connections 29
- 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