{"id":27437242,"url":"https://github.com/darshanas17/react-github-popular-repos","last_synced_at":"2026-04-14T14:32:12.291Z","repository":{"id":287722422,"uuid":"965593623","full_name":"Darshanas17/react-github-popular-repos","owner":"Darshanas17","description":"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.","archived":false,"fork":false,"pushed_at":"2025-04-13T14:31:32.000Z","size":791,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-14T20:19:33.992Z","etag":null,"topics":["css","frontend","github-api","html","javascript","popular-repositories","react","ui-components"],"latest_commit_sha":null,"homepage":"https://darshanas17.github.io/react-github-popular-repos/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Darshanas17.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2025-04-13T14:03:38.000Z","updated_at":"2025-04-13T14:46:19.000Z","dependencies_parsed_at":"2025-04-13T15:28:54.987Z","dependency_job_id":"083d0d6a-11cc-4c10-a033-0d30d96b95c2","html_url":"https://github.com/Darshanas17/react-github-popular-repos","commit_stats":null,"previous_names":["darshanas17/react-github-popular-repos"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Darshanas17%2Freact-github-popular-repos","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Darshanas17%2Freact-github-popular-repos/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Darshanas17%2Freact-github-popular-repos/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Darshanas17%2Freact-github-popular-repos/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Darshanas17","download_url":"https://codeload.github.com/Darshanas17/react-github-popular-repos/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248952354,"owners_count":21188427,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["css","frontend","github-api","html","javascript","popular-repositories","react","ui-components"],"created_at":"2025-04-14T20:19:38.286Z","updated_at":"2026-04-14T14:32:12.235Z","avatar_url":"https://github.com/Darshanas17.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React GitHub Popular Repos\n\n## 📝 About the Project\n**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.\n\n## 🚀 Live Demo\n[Click here to view the demo](https://Darshanas17.github.io/react-github-popular-repos/)\n\n\u003cbr/\u003e\n\u003cdiv style=\"text-align: center;\"\u003e\n    \u003cimg src=\"https://assets.ccbp.in/frontend/content/react-js/github-popular-repos-output.gif\" alt=\"github popular repos output\" style=\"max-width:70%;box-shadow:0 2.8px 2.2px rgba(0, 0, 0, 0.12)\"\u003e\n\u003c/div\u003e\n\u003cbr/\u003e\n\n\n\n### 📌 Overview\nThe application provides a clean interface to:\n- Browse GitHub's most popular repositories\n- Search for repositories by name or technology\n- View essential repository details at a glance\n- Understand project popularity through star ratings\n\n### ✨ Features\n- **Real-time GitHub API Integration:** Fetches live repository data directly from GitHub\n- **Interactive Search:** Filter repositories by name, language, or keywords\n- **Responsive UI:** Works seamlessly across devices\n- **Visual Feedback:** \n  - Loading animations during data fetch\n  - Error messages for failed requests\n  - Success states with repository cards\n- **Repository Details Display:**\n  - Project name and owner\n  - Star and fork counts\n  - Description and primary language\n  - Last updated timestamp\n\n### 🛠️ Tech Stack\n- **Frontend:** React.js (Functional Components with Hooks)\n- **Styling:** CSS3 (Flexbox and Grid Layouts)\n- **State Management:** React useState and useEffect\n- **API Integration:** GitHub REST API\n- **Build Tool:** Create React App\n- **Deployment:** GitHub Pages\n\n### ⚙️ Installation \u0026 Setup\n```bash\n# Clone the repository\ngit clone https://github.com/Darshanas17/react-github-popular-repos.git\n\n# Navigate to project directory\ncd react-github-popular-repos\n\n# Install dependencies\nnpm install\n\n# Start development server\nnpm start\n\n# Build for production\nnpm run build\n```\n\n### 📁 Project Structure\n```\nsrc/\n├── components/\n│   ├── GitHubRepos/       # Main container component\n│   │   ├── index.js       # API fetching logic\n│   │   └── styles.css     # Component styles\n│   └── RepoItem/          # Individual repo card\n│       ├── index.js       # Card rendering\n│       └── styles.css     # Card styles\n├── App.js                 # Root component\n└── index.js               # Entry point\n```\n\n### 📷 Application States\n| State | Preview |\n|-------|---------|\n| **Success** | ![Success](https://assets.ccbp.in/frontend/content/react-js/github-repos-lg-success-output.png) |\n| **Loading** | ![Loading](https://assets.ccbp.in/frontend/content/react-js/github-repos-lg-loading-output.png) |\n| **Error** | ![Failure](https://assets.ccbp.in/frontend/content/react-js/github-repos-error-view-lg-output.png) |\n\n### 👨‍💻 Author\n**Darshan A S**  \n- [GitHub Profile](https://github.com/Darshanas17)  \n- [LinkedIn](https://www.linkedin.com/in/darshan-a-s/)  \n- [Portfolio](https://darshanas17.github.io/darshan-as-17-portfolio/)  \n\n### 📜 License\nThis project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.\n\n\u003cbr/\u003e\n\u003cdiv style=\"text-align: center; margin-top: 20px;\"\u003e\n    \u003csub\u003eBuilt with ❤️ and React\u003c/sub\u003e\n\u003c/div\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdarshanas17%2Freact-github-popular-repos","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdarshanas17%2Freact-github-popular-repos","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdarshanas17%2Freact-github-popular-repos/lists"}