⚡ Advanced React – Real-Time GitHub User Search

A React application that provides a real-time GitHub user search experience with advanced optimization techniques, infinite scrolling, and state persistence. Built as an interview-level project to showcase mastery of React hooks, performance patterns, and API integration.

---

🚀 Features

• 🔎 Real-Time Search – Search GitHub users instantly with debouncing to avoid excessive API calls.

• 📜 Infinite Scroll – Automatically loads more users as you scroll down.

• 💾 State Persistence – Last search query is stored in localStorage and restored across reloads.

• ⚡ Performance Optimizations – Uses useMemo, useCallback, and React.memo to minimize re-renders.

• 🪝 Custom Hooks

  • useDebounce – Control API calls during typing.
  • useInfiniteScroll – Trigger API calls when reaching scroll end.
  • useLocalStorage – Persist query state easily.

• 🎨 User Experience Enhancements – Loading states, error handling, and empty results UI using TailwindCSS.

• 🔥 Bonus – Click a user card to open a modal with detailed GitHub profile info.

---

📂 Project Structure

src/
 ├── App.js
 ├── components/
 │    ├── SearchInput.jsx
 │    ├── UserList.jsx
 │    ├── UserCard.jsx
 │    └── UserModal.jsx   # (Optional: user details modal)
 ├── hooks/
 │    ├── useDebounce.js
 │    ├── useInfiniteScroll.js
 │    └── useLocalStorage.js
 └── index.js

---

🔗 API Reference

• Search Users: GET https://api.github.com/search/users?q={USERNAME}&page={PAGE}&per_page=30

• User Details (Bonus): GET https://api.github.com/users/{USERNAME}

---

🛠️ Installation & Setup

1. Clone the repository:

   git clone https://github.com/your-username/github-user-search.git
   cd github-user-search

2. Install dependencies:

   npm install

3. Run the app:

   npm run dev

4. Open in browser: [http://localhost:5173]

---

🎯 Interview Concepts Covered

• API integration with pagination
• Debounce + localStorage persistence
• Component communication (props & lifting state)
• Performance tuning (React.memo, useCallback, useMemo)
• Custom hooks & separation of concerns
• Clean, modular architecture

---

🌟 Optional Enhancements

• Add Zustand/Recoil for global state management
• Implement a theme switcher (light/dark mode)
• Use React Query or SWR for caching & server state
• Rewrite with Next.js App Router or React Server Components (RSC)

---

📜 License

This project is open-source and available under the MIT License.