GitHub Repo Viewer

Overview

• Seamlessly view a GitHub user's profile information and public repositories in a visually appealing and user-friendly interface.
  
• Fetches data directly from the GitHub API for real-time updates.
  
• Navigate through multiple pages of repositories with ease using pagination.
  

Live Demo

Explore the project here: https://omvibhandik.github.io/Fyle-GitHub_RepoViewer/

Technologies Used

• HTML
  
• CSS
  
• Bootstrap
  
• JavaScript
  
• GitHub API
  

Setup and Installation

1. Clone or download the repository from GitHub.
   
2. Open index.html in a web browser to start using the application.
   
3. No additional setup or libraries are required.
   

Usage

1. Upon launch, the application displays a loading screen while fetching data.
2. Once data is retrieved, the user's profile information and repositories are presented.
3. Navigate between pages of repositories using the pagination links located below the repository list.

Project Structure

• index.html: Main HTML file defining the structure of the application.
  
• index.css: Contains styling rules for the application's visual appearance.
  
• index.js: Houses the JavaScript code responsible for functionality and interaction with the GitHub API.
  

Features

User Information:

• Displays the user's profile picture, name, bio, location, and Twitter link (if available).
  

Repository Display:

• Lists repository titles and descriptions in a clear and organized manner.
  
• Highlights the programming languages used in each repository with buttons for easy identification.
  

Pagination:

• Browse through multiple pages of repositories using Bootstrap's pagination component.
  

Code Logic Breakdown

• loadPage function:

• Fetches repository data from the GitHub API.
• Renders repositories on the page in a grid format.

• userAction function:

• Fetches user data from the GitHub API.
• Updates the page with user information.
• Calls loadPage to display repositories.

• Pagination:

• Implemented using Bootstrap's pagination component.
• Event listeners handle page navigation.

Additional Notes

Currently, the application displays repositories for a hardcoded GitHub username (OmVibhandik).