Skip to content

This project is a web application built with Next.js, React, and Material-UI that allows users to search and browse public GitHub repositories. The application supports both authenticated and unauthenticated requests to the GitHub API, improving rate limits when a GitHub token is provided.

License

Notifications You must be signed in to change notification settings

Sivamani-18/awesome-github-repos

Repository files navigation

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.

About

This project is a web application built with Next.js, React, and Material-UI that allows users to search and browse public GitHub repositories. The application supports both authenticated and unauthenticated requests to the GitHub API, improving rate limits when a GitHub token is provided.

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published