GitHub Issues Explorer

A small client application using GitHub QraphQL API.

Getting Started

1. Get your GitHub access token

Follow the steps in Creating a personal access token to create a token.

To match the behavior of the GraphQL Explorer, request the following scopes:

user
public_repo
repo
repo_deployment
repo:status
read:repo_hook
read:org
read:public_key
read:gpg_key

Save your new access token.

2. Clone the code

git clone git@github.com:vuongvu1/github-issues-explorer.git

3. Install dependencies

(recommend)

yarn install

or

npm install

4. Add environment variables

• Create an .env file in the project root directory
• Copy the content in .env-template to the .env
• Copy your new access token in step 1 to the value REACT_APP_GITHUB_TOKEN

5. Start the application

yarn start

or

npm start

Features Introduction

1. Overview

The app has 2 main views:

• All Issues view

  Each row will show the issue brief info:

  • status icon
  • title
  • number of comments
  • issue number
  • time since created
  • author name

  

• Issue Detail view

  The issue detail page will show full info:

  • title
  • status icon and text
  • number of comments
  • issue number
  • time since created
  • author name
  • all comments and commentors
  • user comment editor

  

Support mobile

2. GitHub Repository Input Bar

User can paste any repository address into the input bar, default value is "https://github.com/reactjs/reactjs.org", the app will show the issues accordingly. If user change the repo address when viewing an issue detail, they will be automatically redirected to the All Issues view.

If user put an incorrect address, it will show an error:

3. Issue Filter

User can filter issues based on their open/closed status.

4. Pagination

The app supports basic pagination with maximum 3 pages showed and Previous and Next button.

If anything change that affects the issue view (change repo address, switch filter, refresh page...), it will go back to page 1.

5. Add Comments

User can add comments on every issues, the editor supports markdown.

The page will automatically update after user add a new comment.

6. Delete Comments

User can delete comments on every issues, noted that user can only delete their own comments or other's comments on user's issues.

The page will automatically update after user delete a comment.