React Web App for Simulating Concurrent API Requests

Description

Description:We are seeking an experienced React developer to build a two-page web application. The application will simulate API requests using mock data, support concurrent API calls for multiple URLs, and provide real-time metrics. Each component instance must independently handle requests and update results dynamically.
Page 1: API Key Input1. Purpose:o A page for users to input an API key.o On successful validation (via a mock API call), redirect the user to Page 2.2. Functionality:o Input field for API key.o Button to validate the API key.o Display error message for invalid API key (mock validation).
Page 2: API Request Component1. Inputs:o Default Country: Editable field to set a default country for all URLs unless overridden.o Default Number: Editable field to set a default number of requests for all URLs unless overridden.o URL List: A dynamic list where users can: Add multiple URLs. Specify a country for each URL (overrides the default). Specify the number of requests for each URL (overrides the default).o Buttons to add or remove rows dynamically.
Functionality:1. Concurrent API Calls:o The application must allow API calls for multiple URLs to run concurrently.o Each request will send the following payload: API Key: Entered on Page 1. URL: The specific URL for the request. Country: Either default or specified for the individual URL.o The number of requests determines how many individual calls are made for each URL, but this is not included in the payload.2. Dynamic Features:o Users can dynamically add or remove rows for multiple URLs.o Changing the default country or default number should instantly update all rows unless overridden for specific entries.3. Results Display:o Summary Table: Metrics for each URL: URL Number of Successful Requests Success Rate (%) Number of Failed Requests Failure Rate (%) Metrics must update dynamically on the front end as responses are received.o Detailed Results Table: Each instance of the component will have its own Detailed Results Table. For every individual response received, the following details must be displayed in the table of the correct instance: URL ISP IP Address Proxy Status (Green for success, Red for failure). Responses must be matched to the correct instance based on where the request originated, ensuring real-time updates.4. Multiple Component Instances:o Allow multiple instances of the component on the same page.o Each instance must work independently to handle separate API calls and update its own results.
Technical Requirements:1. Framework: The application must be built in React.2. Concurrency:o Support concurrent API calls for multiple URLs.o Ensure responses are mapped to their originating instance.3. Mock Data:o Use a static JSON or JavaScript file to simulate API responses.o Example response for each request: URL: The requested URL. ISP: Mock ISP name. IP Address: Mock IP. Proxy: Mock proxy name. Status: Mock status (success or failure).4. Error Handling:o Handle errors gracefully with appropriate user feedback.5. Responsive Design:o Ensure the application works seamlessly on desktop and mobile devices.
Deliverables:1. Fully functional two-page React application with the described functionality.2. Clean, modular, and well-documented code.3. A short README file explaining the setup, functionality, and mock data usage.
Budget and Timeline:• Please specify your estimated cost and timeline in your proposal.