I Made a Web App to Showcase all your GitHub Projects 😍✨

VIDEO LINK

Introducing Projects

Present all your projects in style with a super customizable web app! ✨

Projects uses the GitHub API to list all your GitHub projects in a nice searchable grid.
Also shows pretty programming icons using devicons.

Inspiration

Needed a way to display all my projects, used my portfolio's project section as inspiration.

Getting Projects

To get projects, follow these steps:

git clone https://github.com/2kabhishek/projects
cd projects

Setup Your Own Projects

You can easily set up projects to show your own repos.

• Fork the repo
• Clone it
• Open up script.js and update the username variable to your GitHub username.
• Open up index.html and update the title tag to make it your username.
• You may also want to update the favicon too, update the link tag in index.html
• Push your changes
• Go to repo settings on GitHub and enable GitHub Pages.

The site should be live on https://<your-username>.github.io/projects

Here's the profile for @sindresorhus

Number Of Repos

The number of repos is controlled by the maxPages variable, the GitHub API supports 100 repos per page max.
If you have less than 100 repos, set maxPages to 1, if you have 300 then 3.

You can also edit the fetch query to reduce the per page repo count.

There's no pagination, all repos are shown on the same page.

Authenticated Requests

If you are working locally and notice the API is not sending over data, it might be because of rate limit on GitHub API requests.

You can either wait for an hour or setup a personal access token on GitHub and pass that into the fetch request in script.js

Viewing projects

Open index.html in your favorite browser or visit 2kabhishek.github.io/projects.

How it was built

Projects was built using HTML CSS & JavaScript.
It was built on Neovim and the python http server.
Uses GitHub API for data and Devicons for programming icons.

What I learned

• Learned about a few quirks of the fetch API, especially implementation of maxPages.
• Flex, box-shadow and some other CSS tricks were revisited.

What's next

Add more languages to devicons if necessary.

Hit the ⭐ button if you found this useful.

2KAbhishek / projects

Showcase All Your Projects 🛍️🎇

Projects

Showcase All Your Projects 🛍️🎇

projects screenshot

Introducing Projects

Present all your projects in style with a super customizable web app! ✨

Projects uses the GitHub API to list all your GitHub projects in a nice searchable grid Also shows pretty programming icons using devicons.

Inspiration

Needed a way to display all my projects, used my portfolio's project section as inspiration.

Getting Projects

To get projects, follow these steps:

git clone https://github.com/2kabhishek/projects
cd projects

Setup Your Own Projects

You can easily set up projects to show your own repos.

• Fork the repo
• Clone it
• Open up script.js and update the username variable to your GitHub username.
• Open up index.html and update the title tag to make it your username.
• If you want to update the favicon too, update the link tag for it in index.html
• Push your changes
• Go to repo settings on GitHub and enable GitHub…

View on GitHub

Comments

[chamodperera]

I updated the UI a bit. But now it's light themed. If you like I can make a pull request. Maybe to a new branch

link - chamodperera.github.io/projects/

[Abhishek Keshri]

Looks good! I might add a theme toggle, although the CSS is pretty basic here and just updating the root variables should take care of most of the styling.

[chamodperera]

Ok, sure

[Wj]

It is possible to do a new HTML file for this specific UI (unless you changed CSS, which would be even easier) where index.html redirects to it.

[chamodperera]

Yes it is possible , but I didn't changed the index.html much.

[Christophe Avonture]

Would it be possible to add filtering and sortering options like most liked, by languages, by last update, hiding archived repos,...

This because when you have a lot of repositories, it's nice to be able to use filtering and sortering.

Thanks

[Abhishek Keshri]

Yes, it should be possible with some input tags and event listeners, the only reason I did not add it is that the repositories page on GitHub already has those capabilities.

I wanted to keep it as simple as possible, but if you want those features on your fork I'll be happy to help you any way I can!

[Christophe Avonture]

I've asked because I've, myself, do something quite similar to your code : avonture.be/. Click on the Git image (top right) to get access to the source.

That script is also using the GitHub API and different calls to bypass the limitation of 100 repos. The script is quite simple and ... I've not implemented any sortering/filter but well a table of contents (which I'm using a lot when I search a repo on my page).

[Abhishek Keshri]

That looks good!

[Jonas Pfalzgraf]

I took some time, forked the project and rebuild it in TypeScript and Sass ^^ github.com/JosunLP/projectDisplay

[Abhishek Keshri]

Nice! This is what I love about open source ✨

[Jonas Pfalzgraf]

Updated my rewrite Fork to the newest changes. Light Theme based on System settings, filtering of Forks and display of stars and Fork sum is now available ^^

github.com/JosunLP/projectDisplay

[Abhishek Keshri]

Yup, I released the 2.0 release sometime back

[Bukunmi Ransome-kuti]

This is great!
I have some suggestions. Permit me to get ambitious but I feel this can even get bigger and more fun 😀

1. Additional themes and layouts
2. Commits activities/trends and most used languages. Github stats.
3. Bringing over donations link
4. Dynamic visitors count via badges
5. A way to manipulate these options via configuration file. (just like babel.config.js)

Existing code base would require a framework and plenty of inspiration to deal with these but it would be a life saver for portfolio-lazy developers. 😀👍🏼
I might jump on with some pull requests when I get the time.

[Abhishek Keshri]

Great points, I'll look forward to those PRs!

[Wj]

I think that the stats of the user can be implemented easily with other open source such as github.com/DenverCoder1/github-rea... and many more!

[Wj]

Your Projects are so underrated 🥺. Anyone reading this, go star his projects 🙏! my page

[Abhishek Keshri]

Thank you! Means a lot

[Abhishek Keshri]

Projects 2.0 has been released:
What's Changed:

• System based themes support! Theme changes automatically depending on your settings.
• Sort your projects by star count!
• Show star and fork counts along with their links.
• Option to hide forked repositories, enabled by default. To disable set hideForks = false in scripts.js
• If project has a homepage, show two buttons instead of one.

[chamodperera]

Thanks. Really helpful

[Abhishek Keshri]

Hope it was useful to you

[chamodperera]

Yep, I tried it out. chamodperera.github.io/projects/

[Abhishek Keshri]

Please let me know if you have any feedback or need help setting this up!

[Stephennn99]

This might be interesting.

[Abhishek Keshri]

Thanks!

[Harry Bawsac]

I would suggest working with environment variables, since it’s now really easy to (accidentally) commit your personal access token.

[Abhishek Keshri]

I didn't want to introduce any node dependencies in this repo that's why it uses PATs. Even if someone commits there keys, just deleting them from github or creating the keys for very short expiry date should do.

[Jean-Michel (jmfayard.dev)]

Hey I was able to setup jmfayard.github.io/projects/ in a matter of minutes.

Great job!

[Abhishek Keshri]

Thank you! glad you liked it :)

[batterprize]

You could make a new HTML file for this particular UI (unless you changed the CSS, which would be even easier), and index.html would then point to that file. chamodperera.github.io/projects/backrooms game