StroopWafel

Serverless Kanban Board for GitHub Issues

Why waste time and money paying for a Ticket Tracker when you already work in GitHub? Now, you don't have to.

• Features
  • Multiple Repositories
  • Linked Issues and Pull Requests
  • Filtering
  • Milestone Planning
  • Moving Cards
  • Task Lists
  • CI Status and Merge Conflict
  • Issue Images
  • Pull Request to non-default branch
  • Burnup Chart
• Development

Features

Multiple Repositories

Multiple Repositories in an organization can be shown on a board (from different organizations too!). The repository is shown in gray next to the Issue number.

Linked Issues and Pull Requests

Just add #123 or orgName/RepoName#123 to the Issue or Pull Request body and linked Issues will show up with the column they are in, both below the Card and in the preview popup.

Filtering

• cards can be filtered by label, milestone, board column, or user
• filters can be inclusive as well as exclusive

Milestone Planning

When doing Milestone (or Sprint) planning there is a view to easily move cards into milestones

Moving Cards

Cards can be dragged from one column to the next

Task Lists

By using the - [ ] notation in the body of an Issue or Pull Request, the progress of an Issue is shown in the top-right corner of a Card.

CI Status and Merge Conflict

• CI Status shows up as a green ✔️ or a red ❌ on the top-right corner of a card
• Merge conflicts are shown with a yellow ⚠️ and have a diagonal striped background

Burnup Chart

Why Burnup instead of Burndown?

Shows a burnup chart for a Milestone (ie "Sprint" or "Iteration"). If you use select multiple repositories it will include all of them.

It also skips when nothing was opened or closed that day/month/year (useful to see weekends or holidays).

Issue Image

If an Issue or Pull Request contains an image then it will be shown in the Issue

Pull Request to non-default branch

Sometimes Pull Requests go to a branch other than the main branch. This makes it clear when that happens.

Development

• npm start to start up the dev server and go to http://localhost:8080

How Does it Work

• JavaScript calls the GitHub API and pulls in the Issues for a given repository.
  • Since there is no server to do OAuth, people need to provide a GitHub token which is stored in localStorage
• It uses the first repository to get the Issue Labels and Milestones.
• There are special Labels which represent the board columns (in the format # - Column Title)
• To be a "Good API Citizen" StroopWafel uses eTags provided by GitHub and saves them in localStorage (or IndexedDB)

Hosting your own Forked Version

1. create a fork
2. run npm run deploy
3. go to https://${USERNAME}.github.io/StroopWafel/

To make edits and push them up on GitHub

1. make edits in the src directory in master
2. commit your changes
3. run npm run deploy

To update your fork with the upstream (this repo)

1. git pull https://github.com/mathieudutour/StroopWafel.git master
2. run npm run deploy