Skip to content

README.md

Latest commit

 

History

History
121 lines (88 loc) · 2.69 KB

README.md

File metadata and controls

121 lines (88 loc) · 2.69 KB
Raw

GitHub Developer Explorer

A recruiter-focused web app to search GitHub developers, inspect profiles and repositories, shortlist candidates, and monitor activity from a dashboard.

Tech Stack

  • React 19 + Vite
  • React Router (with route loaders)
  • Tailwind CSS + DaisyUI
  • React Icons
  • React Toastify
  • SweetAlert2
  • Recharts

How To Run The Project

git clone https://github.com/CoderTahmid/GitHub-Developer-Explorer
cd GitHub-Developer-Explorer
npm install
npm run dev

Folder Structure

src/
	components/
		DeveloperCard.jsx
		Footer.jsx
		Navbar.jsx
	pages/
		Dashboard.jsx
		DeveloperProfile.jsx
		ErrorPage.jsx
		Login.jsx
		MainLayout.jsx
		SearchDeveloper.jsx
		ShortlistedCandidates.jsx
	routes/
		RouteGuards.jsx
	utils/
		auth.js
	main.jsx

State Management Explanation

This project uses lightweight, built-in state management with React hooks + React Router + localStorage.

1. Route loader state (server data)

  • API responses are fetched in loaders in src/main.jsx.
  • UI pages read this data using useLoaderData.
  • This keeps API logic outside UI components and matches the separation requirement.

2. Component local state (UI behavior)

Pages use useState/useMemo for presentational interactions, such as:

  • Loading skeleton visibility using useNavigation status
  • Pagination button rendering
  • Repository "See more" display count
  • Toggle UI states (like shortlist button text/state)

3. Persistent client state (localStorage)

  • Auth session: gde_auth_session
  • Shortlisted candidates: gde_shortlisted_candidates
  • Searched users history: gde_searched_users

These values survive refresh and are used by dashboard metrics and route guards.

How API Integration Works

GitHub API integration is implemented through React Router loaders in src/main.jsx.

Search users endpoint

  • Loader: searchDevelopersLoader
  • Route: /search
  • API:
https://api.github.com/search/users?q={keyword}&per_page=12&page={page}
  • Returns to UI:
    • users
    • totalCount
    • keyword
    • currentPage
    • error

Developer profile + repositories endpoints

  • Loader: developerProfileLoader
  • Route: /developer/:username
  • APIs:
https://api.github.com/users/{username}
https://api.github.com/users/{username}/repos?per_page=100&sort=updated
  • Returns to UI:
    • profile
    • repositories
    • error

Error handling strategy

  • If API status is not OK, loader extracts GitHub error message when available.
  • Loaders return safe fallback objects with error strings so pages can render clear alerts.
  • Router-level error UI is handled by errorElement using ErrorPage.jsx.

Live side link

https://sunny-hotteok-9d438d.netlify.app/