An HTML, JS, and Bootstrap-based web application that dynamically lists GitHub repositories and topics based on user input.
-
User-Centric Profiles: Detailed GitHub user profiles are presented with profile images, bios, locations, followers, and all public repositories, displayed for clarity and impact.
-
Repositories Sorted by Stars: All repositories are organized by their star count, providing insight into the most popular and noteworthy projects.
-
Intuitive Pagination: Pagination controls are included for smooth navigation through repositories, ensuring an efficient browsing experience.
-
Dynamic Loading Animation: A dynamic loading animation engages users while data is being fetched, maintaining a visually appealing interface.
-
Unified Visual Design: The interface features a polished and cohesive design with consistent colors, subtle shadows, and stylish buttons, delivering a professional experience.
-
Dedicated GitHub Toolkit: A dedicated toolkit page offers in-depth insights into GitHub, featuring detailed descriptions, repository stars, and graphics to enhance data visualization.
-
Enhanced Graphics Area: A visually appealing graphics section uses clean design elements to make GitHub statistics and trends easily understandable.
-
Comprehensive Repository Details: Displays detailed information for each repository, including license, stars, deployments, forks, last updated, language, pull requests, commits, and issues. The layout adapts to a two-column format on larger screens and a single column on mobile devices for optimal readability.
-
API Rate Limit Notice: Due to GitHub's API rate limit of 60 requests per hour, some data may not be available after this limit is reached. Please try again after one hour.
- To begin, visit the official website
- Download according to the platform being used like Linux, MacOs or Windows.
- Follow the setup wizard.
- After setup, we can write code in HTML and also in other languages.
- To see the output of HTML code open document in any browser.
- Visit the official website of Netlify :
- Now make an account with GitHub.
- Now add all the code in Github repository.
- Go to netlify and there is an option for new deployment.
- Link with your Github repository name and make sure you have the index.html file for homepage. If you name your file as index it will directly access it else you have to specify the path.
- We can also do manual deployment of our website by uploading in netlify manual uploads.
- If everything went well our website will be deployed on web and you can share the link and access the app from all browsers.
- Now netlify only supports static website. It does not have a server and it does not support websites with server requirement.
- We can upload HTML,CSS and JS files in netlify.
-
GitHub Integration:
- Fetches repositories from specified GitHub users and topics using JavaScript.
-
Frontend Development:
- Developed with HTML, CSS, and Bootstrap for a clean and responsive user interface.
-
Deployment:
- Easily deployed using Netlify, ensuring accessibility and continuous updates.
-
About Page:
- Explore the details about GitHub on GitHub Toolkit page.
Github-Repository-Lister/
├── index.html # Main landing page of the github repository lister website
├── About.html # Page dedicated to github toolkit
│
├── css/
│ ├── index.css # Stylesheet for index.html
│ └── about.css # Stylesheet for about.html
│
├── js/
│ ├── index.js # Script to dynamically fetch user and repository details
│
├── LICENSE # MIT License file
│
└── README.md # Documentation file for the repository
I have hosted this Website using netlify. Click on the image below to have a look at my Website:
For more Frontend Development codes visit my repository: https://github.com/madhurimarawat/Website-Frontend-Developement
- Drop a 🌟 if you find this repository useful.
- If you have any doubts or suggestions, feel free to reach me.
📫 How to reach me:
- Contribute and Discuss: Feel free to open issues 🐛, submit pull requests 🛠️, or start discussions 💬 to help improve this repository!
