Morioh
Login
Avav Smith

Avav Smith

3 years ago

Dashboard to provide a quick overview of Open Source projects in Github

Open Source Github Dashboard

Design Feedback:

  • Summary Card: split it into 3 sections ( justify-content: space-around;)
  • Font is different
  • Color not blend correctly.
  • Increase text on the message of the Section

logo

A Dashboard to have a quick overview of Open Sources projects in your Github account

Powered by Grommet.

Live app ✨

// check Pipedream!

What does it include? 📦

  • Responsive Design
  • Simple login with Github
  • GraphQL API Github
  • Project list powered by Github Gist

This project can be used in two ways:

Screenshots 🖼

Desktop Tablet Mobile
Desktop Tablet Mobile

Basic setup ⚙️

Requirements 📝

  • Have a Github account.
  • Have at least one project linked to that account (can be private or public).

Steps 🏃‍♂️

  1. Go to Github Gists.
  2. Create a new file with the name of oss-projects.json.
  3. Inside the content of the file add a plain list containing the name of the project that you want to add to the dashboard. Example:
{
  "projects": [
    "MyUser/project-a",
    "MyUser/project-b",
    "AnotherCompany/another-project"
  ]
}
  1. Open live app and click on Log in with Github.
  2. Accept permissions and you should be able to see the dashboard with the information of your projects ✨

Host your own Dashboard 🙆‍♂️

The main difference with the live app is that login is not needed anymore in order to see the projects and there is no logout option. However the deployed application will show the projects of only one user, because there is no logout option 😅

You can check my Open Source Dashboard ✨

Benefits of following this approach:

  • You can showcase your projects to other by simply sharing a link, because your user is already logged in.
  • Setting alerts when the amount of pull requests or issues are more than expected. Please check Setting alerts for more information.

Steps 🏃‍♂️

  1. Go to your Github Developer Settings, create a new Auth token and copy its content.
  2. Fork the project or make use of Use Template feature in Github.
  3. Create a .env file in the root of the project with the following information
NODE_PATH=./src
REACT_APP_GITHUB_ACCESS_TOKEN=<<REPLACE_WITH_YOUR_TOKEN>>
  1. Install dependencies by running yarn and then yarn start to start the server.

NIT: This project is using react-scripts v2, which can build your project and export a static website, so you can easily deploy it anywhere! I recommend building it with Netlify because it provides a nice set of tools and it has a great integration with Github.

Setting automatic alerts

Oh great, you decided to host your own Open Source Dashboard 💪 One of the great advantages is that you can set up periodically builds with any CI (Travis, CircleCI, etc.) which will check can if the amount of Pull Requests or Issues is greater than your expected. Ideal for maintainers with several projects. At the moment, this feature only check the total amount of both values.

In this case I’m using Travis CI to run the automatic tests.

Steps:

  1. Add the property threshold into your oss-projects.json with the properties of pullRequests and issues.
{
  "projects": [
    "MyUser/project-a",
    "MyUser/project-b",
    "AnotherCompany/another-project"
  ],
  "threshold": {
    "pullRequests": 10,
    "issues": 5
  }
}
  1. Add your project to travis and add the same environment variables as in the previous step: NODE_PATH and REACT_APP_GITHUB_ACCESS_TOKEN
  2. Set up Cron job to run the time you want, I recommend to run it every week.

Alerts

The CI is going to run two scripts:

  • yarn build: which is checks that the static website can be generate it successfully.
  • yarn test:ci: check if the amount of PRs and issues are greater than the threshold define inside the configuration.

In case any of these scripts failed, then it’s going to notify the owner of the Travis account via email and remind you to keep your open source projects up to date 😄

Development 🛠

Component Shadowing out of the box 🤯

Inside the Webpack configuration you can find the plugin of enhanced-resolve that allows to reference an alias with one or more possible directories. This gives to the product a similar to shadowing in Gatsby.

Example

// webpack.config.js

config.resolve.plugins = [
  new AliasPlugin(
    'described-resolve',
    [
      {
        name: 'components',
        alias: ['src/components', 'node_modules/my-dep/src/components'],
      },
    ],
    'resolve',
  ),
];

// src/example.js
import MyCoolComponent from 'components/myCoolComponent`;

export default () => <MyCoolComponent />

The plugin will first look into the first alias provided, my local src folder, if the file is present then it will require that one. Otherwise it will go to the next alias, until the chain ends.

This feature is quite handy when you are working with templates like argon-dashboard-react.

Contribution 💪

I’m always open for Pull Requests and Issues, so don’t be afraid of collaborating!

Download Details:

Author: EmaSuriano

Demo: https://oss-dashboard.netlify.app/

Source Code: https://github.com/EmaSuriano/oss-project-dashboard

#reactjs #javascript #react

Dashboard to provide a quick overview of Open Source projects in Github
3.40 GEEK