Skip to content

dummy-co-der/Assignment

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

5 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

GitHub Repositories Viewer

GitHub Repositories Viewer is a user-friendly web application designed to help users explore GitHub repositories effortlessly. Whether you want to discover a user's repositories, search for specific projects, or customize the display based on your preferences, this application has you covered.

Features

1. User Information Display

  • Enter a valid GitHub username to fetch and display detailed user information.
  • The user's avatar, username, location (if available), and bio are presented in an aesthetically pleasing format.

2. Repository Display

  • Fetch and display a paginated list of the user's repositories.
  • Each repository card includes key details such as the repository name, description (if available), and additional information like topics and programming language.
  • Responsive design ensures optimal viewing on various screen sizes.

3. Pagination

  • Implementing pagination allows seamless navigation through different pages of repositories.
  • Customize the number of repositories displayed per page using a dropdown menu for a personalized viewing experience.

4. Repository Search

  • Search for specific repositories by entering a repository name in the search input field.
  • Dynamically update the displayed repositories based on your search query.

5. Responsive Design

  • The application is designed to be responsive, providing a seamless experience on desktops and mobile devices.
  • User information and repository cards adapt to different screen widths for optimal viewing.

6. Loading Indicator

  • A loading spinner provides visual feedback while fetching data from the GitHub API.
  • Ensures a smooth and responsive experience during data retrieval.

Snapshots

Center Image


Mobile screen Tab screen

How to Use

  1. Open the application in a web browser.
  2. Enter a valid GitHub username in the designated input field.
  3. Click the "Get Repositories" button to fetch and display the user's information and repositories.
  4. Optionally, use the repository search input to filter repositories by name.
  5. Customize the number of repositories displayed per page using the dropdown menu.
  6. Navigate through different pages of repositories using the pagination controls.

Technologies Used

  • HTML
  • CSS
  • JavaScript
  • Bootstrap 4
  • Font Awesome
  • GitHub API

Setup

  1. Clone the repository to your local machine.
  2. Open the index.html file in a web browser.

Credits

  • This application utilizes the GitHub API to retrieve user and repository information.
  • Bootstrap and Font Awesome are used for styling and icons.