ivanseed/gitstats

Source code for gitstats.io

GitStats

Introduction

A simple PreactJS app that uses the GitHub search API to display repositories in a list.

Live site: https://gitstats.io

Features

• Search for github repositories by name.

• Details like such as the number of forks, number of stars and a short description of each repository are shown.

• The repositories can be sorted in ascending/descending order based on number of stars or forks or the last updated time.

Setup for Development

Please make sure that node js is setup on the dev machine by running the command below:

npm -v

If not installed, download and install node from here: https://nodejs.org/en/

Run the command below to install the required dependenices:

npm install

To run the app on your local machine use the command below:

npm run start

Deploying

To deploy I run the build step and move the new js and css files to the docs folders which is the root GitHub pages folder. However please do not commit changes to the docs folders as I will do this manually.

Running with Docker

If you are comfortable using Docker, you can build this image.

The only command to build this image is:

docker build -t gitstats:development .

If the image fails on the building process, check out the log, could be failing tests.

Once the image is built, you can run it:

docker run -d -p 8080:8080 gitstats:development

Docker Compose

You can run this image using the docker-compose.yml file.

docker-compose up -d

External Libraries Used

• axios
• data-fns
• preact-helmet
• node-emoji
• react-octicons

Additional Resources

• https://preactjs.com/

License

MIT License Copyright (c) 2017 Ivan Seed

gitstats's Issues

Feature: Replace Nprogress with a React loader component

At the moment I am using nprogress for the top loading bar, however, this is not ideal as it directly accesses document and really everything should be going through the VDOM.

Write your own component, or find a 3rd party React component that achieves the same results as the current implementation of the loading bar. It should keep/be as close as possible to the same visual effect.

Reduce bundle / build size

Currently the build size is over 400kb! Preact should be tiny, I am not sure why this is so big. Try reduce the bundle size by optimising imports. Alternatively find out what is taking so much space!

QoL: Add MIT licence

Need someone to add the licence to the repository! Please follow the MIT template;

https://choosealicense.com/licenses/mit/

Please put the full name as "Ivan Seed"

Bug: filter radio buttons on iOS show a visual bug

On iOS Safari the filter buttons display along with a radio checkbox.

Example:

Improve footer

• Add CSS/styling for footer hyperlinks when focusing them.
• Dynamically generate list of contributors via GitHub API.

Improve CSS/Styling of site

There are a few improvements I was thinking of, but feel free to send a PR of anything you think will complement the site.

• Font size of stars, forks and issues seems a bit out of scale with the rest of the tile.
• Filter by language could perhaps do with some more love, maybe an icon and a better drop down arrow?
• I feel like there should be more of an animation when using the search bar or clicking on a button.

Improve test coverage/add unit tests

Add unit tests

Bug: Fix npm test command

When I ran npm test I got the following error: Cannot find module 'babel-eslint'
I proceeded to install eslint and babel-eslint, but npm install failed with:
Cannot read property '0' of undefined
Then, after trying 3 times, somehow eslint was installed and I could run the tests.

However, this does cause the travis build to fail and it's pretty inconvenient.
I think it's some weird thing with de deps

Add more useful stats to the tiles

Is there anything else that could be added onto the tiles that is interesting? At the moment we only show the name of the repo, description, basic stats and last updated. Is there anything else we can show?

Bonus points if you somehow get some cool graphs in.

Improve CSS of search drop down menu

Improve the CSS/Styling of the drop down menu that allows you to select a language to filter by. Make it more aligned with the over components on the page.

Add support for GitHub emojis

The description of some of the projects coming from the API include github emojis. However they are currently not being rendered, find a way to render them!

QoL: Improve the readme

The readme is very bare. Please add information on what this app does, and how to get the development environment up and running.

Feature: Replaces icons with Octicons

Replace/refactor code to allow for the use of Octicons.

https://octicons.github.com/

Make the loading bar visual more smooth

The loading bar effect when switching filter seems a bit jaggered also seems to load backwards somehow? Improve the loading visual.

Feature: add drop down to additionally filter by language

There should be a drop-down menu that allows a user to select one of the popular languages on GitHub. This filter should additionally work with the 3 buttons so we should be able to filter by stars + language for example.

Dockerize the application

• Add the ability to run using docker
• Update README

Bug: Filtering by last updated does not seem to show the latest repositories to be updated

When filtering by last updated it does not seem to produce the correct list. Investigate if the endpoint being called is correct and amend accordingly. If this cannot be fixed update the README.md to include why the last updated filter does not work as it should.

Idea: Add Machine Learning

Question

While contributing to this project I noticed there was a auto-refresh inside it, every time when I save a file the server reloads the page. How does this work? As This was very usefull while working on some css.
I hope someone can explain me this 😮

QoL: Improve/Refactor existing code

The code is rushed and messy. If you have any improvements feel free to contribute better design patterns.

Feature: Improve/replace the font

The font just doesn't seem to fit that well, could just be me being picky. Feel free to replace the font with one that looks better! Please restrict to using at max 3 fonts, there is no base HTML file so the fonts are currently imported through the CSS files.

Add CHANGELOG.md

Feature: show language of repo on the tiles

On the tiles, the language of the repository should be displayed. This data is already in the response from the request. I am thinking this could go in between date and stats, however, you can visually design it however you like if you have a better idea.

Feature: add a site footer

Add a footer that fits in with the style of the site. It must contain a link to this repository, you have full creative control.

Bonus:
Add the list of contributors to this project in the footer.

Update footer with link to Github and License

So the footer already links to GitHub with the text 'GitStats' however I want a small a small bit of text under that, before the contributor list that says something along the lines of 'Fork me on GitHub' which will be the hyperlink to this repo instead of the current implementation.

Also on the same line or a new line, which ever you think looks better; add link to the MIT licence. Text would look something like "MIT License Copyright (c)" or something along those lines. Whatever you think looks best.

Add new favicon

Create a new Favicon for gitstats.io that is more appropriate

Question regarding sorting based on Last Modified Date/Time

I have observed that the repositories are not sorted in the descending order of last modified date/time. The repo updated on 4th October is displayed between two repositories on October 8th as shown in the screenshot below. Many such instances can be seen.

@ivanseed Could you please check this and confirm if this is an issue or if I am missing something. Thank you.

Bug: Fix console error when resizing window

Currently when resizing the window we see this error in the console:

progress.js?d49e:46 Uncaught TypeError: this.setState is not a function
    at updateWindowDimensions (progress.js?d49e:46)

Feature: Improve app SEO

Would be good if we could at least have a meta description. Not sure on what the best way to do this without a base HTML template.

CI Integration with Travis