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// （將 替換為實際城市名稱。）
   • 每當造訪城市頁面時，將造訪過的城市計數器加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中文網其他相關文章！