Objective

The goal of this assignment is to evaluate your ability to create a React application in TypeScript, interfacing with a public API (GitHub), managing bulk data uploads (CSV), and handling real-world challenges like API rate limits. You will be building a bulk GitHub repository search application.

Overview

The application will allow users to upload a CSV file with up to 100,000 rows, each containing details for a specific repository search. After mapping and reviewing the data, the user can submit the search and the application will fetch the data from GitHub API and display the number of results in a user-friendly manner.

You are provided with a Figma design link and a source-code in which some parts of the requirements are implemented in it and you need to complete the source-code base on the requirements and design file.

• https://github.com/BrowseAI-Official/front-end-assignment
• https://www.figma.com/file/EtKw6qd5SBcx1O0NcGHqap/Assignment?type=design&node-id=316%3A53&mode=design&t=R4FYmRNgVQ3SdvN6-1

Requirements

• Design a visually appealing user interface using React and CSS.
• The application must be implemented in TypeScript and use functional components.
• The user should be able to upload a CSV file. After upload, the user should be able to map the CSV data to the following columns:
  • Search Keywords (separated by space)
  • Username (repository owner)
  • Context (name, description, topics, readme, or a multiple of them separated by comma)
• Search keywords is required, but the other two columns are optional.
• Implement error checking for the CSV data. Errors can be:
  • This row is a duplicate row.
  • The search keyword cell is blank.
• After mapping, the application should display rows. Provide a button to delete all rows with errors.
• After review and error handling, the user should be able to submit the CSV data. The application should fetch data from the GitHub API using your personal access token, and add a new column to the table called "Search Results". This column will show one of these values:
  • Loading...
  • Queued
  • No repositories found
  • N repositories found (which will be linked to the search results page on github.com, in a new tab)
    • N would be the number of repositories found on Github.
• While the searches are in progress, we should display the time left on the table. For example, “Finish estimated time: 2 hours and 31 minutes.”
• To handle the GitHub API rate limit, your application should send no more than 30 requests per minute to the GitHub API and queue the remaining requests.
• Handle edge-cases that may arise from the user taking actions that are not described here.

Design

Screen 1: File Upload (path: /)