Portfolio
Projekt: GitHub Explorer

Projekt: GitHub Explorer

Březen 2026

Po větším e-shop projektu jsem chtěl menší aplikaci zaměřenou hlavně na API a UX vyhledávání. Tak vznikl GitHub Explorer.

Repozitář projektu: GitHub Explorer

Co projekt dělá

Aplikace funguje jako jednoduchý průzkumník repozitářů:

  • uživatel zadá dotaz,
  • aplikace zavolá GitHub API,
  • výsledky zobrazí v kartách,
  • zobrazuje stavy loading, error i prázdný výsledek.

Technologie a struktura

Technologie:

  • Reactu (funkční komponenty, hooks),
  • Vite pro rychlý lokální vývoj,
  • Axiosu pro volání GitHub API,
  • Tailwind CSS pro stylování komponent a layoutu,
  • JavaScriptu + ESLintu pro konzistentní kód,
  • komponentách SearchForm a ResultCard pro oddělení formuláře a výsledků.

Architektura je jednoduchá SPA: formulář pro hledání + seznam výsledků.

Práce s API a stavem

Nejdůležitější část byla vazba API requestu na UI stavy.

Použitá logika hledání vypadá takto:

const handleSearch = () => {
	if (!inputValue) {
		alert("Please enter a search term.");
		return;
	}

	setLoading(true);
	axios
		.get(`https://api.github.com/search/repositories?q=${inputValue}`)
		.then((response) => {
			setResults(response.data.items);
			setLoading(false);
		})
		.catch((error) => {
			setError(error.message);
			setLoading(false);
		});
};

Stav je rozdělený na results, loading, error a inputValue, což drží render logiku přehlednou.

Co jsem si odnesl

  • Lepší práci s API stavy a chybovými scénáři.
  • Praktičtější návrh menší React aplikace s oddělenými komponentami.
  • Jistotu v debugování requestů a odpovědí.

Kam to chci posunout dál

Do budoucna bych chtěl přidat:

  • filtrování výsledků (jazyk, počet hvězdiček),
  • stránkování nebo “Load more” místo jednorázového výpisu,
  • debouncing inputu, aby se zbytečně neposílalo moc requestů,
  • detail repozitáře s rozšířenými informacemi (issues, top contributors, poslední commit).

GitHub: GitHub Explorer