How shyamtawli/devfind works
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: index.js Directory page · Search.jsx Search controls · Sidebar.jsx Sidebar · Pagination.jsx Pagination
Components 14
Profile catalog
- Profile list
components/ProfileList.json - Profile records
public/data
Search and navigation
- Directory page
pages/index.js - Search controls
components/Search.jsx - Input debounce
components/hooks/useDebouncer.tsx - Sidebar
components/Sidebar.jsx
Results presentation
- Pagination
components/Pagination.jsx - Profile card
components/Profile.jsx - Loading placeholders
components/ProfileSkeleton.jsx - No results
components/NoResultFound.jsx - Error page
components/ErrorPage.jsx
Display preferences
- Theme state
components/hooks/useTheme.tsx
Other components
- Visitor
- Browser local storage
Connections 15
- 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