Kasa
Le Projet
Description du projet:
Kasa est une plateforme de location d'appartements entre particuliers développée dans le cadre de ma formation Développeur chez OpenClassrooms.
Ce projet avait pour objectif de recréer une application fonctionnelle en React, en respectant une maquette fournie, en mettant en place une architecture de composants claire et un système de routing avec gestion des pages dynamiques.
Problématiques rencontrées et solutions apportées :
Une des principales difficultés rencontrées sur ce projet a été la gestion des données dynamiques provenant du fichier JSON et de la redirection vers la page 404 si la donnée n'existait pas/plus dans le fichier JSON.
J'ai dû mettre en place un système permettant d'afficher les informations de chaque logement en fonction de son id récupéré dans l'URL, en gardant à l'esprit que le backend n'était pas encore créé mais que je devais tout de même faire en sorte qu'il soit prêt à utiliser l'API, c'est pourquoi j'ai décidé d'utiliser useNavigate dans un useEffect pour la redirection vers la page 404 avec des dépendances qui seraient amenées à changer lorsque le backend serait mit en place et qu'un appel API serait utilisé plutôt que le fichier JSON de préparation.
J'ai également voulu ajouter une animation au changement d'image de la galerie en y ajoutant une class spécifique via un useState au clic, mais les images étant placées dynamiquement la class était donc mise sur chaque image même celle qui n'était pas encore visible ce qui empêchait l'animation de s'effectuer sur les images suivantes, j'ai donc utilisé un timer en prenant en compte la durée de l'animation pour retirer la class des images après un délai et pouvoir la remettre au clic.
Compétences développées :
- Développement d'une application React avec gestion des routes dynamiques (React Router)
- Utilisation des hooks React (useState, useEffect, useNavigate, useParams)
- Structuration et organisation des composants et de leur style SCSS (variables, mixins, architecture SCSS)
- Utilisation du JSX pour la création d'interfaces dynamiques et interactives
