Kasa

Stack technique

• React
• JavaScript
• JSX
• React Router
• Sass
• Vite
• Git

Contexte

Kasa est une plateforme de location immobilière. Dans le cadre de ce projet OpenClassrooms, l’objectif était de reconstruire son interface front-end à partir de maquettes fournies, en mettant en place une architecture React réutilisable et responsive.

Objectifs

• Intégrer les maquettes desktop et mobile.
• Construire l’application avec React.
• Créer des composants réutilisables.
• Mettre en place la navigation avec React Router.
• Afficher dynamiquement les logements à partir de données JSON.
• Gérer les URLs de logements invalides avec une page 404.
• Assurer une interface responsive.

Architecture et composants

• Header
• Footer
• Layout
• Banner
• AccommodationCard
• Collapse
• Slideshow
• Rating

Fonctionnalités

• Liste des logements générée à partir des données JSON.
• Fiche logement dynamique et navigation basée sur son identifiant.
• Slideshow des photos avec navigation circulaire.
• Masquage des contrôles lorsque le logement ne possède qu’une image.
• Blocs Collapse réutilisables et affichage de la note.
• Page 404 pour les URLs invalides.
• Interface responsive desktop et mobile.

Challenge principal

Transformer les maquettes en composants réutilisables tout en conservant des comportements différents selon les données et les tailles d’écran. Le Slideshow s’adapte à une ou plusieurs images, le Collapse à son état ouvert ou fermé, la note est calculée depuis la donnée et le logement est récupéré depuis l’identifiant présent dans l’URL.

Solution apportée

L’interface est découpée en composants React. Les props transmettent les données, les données JSON constituent la source des logements, React Router gère le routage dynamique et la logique conditionnelle adapte le rendu aux données. Les styles Sass/CSS assurent le responsive.

Résultats

• L’application permet de naviguer entre les logements et d’afficher leurs informations dynamiquement.
• L’interface reste cohérente entre desktop et mobile grâce à une architecture basée sur des composants réutilisables.

Améliorations possibles

• Connecter l’interface à une API réelle.
• Ajouter des tests automatisés.
• Améliorer encore la gestion des états de chargement et d’erreur.
• Poursuivre les optimisations d’accessibilité.