GitHub user search exercise

A exercise project using the GitHub search API, Next.js and React Server Components.

Live demo

Stack

• Typescript
• Nextjs
• React
• Netlify
• ESLint
• ESLint Stylistic
• Stylelint
• Husky
• Jest
• React Testing Library
• Cypress

Authentication

Note that authentication is not necessary in order to search GitHub for users however adding a authentication token has it's benefits e.g. higher rate limit, access to more data.

In order to add a authentication token first generate a personal access token via GitHub. Then add a .env file in the root of the project and add the generated token:

GITHUB_AUTH_TOKEN=your token here

Getting started

This project requires Node.js 18.17 or later.

Clone the repository:

$ git clone [email protected]:nickgroenewegen/github-user-search.git

To start a local development server:

$ cd github-user-search
$ npm install
$ npm run dev

To run a production build:

$ npm run build

Linting

The project uses ESLint for linting, ESLint Stylistic for code formating and Stylelint for CSS inting.

Why Stylistic instead of prettier? I wanted to try out Stylistic and this was a good opportunity. If you have any problems with code formatting in VS Code then please look here.

To run ESLint:

$ npm run lint

To run Stylelint:

$ npm run lint:css

Testing

Jest, React Testing Library and Cypress are used for testing. The project contains a few test for demonstration purpose.

To run jest for unit and component tests:

$ npm run test

To run Cypress for e2e test:

$ npm run e2e

To run Cypress in interactive mode:

$ npm run e2e:interactive

Husky

Husky runs before any git commit as a safeguard. It runs the following commands:

npm run lint
npm run lint:css
npm run test