React Coding Challenge – Stadt-/Produktverkaufsbrowser mit React

Aufgabe: Stadt-/Produktverkaufsbrowser mit React

Firmenname: Cytel

Ergebnis – Für die nächste Runde ausgewählt

Objektiv

Entwickeln Sie eine einfache React-Anwendung, die Stadt- und Produktverkaufsinformationen mit Routing und dynamischem Datenabruf anzeigt. Die App soll es Nutzern ermöglichen, zwischen verschiedenen Seiten zu navigieren und zu verfolgen, wie viele Städte und Produkte besucht wurden. Die Daten sollten auf Benutzeranforderung aktualisiert werden.

Anforderungen

1. Anwendungsübersicht:

   • Zeigen Sie oben auf der Seite zwei Zähler an:
     • Besuchte Städte: 0
     • Besuchte Produkte: 0
   • Stellen Sie eine Schaltfläche Aktualisieren bereit, die die Zähler zurücksetzt und die Daten neu lädt.

2. Startseite:

   • URL: /
   • Zwei Listen anzeigen:
     • Liste der von der API abgerufenen Städtenamen.
     • Liste der von der API abgerufenen Produktnamen.
   • Initialisieren Sie die Zähler Besuchte Städte und Besuchte Produkte auf 0, wenn die App gestartet wird.

3. API-Endpunkte:

   • Um alle Städte abzurufen: https://assessments.reliscore.com/api/cities
   • Um alle Produkte abzurufen: https://assessments.reliscore.com/api/sales/products

4. Stadtdetailseite:

   • URL: /api/sales//
   • Wenn Sie auf der Startseite auf einen Stadtnamen klicken, gelangen Sie zu einer stadtspezifischen Seite.
   • Rufen Sie mit dem folgenden Endpunkt eine Liste der Produktnamen und der verkauften Menge in der ausgewählten Stadt ab und zeigen Sie sie an: https://assessments.reliscore.com/api/sales// (Ersetzen Sie durch den tatsächlichen Namen der Stadt.)
   • Erhöhen Sie den Zähler Besuchte Städte um 1, wenn eine Stadtseite besucht wird.

5. Produktdetailseite:

   • URL: /sales/product//
   • Wenn Sie auf einer beliebigen Seite auf einen Produktnamen klicken, gelangen Sie zu einer produktspezifischen Seite.
   • Rufen Sie mithilfe des folgenden Endpunkts eine Liste aller Städtenamen ab, in denen das Produkt verkauft wurde, und zeigen Sie die in jeder Stadt verkaufte Menge an: https://assessments.reliscore.com/api/sales/product// (Ersetzen Sie durch den tatsächlichen Produktnamen.)
   • Erhöhen Sie den Zähler Besuchte Produkte um 1, wenn eine Produktseite besucht wird.

6. Aktualisieren-Schaltfläche:

   • Das Klicken auf die Schaltfläche Aktualisieren auf einer beliebigen Seite sollte:
     • Alle Daten von den jeweiligen APIs neu laden.
     • Setzen Sie die Zähler Besuchte Städte und Besuchte Produkte auf 0 zurück.

7. Single Page Application (SPA) mit Routing:

   • Implementieren Sie die Anwendung als Single-Page-Anwendung (SPA) mit React.
   • Verwenden Sie Routing, um die Navigation zwischen verschiedenen Seiten (z. B. Stadtdetails, Produktdetails) zu verwalten und gleichzeitig sicherzustellen, dass die Zurück- und Vorwärtsschaltflächen des Browsers korrekt funktionieren.
   • Stellen Sie sicher, dass Benutzer über die entsprechende URL direkt zu jeder Seite navigieren können.

8. Bewertungskriterien:

   • Angemessene Verwendung wiederverwendbarer React-Komponenten.
   • Effiziente Nutzung von React-Funktionen wie Hooks und Statusverwaltung.
   • Korrekte Implementierung des Routings zur Simulation verschiedener Seiten.
   • Einhaltung von Best Practices in Bezug auf Codestruktur und Modularität.

Leistungen

• Eine voll funktionsfähige React-Anwendung, die die oben genannten Anforderungen erfüllt.
• Das Projekt sollte strukturiert, gut kommentiert und leicht zu navigieren sein.
• Stellen Sie sicher, dass die Anwendung Grenzfälle wie fehlende Daten oder falsche URLs verarbeitet.

Notizen

• Testen Sie Ihre Anwendung gründlich, um sicherzustellen, dass alle Funktionen wie erwartet funktionieren.
• Stellen Sie sicher, dass die App reagiert und auf verschiedenen Bildschirmgrößen gut funktioniert.

Übersicht über API-Antworten

1. Städte-API-Antwort:

   • Endpunkt: https://assessments.reliscore.com/api/cities
   • Antwortformat:

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

Beschreibung: Diese API gibt eine Liste von Städtenamen zurück, in denen Verkaufsdaten verfügbar sind. Das Datenarray enthält die Namen dieser Städte.

1. Verkaufsdaten für eine bestimmte Stadt:

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

Das obige ist der detaillierte Inhalt vonReact Coding Challenge – Stadt-/Produktverkaufsbrowser mit React. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!