https://github.com/dfrho/graphql-github

🚩GraphQL | React GitHub repo issue checker
https://github.com/dfrho/graphql-github

es6 github-api graphql javascript react styled-components

Last synced: about 2 months ago
JSON representation

🚩GraphQL | React GitHub repo issue checker

• Host: GitHub
• URL: https://github.com/dfrho/graphql-github
• Owner: dfrho
• Created: 2019-10-29T01:45:49.000Z (about 5 years ago)
• Default Branch: master
• Last Pushed: 2023-02-16T06:19:31.000Z (almost 2 years ago)
• Last Synced: 2023-03-08T09:06:26.404Z (almost 2 years ago)
• Topics: es6, github-api, graphql, javascript, react, styled-components
• Language: JavaScript
• Homepage: https://gleeful-squirrel-3320fa.netlify.app/
• Size: 1.46 MB
• Stars: 1
• Watchers: 2
• Forks: 0
• Open Issues: 22
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# React GraphQL GitHub Repo Issue Checker

[Deployed](https://gleeful-squirrel-3320fa.netlify.app/)

Consuming the GraphQL-based Github API, users can browse Github issues (and first three emoji reactions, if any) by entering an organization's repo name. Assumes a forward slash between both fields, as in "facebook/create-react-app".

![app screenshot](./public/screenShot.png)

With poor form validation and a very basic front-end, this is still a great practice application for learning GraphQL under-the-hood while understanding the value of a GraphQL library like Apollo. Mainly because we're not using a GraphQL library to interact with the server but rather axios and regular HTTP requests, and we're not cacheing results yet. This project is based on Robin Wierich's [The Road to GraphQL](https://roadtoreact.com/course-details?courseId=THE_ROAD_TO_GRAPHQL).

The app assumes the user is a GitHub user and can search for organization and repo combinations. Features include

-   default display of five most recent open issues,

-   pagination,

-   starring and unstarring the repo,

-   total star count inside star toggle button

## Available Scripts

`git clone` this repo, then `cd react-graphql-github-vanilla` into the project directory, and run:

### `yarn` or `yarn install`

### secure your environment with api key

In the project root directory (next to src folder), run `touch .env`. Open the file then enter your new Github Personal Access Token created using [this guide](https://help.github.com/en/github/authenticating-to-github/creating-a-personal-access-token-for-the-command-line) as :

`REACT_APP_GITHUB_PERSONAL_ACCESS_TOKEN=abcdthisisnotarealkey1245679` (no string quotation marks).

Add `.env` to your .gitignore to avoid broadcasting your secure key to the universe.

Then start the app, now as a pre-authorized github user:

### `yarn start`

Runs the app in the development mode.


Open [http://localhost:3000](http://localhost:3000) to view it in the browser.