How innocentemutabazi/user-directory works
Staff Directory is a React app for browsing, searching, sorting, and opening shareable user profiles. The main flow routes a visitor to the directory or a deep-linked profile; page hooks load and validate JSONPlaceholder data through a shared HTTP layer, while caches retain results across mounts. Search and sort are reflected in the URL, and the interface provides loading, error, empty, and theme states. The README documents these capabilities; some page, API, and layout implementations were not sampled, so their internal wiring is shown only where documented.
Main entry points: UserListPage.tsx Directory page · router.tsx Route table · UserDetailPage.tsx Profile page · usersApi.ts User API
Components 20
Application shell
- React entry
src/main.tsx - App root
src/App.tsx - Route table
src/app/router.tsx - Root layout
src/app/RootLayout.tsx
Directory discovery
- Directory page
src/features/users/pages/UserListPage.tsx - Search control
src/features/users/components/SearchBar.tsx - Sort control
src/features/users/components/SortToggle.tsx - User card
src/features/users/components/UserCard.tsx - List state
src/features/users/hooks/useUsers.ts - List cache
src/features/users/api/usersCache.ts
User profiles
- Profile page
src/features/users/pages/UserDetailPage.tsx - Profile state
src/features/users/hooks/useUser.ts - Profile cache
src/features/users/api/userCache.ts
Shared services
- User API
src/features/users/api/usersApi.ts - HTTP client
src/lib/http.ts - Theme toggle
src/components/ThemeToggle.tsx - Request states
src/components/ErrorState.tsx
Other components
- Visitor
- JSONPlaceholder
- Browser URL
Connections 23
- Visitor → Route table: navigates
- React entry → App root: mounts
- App root → Route table: provides routes
- Route table → Root layout: renders shell
- Route table → Directory page: routes directory
- Route table → Profile page: routes profile
- Root layout → Theme toggle: renders toggle
- Directory page → List state: loads list
- Directory page → Search control: renders control
- Directory page → Sort control: renders control
- Directory page → User card: renders results
- Directory page → Browser URL: mirrors search and sort
- Browser URL → Directory page: restores view state
- List state → List cache: loads and revalidates
- List cache → User API: fetches users
- Profile page → Profile state: loads profile
- Profile page → Browser URL: preserves return query
- Profile state → Profile cache: loads and revalidates
- Profile cache → User API: fetches user
- User API → HTTP client: requests JSON
- HTTP client → JSONPlaceholder: fetches endpoint
- Directory page → Request states: renders request states
- Profile page → Request states: renders request errors