|
Description: |
Expected duration: Ongoing
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 Input
1. 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 Component
1. 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. |
