GitHub Profile Card

Project roadmap

1. 01

   Create the project

   ~1h

   Install Node.js (LTS version), then create a React project with npm create vite@latest and choose the React template. Start it with npm run dev, then replace the default page with a heading that says GitHub Profile Card. Done when: the app runs in the browser and shows your heading.

2. 02

   Add the search form

   ~1h

   Create a SearchForm component with a text input and a Search button. Keep the input value in state with useState and call an onSearch function passed in from App when the form is submitted. Ignore empty input and trim spaces. Done when: typing a name and pressing Enter or clicking Search passes the username to App (log it with console.log to check).

3. 03

   Fetch the profile

   ~2h

   When a username is searched, fetch https://api.github.com/users/<username> with fetch. Track three states in App: loading, error and profile. Show Loading… while waiting. For a 404, show User not found. For a 403 (the rate limit, 60 requests per hour without a token), show a message asking to wait. Done when: searching a real user stores their profile, and a made-up name shows User not found.

4. 04

   Show the profile card

   ~1.5h

   Create a ProfileCard component showing the avatar, name (or the username when the name is empty), bio, location, followers, following and number of public repos, plus a link to the GitHub profile that opens in a new tab. Add some simple CSS so it looks like a card. Done when: a searched user's details appear in a styled card.

5. 05

   Add top repositories and languages

   ~2h

   Fetch https://api.github.com/users/<username>/repos?per_page=100 and show the 5 repositories with the most stars (name as a link, description and star count) in a TopRepos component. Count the language field across all repos and show the 3 most common languages with their percentages. Handle a user with no repositories. Done when: the card shows the top repos and top languages for a real user.

6. 06

   Test it

   ~1.5h

   Install Vitest and React Testing Library. Write tests for the function that picks the top repos and counts languages, and a component test that mocks fetch to return a user and checks the name appears, and another that returns 404 and checks the User not found message. Done when: npm test passes.

Resources

• DocsReact documentation
• DocsVite getting started
• DocsGitHub REST API: users
• DocsUsing the Fetch API (MDN)
• DocsReact Testing Library