React Sprint Report Dashboard

A comprehensive Sprint Reporting dashboard built with React, Recharts, and the GitHub GraphQL API. This tool visualizes Sprint Burndown charts, handles scope creep dynamically, and displays team performance metrics.

Table of Contents

• About The Project
• Getting Started
  • Prerequisites
  • Installation
• Configuration
  • 1. GitHub Project Board Setup
  • 2. GitHub Access Token
  • 3. Application Setup
• Usage
• Contributing
• License

About The Project

This project provides a powerful and interactive dashboard to visualize your team's sprint progress. By connecting directly to the GitHub API, it generates a real-time burndown chart, tracks scope changes, and gives you a clear overview of your team's performance throughout a sprint.

This tool is perfect for Scrum Masters, Product Owners, and development teams who want to:

• Visualize sprint progress with an interactive burndown chart.
• Dynamically track scope creep.
• Get a clear overview of team performance.
• Automate sprint reporting.

Getting Started

To get a local copy up and running follow these simple steps.

Prerequisites

This project requires Node.js and npm. You can download them from nodejs.org.

• npm

  npm install npm@latest -g

Installation

1. Clone the repo

   git clone https://github.com/your_username_/your_repository_name.git

2. Install NPM packages

   npm install

Configuration

To use the dashboard, you need to configure your GitHub project board and generate a personal access token.

1. GitHub Project Board Setup

This dashboard is designed to work with GitHub Projects (Projects V2), which can be set up as an iterative board.

1. Create a New Project:

   • Navigate to your GitHub organization or user profile.
   • Go to the Projects tab and click New Project.
   • Select the "Board" template.

2. Add Custom Fields: Your project board must have the following custom fields. To add them, click the + icon in the table header.

   • Iteration (Required):
     • Select the Iteration field type. You can rename it to "Sprint" if you prefer.
     • Configuration: Set the duration (e.g., 2 weeks) and the start date for your sprints. This is crucial as the dashboard uses these dates to identify the current sprint.
   • Estimate (Required):
     • Add a Number field and name it "Estimate" or "Points". This field will be used to track the effort of your work items.
   • Status (Required):
     • Ensure your board has a "Done" column to properly track completed work.

3. Add Items to Your Sprint:

   • Add Issues or Draft Issues to your project.
   • Assign them to the current Iteration (e.g., "Sprint 3") and provide points for the "Estimate" field.

2. GitHub Access Token

You'll need a Classic Personal Access Token (PAT) to allow the application to fetch data from the GitHub GraphQL API.

1. Navigate to your GitHub Developer Settings.
2. Click Generate new token and select Generate new token (classic).
3. Scopes: Grant the following permissions:
   • repo (Full control of private repositories)
   • read:org (Read org and team membership)
   • project (Full control of projects)
4. Copy the generated token (it will start with ghp_).

3. Application Setup

Once you have your project board and token, you can configure the application.

1. Run the application locally:

   npm run dev

2. Open the dashboard in your browser and click "Configure Data".

3. Enter the following details:

   • Token: Your ghp_ token.
   • Owner: Your GitHub username or organization name.
   • Project Number: The number from your project's URL (e.g., for github.com/orgs/my-org/projects/12, the number is 12).
   • Sprint Name: The exact name of your Iteration (e.g., "Sprint 3").

4. Click Fetch & Save.

Usage

Once configured, the dashboard will display:

• Purple Line: The actual remaining points in the sprint.
• Grey Line: The ideal burndown trajectory.
• Blue Dashed Line: The total scope of the sprint. This line will rise if new work is added, showing "Scope Creep".

Contributing

Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.

1. Fork the Project
2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
3. Commit your Changes (git commit -m 'Add some AmazingFeature')
4. Push to the Branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

License

Distributed under the MIT License. See LICENSE for more information.