Skip to main content

​
Overview

The Repository Explorer provides a powerful interface to browse through a user’s GitHub repositories with advanced filtering and sorting capabilities. View repository details, metrics, and navigate through paginated results.
Repositories are fetched 30 per page with full pagination support for users with extensive repository collections.

​
Core Features

Star Filtering

Filter repositories by minimum star count

Smart Sorting

Sort by recency, stars, or forks

Pagination

Navigate through repositories 30 at a time

​
Filtering Repositories

The filter system allows you to focus on the most relevant repositories:

​
Star Count Filter

RepoList.jsx
const [minStars, setMinStars] = useState(0)

const filtered = repos
  .filter(r => r.stargazers_count >= minStars)
  .sort((a, b) => {
    if (sort === 'stars') return b.stargazers_count - a.stargazers_count
    if (sort === 'forks') return b.forks_count - a.forks_count
    return new Date(b.updated_at) - new Date(a.updated_at)
  })
Use the star filter to quickly find a user’s most popular projects. For example, set “Stars ≥ 100” to see only highly-starred repositories.

​
Filter Controls UI

<div className="controls">
  <div className="filter-group">
    <Filter size={13} />
    <span>Stars ≥</span>
    <input
      type="number"
      min="0"
      value={minStars}
      onChange={e => setMinStars(Math.max(0, +e.target.value))}
    />
  </div>
  
  <select value={sort} onChange={e => setSort(e.target.value)}>
    <option value="updated">Recientes</option>
    <option value="stars">⭐ Stars</option>
    <option value="forks">🍴 Forks</option>
  </select>
</div>

​
Sorting Options

Repositories can be sorted by three different criteria:
Shows repositories ordered by their last update date. Perfect for finding currently active projects.
return new Date(b.updated_at) - new Date(a.updated_at)
Orders repositories by star count (highest first). Ideal for discovering popular projects.
return b.stargazers_count - a.stargazers_count
Shows most-forked repositories first. Great for finding projects with active contributor communities.
return b.forks_count - a.forks_count

​
Repository Cards

Each repository is displayed as an interactive card with comprehensive information:

​
Card Layout

RepoList.jsx
<button
  className={`repo-card ${selectedRepo?.id === repo.id ? 'selected' : ''}`}
  onClick={() => onSelectRepo(repo)}
>
  <div className="repo-top">
    <span className="repo-name">{repo.name}</span>
    {repo.fork && <span className="badge">fork</span>}
    {repo.archived && <span className="badge archived">archivado</span>}
  </div>
  
  {repo.description && <p className="desc">{repo.description}</p>}
  
  <div className="repo-meta">
    {repo.language && <LangDot lang={repo.language} />}
    {repo.stargazers_count > 0 && (
      <span><Star size={12} />{repo.stargazers_count.toLocaleString()}</span>
    )}
    {repo.forks_count > 0 && (
      <span><GitFork size={12} />{repo.forks_count}</span>
    )}
    <span><Clock size={12} />{timeAgo(repo.updated_at)}</span>
  </div>
</button>

​
Information Displayed

1

Repository Name

Bold, prominent name with badges for forked or archived status
2

Description

Repository description (if available) for quick context
3

Language

Primary programming language with color-coded indicator
4

Metrics

Star count, fork count, and last update time

​
Language Color Coding

Repositories display language indicators with GitHub-style colors:
RepoList.jsx
const LANG_COLORS = {
  JavaScript: '#f7df1e',
  TypeScript: '#3178c6',
  Python: '#3572a5',
  Java: '#b07219',
  'C++': '#f34b7d',
  Go: '#00add8',
  Rust: '#dea584',
  // ... and more
}

function LangDot({ lang }) {
  const color = LANG_COLORS[lang] || 'var(--text-dim)'
  return (
    <span className="lang-dot" style={{ background: color }} title={lang}>
      {lang}
    </span>
  )
}
Hover over the language indicator to see the full language name in a tooltip.

​
Time Formatting

Update times are displayed in a human-readable format: 
function timeAgo(dateStr) {
  const diff = Date.now() - new Date(dateStr)
  const d = Math.floor(diff / 86400000)
  
  if (d === 0) return 'hoy'
  if (d === 1) return 'ayer'
  if (d < 30) return `hace ${d}d`
  
  const m = Math.floor(d / 30)
  if (m < 12) return `hace ${m}m`
  return `hace ${Math.floor(m / 12)}a`
}

​
Pagination

Navigate through large repository collections with ease:
RepoList.jsx
<div className="pagination">
  <button
    onClick={() => setPage(p => Math.max(1, p - 1))}
    disabled={page === 1}
  >
    <ChevronLeft size={16} /> Anterior
  </button>
  
  <span className="page-info">Página {page}</span>
  
  <button
    onClick={() => setPage(p => p + 1)}
    disabled={!hasMore}
  >
    Siguiente <ChevronRight size={16} />
  </button>
</div>
The “Siguiente” button automatically disables when there are no more repositories to load (less than 30 results on current page).

​
Interactive Selection

Click any repository card to view detailed commit history:
App.jsx
<RepoList
  repos={repos}
  onSelectRepo={r => setSelectedRepo(prev => prev?.id === r.id ? null : r)}
  selectedRepo={selectedRepo}
/>

{selectedRepo && (
  <CommitPanel
    repo={selectedRepo}
    username={user.login}
    getCommits={getCommits}
  />
)}
Selected repositories are highlighted with a different background color. Click again to deselect.

​
Loading States

The explorer shows skeleton loaders during data fetching: 
{loading ? (
  <div className="grid">
    {[1,2,3,4,5,6].map(i => (
      <div key={i} className="skeleton sk-card" />
    ))}
  </div>
) : (
  <div className="grid">
    {filtered.map((repo, i) => (
      <RepoCard key={repo.id} repo={repo} index={i} />
    ))}
  </div>
)}

​
Empty States

When filters produce no results: 
{filtered.length === 0 && repos.length > 0 && (
  <div className="empty">No hay repos con ≥ {minStars} ⭐</div>
)}
If you see “No hay repos con ≥ X ⭐”, try lowering the star filter threshold.

​
Best Practices

Start Broad

Begin with no filters to see all repositories, then narrow down

Use Star Sorting

Sort by stars to quickly find a user’s most popular work

Check Recency

Sort by recent activity to find currently maintained projects

Explore Commits

Click repositories to view commit history and activity

Commit History

View detailed commit logs for selected repositories

User Search

Search for different users to explore their repositories

Build docs developers (and LLMs) love

Get started for freeTalk to us