React Coding Challenge -City/Product Sales Browser using React

Assignment: City/Product Sales Browser using React

Company Name: Cytel

Result - Selected for Next Round

Objective

Develop a simple React application that displays city and product sales information with routing and dynamic data fetching. The app should allow users to navigate between different pages, and it should track how many cities and products have been visited. The data should be refreshed upon user request.

Requirements

1. Application Overview:

   • Display two counters at the top of the page:
     • Cities Visited: 0
     • Products Visited: 0
   • Provide a Refresh button that resets the counters and reloads the data.

2. Home Page:

   • URL: /
   • Display two lists:
     • List of city names fetched from the API.
     • List of product names fetched from the API.
   • Initialize the Cities Visited and Products Visited counters to 0 when the app starts.

3. API Endpoints:

   • To fetch all cities: https://assessments.reliscore.com/api/cities
   • To fetch all products: https://assessments.reliscore.com/api/sales/products

4. City Details Page:

   • URL: /api/sales/bcdc31c7cacdfaf7b3ae7ce431e2f16f/
   • Clicking on a city name from the home page navigates to a city-specific page.
   • Fetch and display a list of product names and the quantity sold in the selected city using the following endpoint: https://assessments.reliscore.com/api/sales/bcdc31c7cacdfaf7b3ae7ce431e2f16f/ (Replace bcdc31c7cacdfaf7b3ae7ce431e2f16f with the actual city name.)
   • Increment the Cities Visited counter by 1 whenever a city page is visited.

5. Product Details Page:

   • URL: /sales/product/1b6a611d9c3c30014f762a7e6bcb25e8/
   • Clicking on a product name from any page navigates to a product-specific page.
   • Fetch and display a list of all city names where the product has been sold and the amount sold in each city using the following endpoint: https://assessments.reliscore.com/api/sales/product/1b6a611d9c3c30014f762a7e6bcb25e8/ (Replace 1b6a611d9c3c30014f762a7e6bcb25e8 with the actual product name.)
   • Increment the Products Visited counter by 1 whenever a product page is visited.

6. Refresh Button:

   • Clicking the Refresh button on any page should:
     • Reload all data from the respective APIs.
     • Reset the Cities Visited and Products Visited counters to 0.

7. Single Page Application (SPA) with Routing:

   • Implement the application as a single-page application (SPA) using React.
   • Utilize routing to handle navigation between different pages (e.g., city details, product details) while ensuring that the browser’s back and forward buttons function correctly.
   • Ensure that users can navigate directly to any page using the appropriate URL.

8. Evaluation Criteria:

   • Appropriate use of reusable React components.
   • Efficient use of React features such as hooks and state management.
   • Proper implementation of routing to simulate different pages.
   • Adherence to best practices in code structure and modularity.

Deliverables

• A fully functional React application meeting the requirements outlined above.
• The project should be structured, well-commented, and easy to navigate.
• Ensure that the application handles edge cases, such as missing data or incorrect URLs.

Notes

• Test your application thoroughly to ensure all features work as expected.
• Make sure the app is responsive and works well on different screen sizes.

API Responses Overview

1. Cities API Response:

   • Endpoint: https://assessments.reliscore.com/api/cities
   • Response Format:

     {
       "status": "success",
       "data": [
         "Bombay",
         "Bangalore",
         "Pune",
         "Kolkata",
         "Chennai",
         "New Delhi"
       ]
     }
   

Description: This API returns a list of city names where sales data is available. The data array contains the names of these cities.

1. Sales Data for a Specific City:

   • Endpoint: https://assessments.reliscore.com/api/sales/pune (Replace pune with any other city name as needed)
   • Response Format:

     {
       "status": "success",
       "data": {
         "product1": 137,
         "product2": 23,
         "product3": 77
       }
     }
   

Description: This API returns sales data for a specific city. The data object contains key-value pairs where the key is the product name and the value is the number of items sold in that city.

1. Products List API Response:

   • Endpoint: https://assessments.reliscore.com/api/sales/products
   • Response Format:

     {
       "status": "success",
       "data": {
         "product1": 137,
         "product2": 23,
         "product3": 77
       }
     }
   

Description: This API returns a list of all products with their total sales figures. The data object contains key-value pairs where the key is the product name and the value is the total number of items sold across all cities.

1. Product Detail API Response:

   • Endpoint: https://assessments.reliscore.com/api/sales/product/product1 (Replace product1 with any other product name as needed)
   • Response Format:

     {
       "status": "success",
       "data": {
         "product1": 137,
         "product2": 23,
         "product3": 77
       }
     }
   

Description: This API returns the sales data for a specific product across different cities. The data object contains key-value pairs where the key is the city name and the value is the number of items sold for that product in that city.

Note:

Please ensure that you fully understand the requirements before starting the implementation. There’s a minor issue with the API response for the product/a2146e9d12dacc62f0ab03879c7fd44b endpoint, but it can be worked around with the provided data. Adding the API responses for reference above.

You are encouraged to implement the solution and make any necessary modifications to the APIs as needed to meet the requirements. If you need more details or are interested in similar assignments, you can refer to my E-Commerce Project.

The above is the detailed content of React Coding Challenge -City/Product Sales Browser using React. For more information, please follow other related articles on the PHP Chinese website!