Stack

• GraphQL
• Next.js
• Netlify/Vercel
• GraphQL server
  • ApolloServer Helix,
  • Envelop Yoga
• Relay
• Bulma ChakraUI
• React
• Storybook
• Chromatic
• Typescript
• Jest
• Storyshots

Purpose

List the (feature) branches of a GitHub repository with its last commit's

• build status
• linked PR
• commit message and author
• linked deployment

The idea behind this was, to provide easy access to all feature branches before releasing them. So you can test a new version of a new feature before bringing it live.

Very old presentation at a Docker Meetup: Find the slides here

Getting started

After invoking this in a shell

git clone https://github.com/lowsky/gh-dashboard-relay
cd gh-dashboard-relay

# Install the dependencies of the react app and
# installs the server's dependencies, too:
yarn

then set up the github-token (see Setup GitHub Token ) before starting local dev mode via:

yarn dev

This runs Next.js dev-mode which includes the endpoints for the graphql API.

Open the home http://localhost:3000 with your browser.

Or even better the dashboard project page: http://localhost:3000/relay/lowsky/gh-dashboard-relay

Built-in GraphQL-backend

GraphIql Playground: http://localhost:3000/api/graphql

for using and playing with different graphql queries, e.g.: (use this link with query

{
    github {
        user(username: "lowsky") {
            login
            avatar_url
        }
        repo(ownerUsername: "lowsky", name: "dashboard") {
            name
            branches {
                name
            }
        }
    }
}

Have fun!

setupGithubToken

You need to create your own github-token (see https://github.com/settings/tokens/) and store it locally in .env file

# create an .env file with this content ...

GITHUB_TOKEN=XXX

# ... and replace the XXX with your API key
# typically something like ghp_....

ScreenShot

Background

This project was used to figure out and to demonstrate, how to develop a frontend UI with Facebook's Relay and GraphQL libraries.

For deep interns of GraphQL concepts, see the presentation at the EnterJS Conference 2016 with its slide sources

License

Licensed under the Apache License 2.0, Copyright ©️ 2018 Robert Hostlowsky. See LICENSE for more information.