A Simple React Client for Github's GraphQL API

A Simple React Client for Github's GraphQL API

A simple react client for Github's graphQL API πŸš€In short, this project allows you to browse repositories available on Github using an infinite scroll. It uses the new Github GraphQL v4 and well the new `apollo/client` library.

RepoWare

A simple react client for Github's graphQL API πŸš€

In short, this project allows you to browse repositories available on Github using an infinite scroll. It uses the new Github GraphQL v4 and well the new apollo/client library.

Built With

Getting Started

To get this project running locally, please follow the instructions below. It's also important to note that the app doesn't contain an authentication feature yet. Meaning you will need to generate a private personal token on GitHub and add it to the .env file.

Steps to generate your Github personal token:

  1. Verify your email address, if it hasn't been verified yet.
  2. In the upper-right corner of any page, click your profile photo, then click Settings.
  3. In the left sidebar, click Developer settings.
  4. In the left sidebar, click Personal access tokens.
  5. Click Generate a new token.
  6. Give your token a descriptive name.
  7. Add your token to the .env file (use the .env.example for reference)

After following the steps above, please use the .env.example as an example to store your token.

git clone https://github.com/JadRizk/repoWare.git

cd repoWare/

yarn -or- npm  i

yarn start or npm run start

Open your localhost on port 3000 to the project running the browser.

Available Scripts

Here is a list of useful scripts available:

// Run the dev server locally
yarn start -or- npm run start

// Build the production file
yarn build -or- npm run build

// Run tests
yarn test -or- npm run test

// Format the code using prettier
yarn format -or- npm run format

// Lint Code using ESLint
yarn lint -or- npm run lint

Features

Search Github repositories by title

search github repo search github repo - result

List the 20 latest issues

latest-feature

Dark Mode Support

search github repo search github repo - result

Infinite Scroll

infinte scroll feature

Roadmap

Bug fixes

  • Fix the 'no repo found' error. Happening when the value is being debounced
  • When scrolling for more repos and issues concerning duplicate keys is being displayed (Investigate)
  • Handle error state in issueDialog (Enhancements)

Optimizations

  • Refactor the update query to use type policies
  • Optimize the card skeleton loader to display the amount needed to cover the screen
  • Replace material-ui classes by styles-components

Future Features

  • ADD AUTOMATED TESTS !

  • Add user authentication using Github REST API (we can get the token and then use it to query the graphql endpoint)

  • Add a feature to allow the user to star or watch repos from the app (Use optimistic UI)

  • Add Infinite Scroll for the issues list

  • Add the option to filter by a minimum amount of stars

  • Add a view to display the top 10 repos for specific languages

Download Details:

Author: JadRizk

Source Code: https://github.com/JadRizk/repoWare

react reactjs javascript

What is Geek Coin

What is GeekCash, Geek Token

Best Visual Studio Code Themes of 2021

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

How native is React Native? | React Native vs Native App Development

Article covers: How native is react native?, React Native vs (Ionic, Cordova), Similarities and difference between React Native and Native App Development.

What is ReactJS? | ReactJS Basics | Learn ReactJS | React for Beginners | ReactJS Training

This Edureka video on "What is ReactJS ?" will help you understand the fundamentals of ReactJS and help you in building a strong foundation in React by understanding the advantages of ReactJS along with its features and major aspects.

Increase Performance of React Applications Via Array JavaScript Methods

Increase Performance of React Applications Via Array JavaScript Methods. We will create a simple event management application in the react to add, update, and delete an event.

Routing in React without React-Router

I have been using React JS in my projects for quite some time now and am used to managing routing in my app using the react-router package. I have always been keen on having as little dependencies in my apps as possible, so, I always felt perturbed by the use of this particular package in simpler apps which did not have complex routes.

The Ugly Side of React Hooks

In this post, I will share my own point of view about React Hooks, and as the title of this post implies, I am not a big fan.