https://github.com/fahadshahbaz/devfinder
A React app to search GitHub users by username, fetching and displaying profile data in a sleek Tailwind CSS interface. It handles errors and offers a responsive design.
https://github.com/fahadshahbaz/devfinder
fronend-mentor frontendmentor-challenge githubapi jsx-syntax reactjs responsive-design tailwind-css
Last synced: 5 months ago
JSON representation
A React app to search GitHub users by username, fetching and displaying profile data in a sleek Tailwind CSS interface. It handles errors and offers a responsive design.
- Host: GitHub
- URL: https://github.com/fahadshahbaz/devfinder
- Owner: fahadshahbaz
- Created: 2024-11-14T16:48:07.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-11-19T15:47:10.000Z (over 1 year ago)
- Last Synced: 2025-03-15T09:15:04.322Z (about 1 year ago)
- Topics: fronend-mentor, frontendmentor-challenge, githubapi, jsx-syntax, reactjs, responsive-design, tailwind-css
- Language: JavaScript
- Homepage: https://itsdevfinder.vercel.app/
- Size: 174 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# **Devfinder** - Frontend Mentor Challenge
A sleek, interactive GitHub user search application built with React and Tailwind CSS. Easily search for GitHub users, view their profiles, repositories, followers, and more. Featuring light/dark mode, error handling, and responsive design.
## **🌟 Key Features**
- **Search Users:** Enter any GitHub username to retrieve detailed user information.
- **Default User:** Initially loads data for "octocat" when the app is first opened.
- **Error Handling:** If a user is not found, an error message will be shown.
- **Light/Dark Mode:** Toggle between light and dark modes using Tailwind CSS.
- **Responsive Design:** Optimized for both mobile and desktop views for a seamless experience.
## **🛠️ Technologies Used**
- **React**: To build the user interface and manage application state.
- **TypeScript**: For type-safe code and better developer experience.
- **Tailwind CSS**: For modern, utility-first styling and support for dark mode.
- **GitHub API**: Fetches live data for GitHub users, including their profiles and statistics.
## **🤔 What I Learned**
- How to integrate the **GitHub API** to fetch real-time user data.
- Implementing **light and dark mode** using Tailwind CSS with a class-based approach.
- Handling **API errors** effectively and displaying error messages to the user.
- Building reusable and dynamic components in **React**.
- Creating a **responsive design** that adapts to different screen sizes.
## **🎯 Purpose**
This project was created as part of a **Frontend Mentor challenge**, aiming to enhance my skills in React, API integration, and UI design with Tailwind CSS. The app allows users to search for any GitHub user and view their profile details while providing an intuitive experience with dark/light theme switching.
## **🚀 Getting Started**
### **Installation**
1. Clone the repository:
```bash
git clone https://github.com/fahadshahbaz/DevFinder.git
```
2. Navigate into the project directory:
```bash
cd devfinder
```
3. Install the dependencies using **pnpm** (or npm):
```bash
pnpm install
```
### **Run the Project**
To start the app on your local server, run the following:
```bash
pnpm dev
```
Visit `http://localhost:5173` to view the app in action.
## **💻 Live Demo**
Check out the live version of the project [here](https://itsdevfinder.vercel.app).