Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/madhurimarawat/github-repository-lister
An HTML, JS, and Bootstrap-based web application that dynamically lists GitHub repositories and topics based on user input.
https://github.com/madhurimarawat/github-repository-lister
about-page-html api-client api-fetch-data api-fetch-javascript bootstrap css deployed descriptions easy-to-use frontend-web-development github github-pages github-repositories-stars github-repository github-repository-management html innovative-interfaces js netlify user-profile
Last synced: about 14 hours ago
JSON representation
An HTML, JS, and Bootstrap-based web application that dynamically lists GitHub repositories and topics based on user input.
- Host: GitHub
- URL: https://github.com/madhurimarawat/github-repository-lister
- Owner: madhurimarawat
- License: mit
- Created: 2024-01-18T16:19:54.000Z (10 months ago)
- Default Branch: main
- Last Pushed: 2024-08-04T13:26:52.000Z (3 months ago)
- Last Synced: 2024-08-05T08:42:37.136Z (3 months ago)
- Topics: about-page-html, api-client, api-fetch-data, api-fetch-javascript, bootstrap, css, deployed, descriptions, easy-to-use, frontend-web-development, github, github-pages, github-repositories-stars, github-repository, github-repository-management, html, innovative-interfaces, js, netlify, user-profile
- Language: HTML
- Homepage: https://madhurimarawat.github.io/GitHub-Repository-Lister/
- Size: 236 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# GitHub-Repository-Lister
An HTML, JS, and Bootstrap-based web application that dynamically lists GitHub repositories and topics based on user input.
Website Design
## Technology Used 💻
### 🛠 Languages and Tools :
## Description
- **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.
---
## Mode of Execution Used 
Notepad++
- 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.
## Hosting With Netlify
1. Visit the official website of Netlify :
2. Now make an account with GitHub.
3. Now add all the code in Github repository.
4. Go to netlify and there is an option for new deployment.
5. 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.
6. We can also do manual deployment of our website by uploading in netlify manual uploads.
7. If everything went well our website will be deployed on web and you can share the link and access the app from all browsers.
8. Now netlify only supports static website. It does not have a server and it does not support websites with server requirement.
9. We can upload HTML,CSS and JS files in netlify.
---
## Working
- **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.
---
## Directory Structure 🗃️
```
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
```
---
## Website Link
I have hosted this Website using netlify. Click on the image below to have a look at my Website:
---
## Additional Resources
For more Frontend Development codes visit my repository: https://github.com/madhurimarawat/Website-Frontend-Developement
---
## Thanks for Visiting 😄
- Drop a 🌟 if you find this repository useful.
- If you have any doubts or suggestions, feel free to reach me.
📫 How to reach me: [](https://www.linkedin.com/in/madhurima-rawat/)
- **Contribute and Discuss:** Feel free to open issues 🐛, submit pull requests 🛠️, or start discussions 💬 to help improve this repository!