Create a dashboard for GitHub activity

To create a dashboard for GitHub activity, we can use a combination of GitHub’s API and front-end frameworks to display real-time or historical activity of repositories, commits, pull requests, issues, and more. Here’s an outline of how to create a GitHub Activity Dashboard:

1. Prerequisites

• GitHub API Access: You will need an OAuth token from GitHub to access private repositories and fetch user activity.

• Frontend Framework: React, Vue, or plain HTML/JavaScript for the UI.

• Backend (Optional): You can use Node.js, Python, or any server-side language to fetch and process data from GitHub if needed.

• Libraries/Tools: Axios (for API calls), Chart.js/D3.js (for displaying graphs and activity charts), and Bootstrap (for UI components).

2. GitHub API Overview

To fetch GitHub activity, you’ll use the GitHub REST API. Here are some useful endpoints:

• User Repositories: /users/:username/repos
  Get the list of repositories owned by a user.

• Repository Activity (Commits): /repos/:owner/:repo/commits
  Get a list of commits for a repository.

• Pull Requests: /repos/:owner/:repo/pulls
  Get the list of open pull requests for a repository.

• Issues: /repos/:owner/:repo/issues
  Get a list of issues for a repository.

• User Events: /users/:username/events
  Get the list of public events for a user (e.g., stars, issues, commits).

3. Setting Up the Project

Step 1: Frontend Setup (React Example)

bash
CopyEdit
npx create-react-app github-dashboard
cd github-dashboard
npm install axios react-chartjs-2 chart.js

Step 2: Fetch Data from GitHub API

In your src/App.js, add the following code to fetch and display GitHub activity:

javascript
CopyEdit
import React, { useEffect, useState } from 'react';
import axios from 'axios';
import { Line } from 'react-chartjs-2';
import { Chart as ChartJS } from 'chart.js/auto';

function App() {
  const [activityData, setActivityData] = useState([]);
  const [repos, setRepos] = useState([]);
  const [username, setUsername] = useState('octocat'); // Replace with dynamic username input

  // Fetch GitHub Repos and Activity
  useEffect(() => {
    async function fetchGitHubData() {
      try {
        const repoResponse = await axios.get(`https://api.github.com/users/${username}/repos`);
        setRepos(repoResponse.data);

        const eventsResponse = await axios.get(`https://api.github.com/users/${username}/events`);
        setActivityData(eventsResponse.data);
      } catch (error) {
        console.error("Error fetching data", error);
      }
    }

    fetchGitHubData();
  }, [username]);

  // Prepare chart data
  const commitData = activityData.filter(event => event.type === 'PushEvent');
  const commitsByDay = commitData.reduce((acc, event) => {
    const day = new Date(event.created_at).toLocaleDateString();
    acc[day] = (acc[day] || 0) + 1;
    return acc;
  }, {});

  const chartData = {
    labels: Object.keys(commitsByDay),
    datasets: [
      {
        label: 'Commits',
        data: Object.values(commitsByDay),
        fill: false,
        borderColor: 'rgb(75, 192, 192)',
        tension: 0.1,
      },
    ],
  };

  return (
    <div className="App">
      <h1>GitHub Activity Dashboard for {username}</h1>

      <div>
        <label>
          Enter GitHub Username:
          <input
            type="text"
            value={username}
            onChange={(e) => setUsername(e.target.value)}
          />
        </label>
      </div>

      <h2>Repositories</h2>
      <ul>
        {repos.map(repo => (
          <li key={repo.id}>
            <a href={repo.html_url} target="_blank" rel="noopener noreferrer">{repo.name}</a>
          </li>
        ))}
      </ul>

      <h2>Commit Activity (Last 7 Days)</h2>
      <Line data={chartData} />
    </div>
  );
}

export default App;

4. Backend (Optional for Authentication and Caching)

If you need to authenticate using a GitHub OAuth token (for private repositories or higher rate limits), you can set up a backend using Express.js or Flask. Here’s a simple Node.js Express backend:

javascript
CopyEdit
const express = require('express');
const axios = require('axios');
const app = express();

const GITHUB_TOKEN = 'your-oauth-token';

app.get('/github/repos/:username', async (req, res) => {
  try {
    const { username } = req.params;
    const response = await axios.get(`https://api.github.com/users/${username}/repos`, {
      headers: {
        Authorization: `Bearer ${GITHUB_TOKEN}`,
      },
    });
    res.json(response.data);
  } catch (error) {
    res.status(500).send('Error fetching data');
  }
});

app.listen(3000, () => {
  console.log('Server is running on http://localhost:3000');
});

5. Enhancing the Dashboard

You can add more features to the dashboard:

• Activity Feed: Show recent GitHub activity like starred repositories, opened issues, pull request reviews.

• Contributions Calendar: Visualize the contribution streak and calendar from the GitHub profile.

• Graphs: Display graphs for open issues, pull requests, commits, or contributions over time using libraries like Chart.js or D3.js.

• Search and Filter: Allow users to filter activity by repo, type of activity, and time range.

6. Deployment

To deploy the dashboard:

• Frontend: Use services like Netlify, Vercel, or GitHub Pages.

• Backend (if using): Host on platforms like Heroku, DigitalOcean, or AWS EC2.

Conclusion

With the steps above, you’ll have a functional GitHub activity dashboard. You can customize it further by adding more data points, improving the UI, or integrating additional GitHub metrics like issue comments, pull request status, or code reviews.