Awesome

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
Examples
Development
- How Does it Work?
TODO List

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.

Real-Time Collaboration

By clicking the :pencil2: icon next to the card title, multiple people can edit the Issue Body at once (ie in a meeting), and when editing is done, one person clicks <kbd>Save to GitHub</kbd>.

Features:

send anyone the link to edit
real-time preview of Markdown
references to Issues show with their state and board column
Sequence, State, Gantt, and other diagrams are supported (using mermaid)

gh-board_realtime-editing4

Filtering

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

gh-board_filters

Milestone Planning

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

gh-board_milestone-planning

Moving Cards

Cards can be dragged from one column to the next

gh-board_moving-cards

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.

gh-board_task-lists

CI Status and Merge Conflict

CI Status shows up as a green :heavy_check_mark: or a red :x: on the top-right corner of a card
Merge conflicts are shown with a yellow :warning: 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).

burnup-chart

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.

Batch-Edit Labels in Multiple Repositories

If you need to rename a column or remove a duplicate label you can get to this page from the Settings dropdown next to the filter link.

Easter Eggs

Plus, it comes with totally useful easter eggs you can unlock!

easter-eggs

Examples

Just specify a GitHub repository in the URL and off you go!

openstax/tutor-js
openstax/tutor-js + tutor-server (multiple repositories)
huboard/huboard
jquery/jquery
Or wildcards! (must be logged in) using http://philschatz.com/gh-board/#/r/openstax:tutor-js|*

Development

npm start to start up the dev server and go to http://localhost:8080
npm run build to generate the JS and CSS files in ./dist

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" gh-board uses eTags provided by GitHub and saves them in localStorage (or IndexedDB)

Hosting your own Forked Version

create a fork
switch to the gh-pages branch
make a commit and push it to gh-pages (to trigger GitHub to start hosting the files)
go to https://${USERNAME}.github.io/gh-board/