yrogovich / repo-searcher Goto Github PK

Develop an application that is a GitHub repository search 🔍. On the main page, the application should render an input and a table with the search results. Its structure should look like this:

Please add the following features (as many as you can) in the following order:

• Caching the search results, so we don't have to make an API call if the results were fetched before.
• Presenting a simple loading/error state
• Sorting the table by columns, pagination, and changing the number of rows displayed (locally).
• Updating the current URL on query change or table sort, so we get the same results when the page gets refreshed.
• Removing a "search" button and firing API requests only when the user stopped typing (please be aware of GitHub rate limits).

And adding anything else that will be useful for the user...

• WCAG: Add proper ARIA attributes to form elements for screen reader compatibility.
• Error Handling: Adding a user-friendly error display mechanism in the UI for a better experience.
• UI: Incorporate visual loading indicators while the form submits and searches.
• Skeleton Loading: Implement a skeleton loading state for the table while the data is being fetched.
• Caching: Introduce a more robust caching system (e.g., Redis or an in-memory cache) to complement React Query's caching. This will significantly enhance repeated query performance.
• Redux for complex form state management.
• Now pagination works only locally (on client side) as it was described in the challenge. But it would be better to implement server side pagination. It will be more efficient and will allow to get more data from the server.

1. Clone the repository

   git clone https://github.com/yrogovich/repo-searcher.git

2. Navigate to the project directory

   cd repo-searcher

3. Install dependencies

   recommended method👇🏾

   pmpm install

   or old school method 👴🏾

   npm install

4. Add .env.local file to the root of the project from the .env.example file and add your GitHub token to the file.

5. Start the development server

    pnpm run dev

This project uses Conventional Commits for commit messages. This convention makes it easier to understand the changes in a project and to automate the versioning process.

Full documentation for GitHub's Search APIs can be found here:

• https://developer.github.com/v3/search/

A sample query to find repos with "tetris" can be found below:

curl https://api.github.com/search/repositories?q=tetris&sort=stars&order=desc

You should be able to modify this to suit your needs.

Please note that GitHub requests are rate limited as follows:

The Search API has a custom rate limit. For requests using Basic Authentication, OAuth, or client ID and secret, you can make up to 30 requests per minute. For unauthenticated requests, the rate limit allows you to make up to 10 requests per minute.

• Next.js
• React
• TypeScript
• Tailwind CSS
• Shadcn
• Conventional Commits
• Octokit.js
• TanStack Table
• TansStack Query
• React Form
• Zod

This project is licensed under the MIT License.