← All projects
ReactJS Beginner Projects
GitHub Profile Finder
Description
This project involves creating an app that uses the GitHub API to search and display user profiles. It should pull data such as repositories, followers, and other details. This intermediate project provides practical experience in working with external APIs, state management, and React component design.
Requirements
The GitHub Profile Finder should include the following features:
- Search functionality to find GitHub users by username.
- Display key profile information: profile picture, bio, number of repositories, and followers.
- List public repositories with names and descriptions.
- Responsive layout and clear presentation using Tailwind CSS.
Key Concepts
- Fetching and handling data from the GitHub API using React.
- Managing asynchronous operations and data flow in React components.
- Designing and implementing search functionality.
- Styling components effectively for clean, responsive UI with Tailwind CSS.
Learning Objectives
After completing this project, students will be able to:
- Integrate and fetch data from external APIs like GitHub in React.
- Handle asynchronous data fetching and state management effectively.
- Build a functional search feature in a React application.
- Craft a responsive and visually appealing UI using Tailwind CSS.
Getting started
Choose your preferred package manager to scaffold a Vite + React TypeScript app:
$ npm create vite@latest github-profile-finder -- --template react-ts
$ yarn create vite github-profile-finder --template react-ts
$ bun create vite github-profile-finder --template react-ts
Then follow the prompts and start building.