Kasa

Vue d'ensemble du projet

Le site de Kasa a été codé il y a plus de 10 ans en ASP.NET avec un code legacy important.
La CTO, a lancé une refonte totale pour passer à une stack complète en JavaScript avec NodeJS côté back-end, et React côté front-end.
Kasa en a également profité pour commander de nouvelles maquettes auprès de son designer habituel.
Mon objectif était de démarrer le projet React et de développer l’ensemble de l’application, les composants React, les routes React Router, en suivant les maquettes Figma (responsives !), les contraintes fonctionnelles et techniques.

Outils standards :
● Create React App.
● React Router.
● Pas de librairie React externe.

Contraintes fonctionnelles :
● Si l'utilisateur se trouve à la première image et qu'il clique sur "Image précédente", la galerie affiche la dernière image.
Inversement, quand l'image affichée est la dernière de la galerie, si l'utilisateur clique sur "Image suivante", la galerie affiche la première image.
● S'il n'y a qu'une seule image, les boutons "Suivant" et "Précédent" ainsi que la numérotation n'apparaissent pas.
La galerie doit toujours rester de la même hauteur, celle indiquée sur la maquette Figma. Les images seront donc coupées et centrées dans le cadre de l’image.
● Collapse : Par défaut, les Collapses sont fermés à l'initialisation de la page.
Si le Collapse est ouvert, le clic de l'utilisateur permet de le fermer.
Inversement, si le Collapse est fermé, un clic permet de l'ouvrir.

Contraintes techniques :
Il est impératif d’utiliser ces éléments de React pour un code de qualité :
● Découpage en composants modulaires et réutilisables ;
● Un composant par fichier ;
● Structure logique des différents fichiers ;
● Utilisation des props entre les composants ;
● Utilisation du state dans les composants quand c'est nécessaire ;
● Gestion des événements ;
● Listes : React permet de faire des choses vraiment intéressantes avec les listes, en itérant dessus, par exemple avec map. Il faut les utiliser autant que possible.
Il est également recommandé, mais pas imposé, d’utiliser des composants fonctionnels plutôt que des composants classes.
● React Router :
- Les paramètres des routes sont gérés par React Router dans l'URL pour récupérer les informations de chaque logement.
- Il existe une page par route.
- La page 404 est renvoyée pour chaque route inexistante, ou si une valeur présente dans l’URL ne fait pas partie des données renseignées.
- La logique du routeur est réunie dans un seul fichier.
● Général :
- Le code ne doit pas produire d'erreur ou de warning dans la console.

Les étapes du projet :
● Installer l’application React, initialiser le projet avec Create React App ainsi que le repo GitHub.
● Installer React Router et ses dépendances.
● Créer la logique de routage et les différentes pages de l’application.
● Créez la page d’accueil avec les composants banner et card.
● Créez la page À propos avec un composant Collapse.
● Créez la page d’erreur et toute route inexistante doit mener à la page d’erreur.
● Créez le carrousel de la page de logement avec un composant Slideshow.
● Finalisez la page de logement (carrousel fonctionnel).
● Gérez l’erreur sur l’id d’une propriété (rediriger vers la page d’erreur en cas d’id incorrect).

Le projet se basait sur des éléments préparés au préalable :
● Les maquettes Figma.
● Les prototypes du site.

Les compétences évaluées étaient :
● Développer une interface web avec Sass
● Configurer la navigation entre les pages de l'application avec React Router
● Développer des éléments de l'interface d'un site web grâce à des composants React
● Initialiser une application avec Create React App
● Mettre en œuvre des animations CSS

Pour mener à bien ce projet, j'ai suivi les cours OpenClassrooms suivants :
● Débutez avec React
● Créez une application React complète
● Ecrivez la documentation technique de votre projet

N’hésitez pas à consulter le code et le visuel du projet en visitant les liens correspondants ci-dessous.