DEV Community

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

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

Abhishek Keshri on July 30, 2022

Introducing Projects Present all your projects in style with a super customizable web app! ✨ Projects uses the GitHub API to list all y...
Collapse
 
chamodperera profile image
chamodperera • Edited

Image description

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/

Collapse
 
2kabhishek profile image
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.

Collapse
 
chamodperera profile image
chamodperera

Ok, sure

Collapse
 
wjplatformer profile image
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.

Collapse
 
chamodperera profile image
chamodperera

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

Collapse
 
cavo789 profile image
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

Collapse
 
2kabhishek profile image
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!

Collapse
 
cavo789 profile image
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).

Thread Thread
 
2kabhishek profile image
Abhishek Keshri

That looks good!

Collapse
 
josunlp profile image
Jonas Pfalzgraf

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

Image description

Collapse
 
2kabhishek profile image
Abhishek Keshri

Nice! This is what I love about open source ✨

Collapse
 
josunlp profile image
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

Collapse
 
2kabhishek profile image
Abhishek Keshri

Yup, I released the 2.0 release sometime back

Collapse
 
bukunmikuti profile image
Bukunmi Ransome-kuti • Edited

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.

Collapse
 
2kabhishek profile image
Abhishek Keshri

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

Collapse
 
wjplatformer profile image
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!

Collapse
 
wjplatformer profile image
Wj • Edited

Your Projects are so underrated πŸ₯Ί. Anyone reading this, go star his projects πŸ™! my page

Collapse
 
2kabhishek profile image
Abhishek Keshri

Thank you! Means a lot

Collapse
 
2kabhishek profile image
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.
Collapse
 
chamodperera profile image
chamodperera

Thanks. Really helpful

Collapse
 
2kabhishek profile image
Abhishek Keshri

Hope it was useful to you

Collapse
 
chamodperera profile image
chamodperera • Edited

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

Collapse
 
2kabhishek profile image
Abhishek Keshri

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

Collapse
 
stephennn99 profile image
Stephennn99

This might be interesting.

Collapse
 
2kabhishek profile image
Abhishek Keshri

Thanks!

Collapse
 
harrybawsac profile image
Harry Bawsac

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

Collapse
 
2kabhishek profile image
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.

Collapse
 
jmfayard profile image
Jean-Michel πŸ•΅πŸ»β€β™‚οΈ Fayard

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

Great job!

Collapse
 
2kabhishek profile image
Abhishek Keshri

Thank you! glad you liked it :)

Collapse
 
batterprize profile image
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