GitHub Repositories Explorer

This project is a Next.js web application that allows users to search for and filter GitHub repositories based on stars, language, and topics. It uses the GitHub API to fetch repositories and display them in a user-friendly interface.

Demo Click here

Features

• Search for repositories by name
• Filter repositories by language and topics
• Sort repositories by stars
• Clear selected filters
• Load more repositories with infinite scroll
• Uses GitHub API v3

Prerequisites

• Node.js
• npm or yarn

Tech Stack

• Next.js
• React
• TypeScript
• Material-UI for components
• react-select for multi-select dropdowns
• Axios for API requests

Installation

1. Clone the repository:

   git clone https://github.com/Sivamani-18/awesome-github-repos.git

2. Navigate to the project directory:

   cd awesome-github-repos

3. Install dependencies:

   npm install

4. Create a .env.local file in the root directory and add your GitHub token:

   GITHUB_TOKEN=your_github_token
   

5. Start the development server:

   npm run dev

If you don't have a GitHub token or don't want to use one, you can leave the GITHUB_TOKEN variable empty, but note that you will have lower rate limits.

Usage

1. Enter a search query in the search bar to find repositories by name.
2. Use the language dropdown to filter repositories by programming language.
3. Use the topics multi-select dropdown to filter repositories by topics.
4. Use the stars dropdown to sort repositories by the number of stars.
5. Click on the "Load More" button to fetch more repositories.

State

• repositories: List of repositories fetched from the GitHub API.
• page: Current page for pagination.
• loading: Boolean indicating whether data is being loaded.
• query: Search query for repositories.
• language: Selected language filter.
• sortStars: Selected sort order for stars.
• selectedTopics: Selected topics filter.
• error: Error message for failed API requests.
• languages: List of programming languages for the language filter.
• topics: List of topics for the topics filter.

Handlers

• handleSearch: Updates the search query and resets the page.
• handleFilter: Updates the selected language filter and resets the page.
• handleSortStars: Updates the selected sort order for stars and resets the page.
• handleTopicFilter: Updates the selected topics filter and resets the page.
• loadMore: Increments the page to fetch more repositories.

Contributing

Contributions are welcome! Please open an issue or submit a pull request for any changes or improvements.

License

This project is licensed under the MIT License. See the LICENSE file for details.