React 编码挑战 - 使用 React 的城市/产品销售浏览器

作业：使用 React 的城市/产品销售浏览器

公司名称：Cytel

结果 - 入选下一轮

客观的

开发一个简单的 React 应用程序，通过路由和动态数据获取来显示城市和产品销售信息。该应用程序应该允许用户在不同页面之间导航，并且应该跟踪访问过多少个城市和产品。数据应根据用户请求刷新。

要求

1. 应用概述：

   • 在页面顶部显示两个计数器：
     • 访问城市： 0
     • 访问过的产品： 0
   • 提供一个刷新按钮，用于重置计数器并重新加载数据。

2. 主页：

   • 网址：/
   • 显示两个列表：
     • 从 API 获取的城市名称列表。
     • 从 API 获取的产品名称列表。
   • 应用启动时将访问的城市和访问的产品计数器初始化为0。

3. API 端点:

   • 获取所有城市：https://assessments.reliscore.com/api/cities
   • 获取所有产品：https://assessments.reliscore.com/api/sales/products

4. 城市详细信息页面：

   • URL：/api/sales//
   • 在主页上单击城市名称即可导航到特定于城市的页面。
   • 使用以下端点获取并显示所选城市的产品名称和销售数量列表： https://assessments.reliscore.com/api/sales/bcdc31c7cacdfaf7b3ae7ce431e2f16f/ （将 替换为实际城市名称。）
   • 每当访问城市页面时，将访问过的城市计数器加1。

5. 产品详情页面：

   • URL：/sales/product//
   • 从任何页面单击产品名称都会导航到特定于产品的页面。
   • 使用以下端点获取并显示已销售产品的所有城市名称以及每个城市的销售金额的列表： https://assessments.reliscore.com/api/sales/product// （将替换为实际产品名称。）
   • 每当访问产品页面时，将访问的产品计数器加1。

6. 刷新按钮:

   • 单击任何页面上的刷新按钮应该：
     • 从相应的 API 重新加载所有数据。
     • 将访问过的城市和访问过的产品计数器重置为0。

7. 带路由的单页应用程序 (SPA):

   • 使用 React 将应用程序实现为单页应用程序 (SPA)。
   • 利用路由来处理不同页面之间的导航（例如，城市详细信息、产品详细信息），同时确保浏览器的后退和前进按钮正常工作。
   • 确保用户可以使用适当的 URL 直接导航到任何页面。

8. 评估标准：

   • 适当使用可重用的 React 组件。
   • 高效使用 React 功能，例如钩子和状态管理。
   • 正确实现路由来模拟不同的页面。
   • 遵守代码结构和模块化的最佳实践。

可交付成果

• 满足上述要求的功能齐全的 React 应用程序。
• 该项目应该结构合理、注释良好且易于导航。
• 确保应用程序处理边缘情况，例如丢失数据或不正确的 URL。

笔记

• 彻底测试您的应用程序，以确保所有功能按预期工作。
• 确保应用程序响应灵敏并且在不同的屏幕尺寸上都能正常运行。

API 响应概述

1. 城市 API 响应：

   • 端点：https://assessments.reliscore.com/api/cities
   • 回复格式：

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

描述：此 API 返回可用销售数据的城市名称列表。数据数组包含这些城市的名称。

1. 特定城市的销售数据：

   • 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.

以上是React 编码挑战 - 使用 React 的城市/产品销售浏览器的详细内容。更多信息请关注PHP中文网其他相关文章！