# shyamtawli/devfind architecture

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

- Interactive diagram: https://gitdiagram.com/shyamtawli/devfind
- Repository: https://github.com/shyamtawli/devfind

## Overview

devFind is a searchable directory of developer profiles. Visitors browse a shuffled profile collection or search by name, location, or skill; the home page loads the listed JSON records, filters results, paginates them, and displays profile cards with skills and social links. The README also documents profile contributions, reflected in the catalog and profile-record files. The graph follows the sampled home-page and component code; broader routing and error-state behavior is represented only where the tree and sampled page support it.

Main entry points: [`pages/index.js`](https://github.com/shyamtawli/devfind/blob/master/pages/index.js) (Directory page), [`components/Search.jsx`](https://github.com/shyamtawli/devfind/blob/master/components/Search.jsx) (Search controls), [`components/Sidebar.jsx`](https://github.com/shyamtawli/devfind/blob/master/components/Sidebar.jsx) (Sidebar), [`components/Pagination.jsx`](https://github.com/shyamtawli/devfind/blob/master/components/Pagination.jsx) (Pagination)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_catalog["Profile catalog"]
  node_catalog_list["Profile list<br/>[ProfileList.json]"]
  node_profile_records["Profile records"]
end

subgraph group_discovery["Search and navigation"]
  node_home["Directory page<br/>[index.js]"]
  node_search["Search controls<br/>[Search.jsx]"]
  node_debounce["Input debounce<br/>[useDebouncer.tsx]"]
  node_sidebar["Sidebar<br/>[Sidebar.jsx]"]
end

subgraph group_results["Results presentation"]
  node_pagination["Pagination<br/>[Pagination.jsx]"]
  node_profile["Profile card<br/>[Profile.jsx]"]
  node_skeleton["Loading placeholders"]
  node_empty_state["No results<br/>[NoResultFound.jsx]"]
  node_error_page["Error page<br/>[ErrorPage.jsx]"]
end

subgraph group_preferences["Display preferences"]
  node_theme["Theme state<br/>[useTheme.tsx]"]
end

node_visitor(("Visitor"))
node_browser_storage[("Browser local storage")]

node_visitor -->|"opens directory"| node_home
node_home -->|"reads filenames"| node_catalog_list
node_home -->|"fetches records"| node_profile_records
node_home -->|"renders controls"| node_search
node_search -->|"debounces input"| node_debounce
node_search -->|"submits criteria"| node_home
node_home -->|"renders paging"| node_pagination
node_pagination -->|"changes page"| node_home
node_home -->|"renders results"| node_profile
node_home -->|"renders while loading"| node_skeleton
node_home -->|"renders when empty"| node_empty_state
node_home -->|"renders on other route"| node_error_page
node_home -->|"renders navigation"| node_sidebar
node_sidebar -->|"toggles theme"| node_theme
node_theme -->|"reads and writes"| node_browser_storage

click node_home "https://github.com/shyamtawli/devfind/blob/master/pages/index.js"
click node_catalog_list "https://github.com/shyamtawli/devfind/blob/master/components/ProfileList.json"
click node_profile_records "https://github.com/shyamtawli/devfind/tree/master/public/data"
click node_search "https://github.com/shyamtawli/devfind/blob/master/components/Search.jsx"
click node_debounce "https://github.com/shyamtawli/devfind/blob/master/components/hooks/useDebouncer.tsx"
click node_sidebar "https://github.com/shyamtawli/devfind/blob/master/components/Sidebar.jsx"
click node_pagination "https://github.com/shyamtawli/devfind/blob/master/components/Pagination.jsx"
click node_profile "https://github.com/shyamtawli/devfind/blob/master/components/Profile.jsx"
click node_skeleton "https://github.com/shyamtawli/devfind/blob/master/components/ProfileSkeleton.jsx"
click node_empty_state "https://github.com/shyamtawli/devfind/blob/master/components/NoResultFound.jsx"
click node_error_page "https://github.com/shyamtawli/devfind/blob/master/components/ErrorPage.jsx"
click node_theme "https://github.com/shyamtawli/devfind/blob/master/components/hooks/useTheme.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_catalog_list,node_profile_records toneBlue
class node_home,node_search,node_debounce,node_sidebar,node_browser_storage toneAmber
class node_pagination,node_profile,node_skeleton,node_empty_state,node_error_page toneMint
class node_theme toneRose
class node_visitor toneIndigo
```

## Components

### Profile catalog

- [Profile list](https://github.com/shyamtawli/devfind/blob/master/components/ProfileList.json): `components/ProfileList.json`
- [Profile records](https://github.com/shyamtawli/devfind/tree/master/public/data): `public/data`

### Search and navigation

- [Directory page](https://github.com/shyamtawli/devfind/blob/master/pages/index.js): `pages/index.js`
- [Search controls](https://github.com/shyamtawli/devfind/blob/master/components/Search.jsx): `components/Search.jsx`
- [Input debounce](https://github.com/shyamtawli/devfind/blob/master/components/hooks/useDebouncer.tsx): `components/hooks/useDebouncer.tsx`
- [Sidebar](https://github.com/shyamtawli/devfind/blob/master/components/Sidebar.jsx): `components/Sidebar.jsx`

### Results presentation

- [Pagination](https://github.com/shyamtawli/devfind/blob/master/components/Pagination.jsx): `components/Pagination.jsx`
- [Profile card](https://github.com/shyamtawli/devfind/blob/master/components/Profile.jsx): `components/Profile.jsx`
- [Loading placeholders](https://github.com/shyamtawli/devfind/blob/master/components/ProfileSkeleton.jsx): `components/ProfileSkeleton.jsx`
- [No results](https://github.com/shyamtawli/devfind/blob/master/components/NoResultFound.jsx): `components/NoResultFound.jsx`
- [Error page](https://github.com/shyamtawli/devfind/blob/master/components/ErrorPage.jsx): `components/ErrorPage.jsx`

### Display preferences

- [Theme state](https://github.com/shyamtawli/devfind/blob/master/components/hooks/useTheme.tsx): `components/hooks/useTheme.tsx`

### Other components

- **Visitor**
- **Browser local storage**

## Connections

- Visitor → Directory page: opens directory
- Directory page → Profile list: reads filenames
- Directory page → Profile records: fetches records
- Directory page → Search controls: renders controls
- Search controls → Input debounce: debounces input
- Search controls → Directory page: submits criteria
- Directory page → Pagination: renders paging
- Pagination → Directory page: changes page
- Directory page → Profile card: renders results
- Directory page → Loading placeholders: renders while loading
- Directory page → No results: renders when empty
- Directory page → Error page: renders on other route
- Directory page → Sidebar: renders navigation
- Sidebar → Theme state: toggles theme
- Theme state → Browser local storage: reads and writes