Skip to main content

​
Overview

GitScope’s user search feature allows you to quickly find and analyze any GitHub user’s profile. Simply enter a username to view comprehensive statistics, repositories, and activity metrics.
The search validates input in real-time and only enables the search button when a valid username is entered.

​
How It Works

The search interface provides an intuitive experience for finding GitHub users:
  1. Enter a username in the search field
  2. Click “Analizar” to fetch the user’s data
  3. View results including profile info, repositories, and language statistics

​
Search Bar Component

The search functionality is powered by a React component that handles form validation and submission:
SearchBar.jsx
import { useState } from 'react'
import { Search } from 'lucide-react'

export function SearchBar({ onSearch, loading }) {
  const [value, setValue] = useState('')

  const handleSubmit = (e) => {
    e.preventDefault()
    const v = value.trim()
    if (v) onSearch(v)
  }

  return (
    <form onSubmit={handleSubmit}>
      <div className="input-wrap">
        <Search size={18} />
        <input
          type="text"
          placeholder="Buscar usuario (ej: torvalds, gvanrossum...)"
          value={value}
          onChange={e => setValue(e.target.value)}
          autoComplete="off"
          spellCheck={false}
        />
      </div>
      <button type="submit" disabled={loading || !value.trim()}>
        {loading ? <span className="spinner" /> : 'Analizar'}
      </button>
    </form>
  )
}

​
Key Features

Input Validation

Automatically trims whitespace and disables the submit button when input is empty

Loading States

Shows a spinner during search to provide visual feedback

Smart Autocomplete

Disables browser autocomplete for a cleaner search experience

Suggested Users

Quick-access buttons for popular developers like torvalds, gvanrossum, and more

​
User Profile Display

Once a user is found, GitScope displays a comprehensive profile card with:
  • Avatar and username with link to GitHub profile
  • Bio and display name
  • Location, company, website and social links
  • Key metrics: repositories, followers, following, gists

​
UserCard Component Structure

UserCard.jsx
export function UserCard({ user }) {
  return (
    <div className="card">
      <div className="top">
        <img src={user.avatar_url} alt={user.login} />
        <div className="info">
          <h2>{user.name || user.login}</h2>
          <a href={user.html_url} target="_blank">@{user.login}</a>
          {user.bio && <p>{user.bio}</p>}
          
          {/* Meta information */}
          {user.company && <span>{user.company}</span>}
          {user.location && <span>{user.location}</span>}
          {user.blog && <a href={user.blog}>{user.blog}</a>}
        </div>
      </div>
      
      <div className="stats">
        <Stat label="Repositorios" value={user.public_repos} />
        <Stat label="Seguidores" value={user.followers} />
        <Stat label="Siguiendo" value={user.following} />
        <Stat label="Gists" value={user.public_gists} />
      </div>
    </div>
  )
}
All external links (GitHub profile, website, Twitter) automatically open in a new tab for seamless browsing.

​
API Integration

The search feature uses GitHub’s REST API through a custom hook:
useGitHub.js
const getUser = useCallback(
  (username) => request(`/users/${username}`),
  [request]
)

// Usage in component
const search = async (username) => {
  try {
    const userData = await getUser(username)
    setUser(userData)
  } catch (e) {
    setError(e.message)
  }
}

​
Error Handling

The search gracefully handles errors including:
  • User not found (404 errors)
  • Rate limit exceeded (403 errors)
  • Network failures with user-friendly messages

​
Best Practices

1

Use Exact Usernames

Enter the exact GitHub username for accurate results. The search is case-sensitive.
2

Try Suggested Users

Click on suggested usernames (torvalds, gvanrossum, etc.) to see example profiles.
3

Monitor Rate Limits

Check the rate limit indicator in the header. Add a GitHub token for higher limits (60 → 5,000 requests/hour).
Without authentication, GitHub limits you to 60 requests per hour. Add a personal access token to increase this to 5,000 requests/hour.

​
UI/UX Features

  • Responsive design adapts to all screen sizes
  • Fade-in animations for smooth content loading
  • Skeleton loaders during data fetching
  • Accessibility with proper ARIA labels and semantic HTML

​
What’s Next?

After searching for a user, explore:

Repository Explorer

Browse and filter the user’s repositories

Language Analytics

View programming language distribution

Build docs developers (and LLMs) love

Get started for freeTalk to us