React Coding Challenge -Navigateur de ventes de villes/produits utilisant React

Mission : Navigateur de ventes de villes/produits utilisant React

Nom de l'entreprise : Cytel

Résultat - Sélectionné pour le prochain tour

Objectif

Développez une application React simple qui affiche des informations sur la ville et les ventes de produits avec routage et récupération de données dynamique. L'application doit permettre aux utilisateurs de naviguer entre différentes pages et doit suivre le nombre de villes et de produits visités. Les données doivent être actualisées à la demande de l'utilisateur.

Exigences

1. Aperçu de l'application :

   • Afficher deux compteurs en haut de la page :
     • Villes visitées :0
     • Produits visités :0
   • Prévoir un bouton Actualiser qui réinitialise les compteurs et recharge les données.

2. Page d'accueil :

   • URL : /
   • Afficher deux listes :
     • Liste des noms de villes extraits de l'API.
     • Liste des noms de produits extraits de l'API.
   • Initialisez les compteurs Villes visitées et Produits visités à 0 au démarrage de l'application.

3. Points de terminaison de l'API :

   • Pour récupérer toutes les villes : https://assessments.reliscore.com/api/cities
   • Pour récupérer tous les produits : https://assessments.reliscore.com/api/sales/products

4. Page de détails de la ville :

   • URL : /api/sales/bcdc31c7cacdfaf7b3ae7ce431e2f16f/
   • Cliquer sur le nom d'une ville depuis la page d'accueil permet d'accéder à une page spécifique à la ville.
   • Récupérez et affichez une liste de noms de produits et la quantité vendue dans la ville sélectionnée en utilisant le point de terminaison suivant : https://assessments.reliscore.com/api/sales/bcdc31c7cacdfaf7b3ae7ce431e2f16f/ (Remplacez bcdc31c7cacdfaf7b3ae7ce431e2f16f par le nom réel de la ville.)
   • Incrémentez le compteur Villes visitées de 1 chaque fois qu'une page de ville est visitée.

5. Page de détails du produit :

   • URL : /sales/product/1b6a611d9c3c30014f762a7e6bcb25e8/
   • Cliquer sur le nom d'un produit depuis n'importe quelle page permet d'accéder à une page spécifique au produit.
   • Récupérez et affichez une liste de tous les noms de villes où le produit a été vendu et le montant vendu dans chaque ville en utilisant le point de terminaison suivant : https://assessments.reliscore.com/api/sales/product/1b6a611d9c3c30014f762a7e6bcb25e8/ (Remplacez 1b6a611d9c3c30014f762a7e6bcb25e8 par le nom réel du produit.)
   • Incrémentez le compteur Produits visités de 1 à chaque fois qu'une page produit est visitée.

6. Bouton Actualiser :

   • Cliquer sur le bouton Actualiser sur n'importe quelle page devrait :
     • Rechargez toutes les données des API respectives.
     • Remettre à 0 les compteurs Villes visitées et Produits visités.

7. Application monopage (SPA) avec routage :

   • Implémentez l'application en tant qu'application monopage (SPA) à l'aide de React.
   • Utilisez le routage pour gérer la navigation entre les différentes pages (par exemple, les détails de la ville, les détails du produit) tout en garantissant que les boutons Précédent et Suivant du navigateur fonctionnent correctement.
   • Assurez-vous que les utilisateurs peuvent accéder directement à n'importe quelle page en utilisant l'URL appropriée.

8. Critères d'évaluation :

   • Utilisation appropriée des composants React réutilisables.
   • Utilisation efficace des fonctionnalités de React telles que les hooks et la gestion des états.
   • Mise en œuvre appropriée du routage pour simuler différentes pages.
   • Adhésion aux meilleures pratiques en matière de structure et de modularité du code.

Livrables

• Une application React entièrement fonctionnelle répondant aux exigences décrites ci-dessus.
• Le projet doit être structuré, bien commenté et facile à naviguer.
• Assurez-vous que l'application gère les cas extrêmes, tels que les données manquantes ou les URL incorrectes.

Remarques

• Testez minutieusement votre application pour vous assurer que toutes les fonctionnalités fonctionnent comme prévu.
• Assurez-vous que l'application est réactive et fonctionne bien sur différentes tailles d'écran.

Présentation des réponses API

1. Réponse de l'API Villes :

   • Point final : https://assessments.reliscore.com/api/cities
   • Format de réponse :

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

Description : Cette API renvoie une liste de noms de villes où les données de ventes sont disponibles. Le tableau de données contient les noms de ces villes.

1. Données de ventes pour une ville spécifique :

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!