React TypeScript GraphQL Github API Demo

React + TypeScript app demo using the GitHub V4 GraphQL API.

Features

• Configurable (.env)
• Offline caching (offline-plugin)
• Continuous integration (CircleCI)
• Continuous deployment (netlify)
• Optimized
  • Embedded critical CSS

Set up

You will need to generate a personal access token to connect to the GitHub GraphQL API.

To do this navigate to https://github.com/settings/tokens/new and select the following options:

• repo
  • repo:status
  • repo_deployment
  • public_repo
  • repo:invite admin:org
  • read:org admin:public_key
  • read:public_key
• notifications
• user
  • read:user
  • user:email
  • user:follow admin:gpg_key:
  • read:gpg_key

Then run yarn bootstrap and add your token to the API_AUTH_TOKEN environment variable in .env.

To test the service worker and offline functionality you may want to use ngrok and use the HTTPS endpoint provided.

Scripts

Script	Description	Environment
yarn bootstrap	Set-up app config files	development, production
yarn codegen	Run graphql-codegen on API_ENDPOINT defined in .env	development
yarn bootstrap	Production build	production
yarn serve	Serve local build	development
yarn start	Run development build	development
yarn test	Run tests	development, production
yarn docker:bootstrap	Run bootstrap using docker	development
yarn docker:build	Run build using docker	development
yarn docker:start	Run start using docker	development
yarn docker:test	Run test using docker	development

Tools and libraries

• GraphQL Code Generator
• Emotion
• Styled System

TODO

• Add robust tests
  • Use react testing library
• Implement continuous deployment
• Add codecov
• Add reconciliation for allow for fetch more
• Suggest repos when none are found
• Optimise hooks
• Add logging service
• Fix linter warnings
• Add initial loading screen
• Use intersection observer for loading more results
• Support GitHub app auth
• Make RepositoryItem and RepositoryDetail components generic
• Replace emojis with icons
• Legacy browser testing
• Use import aliases to avoid .. relative imports