Kasa

Link to website
Link to project repo
Project Gallery

1/5

CSS3
Github
JSDoc
React

Kasa est dans le métier de la location d’appartements entre particuliers depuis près de 10 ans maintenant. Avec plus de 500 annonces postées chaque jour Kasa fait partie des leaders de la location d’appartements entre particuliers en France. Le site Web de Kasa a été codé il y a plus de 10 ans en ASP.NET avec beaucoup de code hérité. Le directeur technique a donc décidé de le remanier complètement et de passer à une stack JavaScript complète avec NodeJS en back-end et React en front-end. Le développeur doit démarrer le projet React et développer l'ensemble de l'application, les composants React, les routes React Router, tout en suivant les maquettes Figma (responsive !). De plus, comme l'équipe Back-End et les données ne sont pas en place, 20 annonces de logements (dans un fichier JSON) ont été fournies afin de construire le Front-End correspondant.

Fonctionnalités

  • Une page d’accueil avec une section contenant tous les logements sous forme de carte.
  • En cliquant sur une carte, l'utilisateur est redirigé vers le logement.
  • Une page “À propos” avec 4 menus déroulants décrivant les valeurs de l'entreprise.
  • Un carrousel de photos présentant le logement.
  • Le classement par étoiles d'un hôte.
  • Deux menus déroulants décrivant le logement et fournissant une liste d'équipements disponibles.
  • Des tags de classification.

Contraintes

  • Composants à base de classe, aucun composant fonction.
  • Code décomposé en composants modulaires et réutilisables, avec un composant par fichier.
  • Pas de bibliothèque React externe.
  • Utilisation de props entre les composants.
  • Utilisation du state dans les composants quand c'est nécessaire.
  • Gestion des événements.
  • Les paramètres des routes sont gérés par React Router dans l'URL.
  • Il existe une page par route.
  • La page 404 est renvoyée pour chaque route inexistante.
  • La page 404 est renvoyée si une valeur de l'URL ne fait pas partie des données saisies.
  • Le code ne doit pas produire d'erreur ou de warning dans la console.

Compétences

  • Développer les routes d'une application web avec React Router
  • Initialiser une application web avec un framework
  • Créer des composants avec React