• What is this for?
• Github Data Cards
• Github Data Table
• How does it Work?
• Fetches to Github
• Fetches to Voter API
• File Structure
• Improvements
• Acknowledgments

This is a dashboard to show Github statistics for some of the most popular client-side frameworks.

There are three data cards which repesent:

1. Popularity of a framework - this is how many stars each framework has on Github.
2. Commit activity of a framework - this is based on commits over the given period of time.
3. Issue resolution ratio - this is the ratio of issues closed compared to the issues opened over the given period of time.

Why this data? I think the popularity of a framework represents a lot of intangibles - more articles, more people know about it, potentially more engineers know it (hirability), and more stack overflow questions. The commit activity speaks to the body of developer interaction that the framework still carries with it. The issue resolution ratio answers the question: if I have an issue, how likely will it be solved?

The github data table shows the source data, as well as some extra information which was included with one of the API calls for stars - so I kept it in. Although, the main focus should be on the data cards*.

*Unless you have a hardware constraint - then check out the size column in this table.

The Main Component constructor will initialize the state of the app represented in defaultState.js.

Initial fetches to Github and a fetch to the Voter API are made once the Main Component mounts. After the initial fetch, fetches will be made at a frequency set in the 'frequency' variable of defaultState.js. The number of weeks you want to pull data from is also configurable in the 'activity' variable in defaultState.

Data and the results of the fetches will be stored in the state of the Main Component. From the Main Component, the state is passed as props down to the Home Component. From the Home Component, the props are distributed to different presentational sub components - rendering is conditional on data loading and data errors.

A voter handleSubmit() method is passed from Main Component down to the Voter Submit Form Component. A voter can cast a vote with the form at the bottom of the page, and review the vote tally for a given framework in the Vote Tally table.

Voting restrictions:

• Only one vote per email
• Only one vote per browser session

For each framework, the following fetches are made to the Github API at https://api.github.com once the main component mounts, and then at a frequency set in the 'frequency' var in the defaultState.js file.

Docs for more on each endpoint:

• Search API
• Repo API
• Repo Stats

Learn more about queries for issues and PR's via the Github search endpoint here.

Votes are fetched and submitted to the voter api at https://voterstorage.herokuapp.com/.

More info on this API here.

│   App.css
│   App.js
│   App.test.js
│   index.css
│   index.js
│   serviceWorker.js
│   setupTests.js
│
├───components
│   │   HomeComponent.js                      #main presentational component
│   │   MainComponent.js                      #container component for making all of the fetches
│   │
│   └───sub
│           GithubActivityCardComponent.js
│           GithubDataTableComponent.js
│           GithubPopularityCardComponent.js
│           GithubResolutionCardComponent.js
│           StatsRowComponent.js
│           VoteSubmitFormComponent.js
│           VoteTableComponent.js
│
└───data
        baseUrls.js                           #URL's for API's 
        defaultState.js                       #init state of the UI 

• Add testing
• Add workflow
• Consolidate components for data tables into one (for a more modular approach)
• Review data structure and improve
• Add a voter reset button
• Set a time limit on when voting opportunity closes
• More descriptive error message when an email has already been used
• Add a button to configure how many weeks of data you want to view (tie it to the 'activity' var in defaultState.js)
• Pass specific props into the cards/table
• Possibly remove catches in error handling, and simply throw exception
• Utilize this for base URLs

• React - The web framework used
• reactstrap - for styling

• Sammy Dowds - Initial work - Profile

Github is an amazing resource and offers great documentation. Thank you to a great team at Github!

Main docs that I used are here:

• Search API: https://developer.github.com/v3/search/ (Used for finding the issues) powerful
• Repo API: https://developer.github.com/v3/repos/ (Used for pulling the static data - stars, size, etc)
• Repo Stats: https://developer.github.com/v3/repos/statistics/ (Used for pulling the activity data)

For deployment - the mars buildpack is essential, and amazing.

• Link: https://elements.heroku.com/buildpacks/mars/create-react-app-buildpack