This project was bootstrapped with Create Next App.
In the project directory, you can run:
Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.
Launches the test window (Cypress).
Builds the app for production to the build folder.
This is a mobile and desktop-friendly app for viewing GitHub users/organization and their repositories. It performs a query search on the given text and returns the first 5 best matches. If there's no matching or similar username, a message is displayed to inform you of the outcome. Also, when there is a connection loss or something wrong with the implementing API, a friendly message is displayed to keep you informed.
The app utilizes the GitHub API for fetching the users and repositories. The GET request URLs are /search/users and users/{username}/repos respectively.
Please modify the .env file and set the TOKEN value. This is required by GitHub for the requests.
The chart was created with XState
- Enter a GitHub username in the search field, press Enter, or click on the Search button. Some basic info that the shows about the user is the avatar, username, and the type. The type could either be user or organization.
- On clicking on any of the users shown will show the repositories of that user. It's an accordion-based component that expands to show the details. The details contained in a repository item include name, description, language, and when last the repo was updated.
SWR - for fetching (has caching features similar to react-query)
MUI - for styling
Cypress - for testing
Moment - for formatting the date
Octokit - Github API request