AlbertSuarez / git-inspect

๐Ÿ™ GitHub user information extractor for analytics and fun

Home Page:https://asuarez.dev/git-inspect/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool


GitInspect


HitCount GitHub stars GitHub forks GitHub repo size in bytes GitHub contributors GitHub license

Demo | API Documentation | Devpost

๐Ÿ™ Do you think that you already know all about your GitHub user? Wrong answer. Git Inspect is gonna tell you. GitHub user information extractor built in MamutHack'19.

Contents

  1. Summary
    1. Inspiration
    2. What it does
    3. How we built it
    4. Challenges we ran into
    5. Accomplishments that we're proud of
    6. What we learned
    7. What's next for Git Inspect
  2. Screenshots
  3. Requirements
  4. Usage
  5. Authors
  6. License

Summary

Inspiration

The inspiration came really from a moment where we needed to know which was the language most used in our GitHub repositories, just for curiosity, and we couldn't find any website or tool able to do that on the Internet. Following the hacker spirit, we wanted to solve this concern with our own hands.

What it does

Just from a GitHub user, our website is able to retrieve all the public information from the user and from their repositories from GitHub. Once that, the website shows information such as amount of repositories, commits, percentatges of the used languages, a list of all your repositories contributors and a lot more.

Also, we wanted to extract something new and unexpected from this data: a Spotify playlist! Retrieving as much information as we can from the user commits, Git Inspect creates a music playlist based on your GitHub public activity.

How we built it

Frontend and backend are very different components connected by API requests and deployed with Docker compose.

At frontend, we can see a React and Redux application built with TypeScript. Material UI, JQuery, Node-Sass, Chart.JS and Toastr are some of the most important used libraries in order to achieve the frontend that we planned when we started the project.

In the other side of the application, we have the backend which is implemented with Python 3.7. For creating the API that allows the communication between the two components, we have used Flask and OpenAPI (connected themselves with Connexion library), integrated with Docker compose. This API is hosted using uWSGI and Nginx in a small DigitalOcean droplet.

In order to achieve the goal of the project, we've integrated two APIs: GitHub and Spotify. The first one using OAuth authentification and the second one dealing with OAuth2. In total, this project hits 6 endpoints from the GitHub API and other 5 from the Spotify API, so 11 in total.

Challenges we ran into

First of all, one member of the team had never worked with React (and even less with Redux), and the other one did very little work with backend stuff so it was kind a challenge to get out our comfort zone in order to help each other. Then, our main goal was to make something actually useful so we needed to develop a complete project, not only an script; that created several challenges like adding the functionality of the script to a website, also the website had to be intuitive and well-designed and everything had to work smoothly.

Since we wanted to deploy this project in a public domain for being used on the Internet, we were having a lot of issues trying to link the purchased domain with the Digital Ocean droplet, specially with the limit of the UAB eduroam network.

Also, as it's been known, OAuth2 authentification protocal is one of the most secure protocols (for not saying the most) but it's kinda difficult to understand and integrate properly in your application. And since we wanted to use Spotify API in this projet, we have had to deal with this stuff.

Accomplishments that we're proud of

We are really proud with the final project we have developed. It is really useful and probably we will use it in the future. Our goal was to build something cool, and it's kinda like this. Looking at the result, we think that we've achieved it.

What we learned

We have learnt how beautiful can be to be able to solve a problem with your own hands in just a weekend. Also, as we said, both of us have experience with frontend or backend but not the other one, so it was cool to learn from each other.

What's next for Git Inspect

Git Inspect could evolve easily knowing the power of the data the GitHub has. We had more ideas to add to the project, such as representing your profile with a bunch of images (in the same way as music but with images) or even generating stories with your activity with ML models such as GPT-2. However, we hadn't time for implementing these ideas.

Screenshots

This is how our project looks like unifying frontend and backend. If you want to see more, just check our live demo.

Screenshot 1 Screenshot 2 Screenshot 3 Screenshot 4 Screenshot 5 Screenshot 6 Screenshot 7

Requirements

  1. docker-compose

Usage

To run the whole stack, please execute the following from the root directory:

  1. Run the server as a docker container with docker-compose

    docker-compose up -d --build

Authors

License

MIT ยฉ Git Inspect

About

๐Ÿ™ GitHub user information extractor for analytics and fun

https://asuarez.dev/git-inspect/

License:MIT License


Languages

Language:TypeScript 52.1%Language:Python 32.5%Language:CSS 12.0%Language:HTML 2.5%Language:Dockerfile 0.9%