https://github.com/darshanas17/react-github-popular-repos
A React app that displays popular GitHub repositories filtered by programming language. It fetches live data from the GitHub API and presents it in a clean, responsive UI using functional components.
https://github.com/darshanas17/react-github-popular-repos
css frontend github-api html javascript popular-repositories react ui-components
Last synced: 10 months ago
JSON representation
A React app that displays popular GitHub repositories filtered by programming language. It fetches live data from the GitHub API and presents it in a clean, responsive UI using functional components.
- Host: GitHub
- URL: https://github.com/darshanas17/react-github-popular-repos
- Owner: Darshanas17
- Created: 2025-04-13T14:03:38.000Z (10 months ago)
- Default Branch: main
- Last Pushed: 2025-04-13T14:31:32.000Z (10 months ago)
- Last Synced: 2025-04-14T20:19:33.992Z (10 months ago)
- Topics: css, frontend, github-api, html, javascript, popular-repositories, react, ui-components
- Language: JavaScript
- Homepage: https://darshanas17.github.io/react-github-popular-repos/
- Size: 772 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# React GitHub Popular Repos
## 📝 About the Project
**GitHub Popular Repos** is a dynamic React application that connects with GitHub's API to fetch and display trending repositories. Users can explore popular open-source projects, search for specific technologies, and view key repository metrics like stars, forks, and descriptions. The app features responsive design, real-time data fetching, and intuitive error handling - making it a perfect tool for developers to discover trending projects on GitHub.
## 🚀 Live Demo
[Click here to view the demo](https://Darshanas17.github.io/react-github-popular-repos/)
### 📌 Overview
The application provides a clean interface to:
- Browse GitHub's most popular repositories
- Search for repositories by name or technology
- View essential repository details at a glance
- Understand project popularity through star ratings
### ✨ Features
- **Real-time GitHub API Integration:** Fetches live repository data directly from GitHub
- **Interactive Search:** Filter repositories by name, language, or keywords
- **Responsive UI:** Works seamlessly across devices
- **Visual Feedback:**
- Loading animations during data fetch
- Error messages for failed requests
- Success states with repository cards
- **Repository Details Display:**
- Project name and owner
- Star and fork counts
- Description and primary language
- Last updated timestamp
### 🛠️ Tech Stack
- **Frontend:** React.js (Functional Components with Hooks)
- **Styling:** CSS3 (Flexbox and Grid Layouts)
- **State Management:** React useState and useEffect
- **API Integration:** GitHub REST API
- **Build Tool:** Create React App
- **Deployment:** GitHub Pages
### ⚙️ Installation & Setup
```bash
# Clone the repository
git clone https://github.com/Darshanas17/react-github-popular-repos.git
# Navigate to project directory
cd react-github-popular-repos
# Install dependencies
npm install
# Start development server
npm start
# Build for production
npm run build
```
### 📁 Project Structure
```
src/
├── components/
│ ├── GitHubRepos/ # Main container component
│ │ ├── index.js # API fetching logic
│ │ └── styles.css # Component styles
│ └── RepoItem/ # Individual repo card
│ ├── index.js # Card rendering
│ └── styles.css # Card styles
├── App.js # Root component
└── index.js # Entry point
```
### 📷 Application States
| State | Preview |
|-------|---------|
| **Success** |  |
| **Loading** |  |
| **Error** |  |
### 👨💻 Author
**Darshan A S**
- [GitHub Profile](https://github.com/Darshanas17)
- [LinkedIn](https://www.linkedin.com/in/darshan-a-s/)
- [Portfolio](https://darshanas17.github.io/darshan-as-17-portfolio/)
### 📜 License
This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
Built with ❤️ and React