Medium•Web Development

GitFinder

Build a full-featured GitHub Profile Explorer that fetches live data from the GitHub REST API. Search any developer's username and instantly see their profile stats, top repositories, language breakdown, organizations, and recent activity — all in a stunning dark UI with smooth animations.

📚Scroll down to see free videos & courses ↓
View on GitHubLive Demo

What You Will Build

A responsive GitHub Profile Explorer where users can search any GitHub username and instantly view their profile card, total stars & forks, language usage bar, top repositories sorted by stars, organization memberships, and a live activity feed — all powered by the GitHub REST API with zero backend needed.

Concepts You'll Learn

  • Fetching data from a REST API with fetch() and async/await
  • GitHub REST API endpoints and response shapes
  • React useState, useCallback, and useEffect hooks
  • Error handling and typed error states
  • Skeleton loading states for better UX
  • Animating components with Framer Motion
  • Deriving computed statistics from raw API data
  • Dark/light theme toggling with CSS variables
  • Next.js App Router and client components
  • Responsive grid layouts with CSS

Tech Stack

Next.jsReactGitHub REST APIFramer MotionLucide React

References

1🌐 Website

Test Your API

Online tool / resource

2🌐 Website

Tailwind cheat sheet

Online tool / resource

3📚 Docs

GitHub REST API Documentation

Official documentation

4📚 Docs

Framer Motion Docs

Official documentation

5📚 Docs

Next.js Data Fetching — Official Docs

Official documentation

6📚 Docs

Using Environment Variables in Next.js

Official documentation

7📄 Article

CSS Variables (Custom Properties) — MDN

In-depth reading

Buy me a coffee