Kasa est une plateforme moderne de location de logements entre particuliers. Ce projet marque une étape clé dans l'apprentissage de React, en mettant l'accent sur le développement d'une interface dynamique, modulaire et parfaitement responsive, tout en respectant une charte graphique rigoureuse fournie sur Figma.
Dans le cadre de cette refonte totale, l'enjeu principal était de migrer l'ancienne plateforme ASP.NET vers une infrastructure JavaScript moderne basée sur React. La mission consistait à développer l'intégralité de l'application (front-end) en s'appuyant sur des composants réutilisables et une navigation fluide gérée côté client.
- Architecture React : Conception d'une application modulaire décomposée en composants atomiques et layouts réutilisables.
- Routage Dynamique : Mise en œuvre de
react-router-dom(version 6) pour orchestrer la navigation entre la page d'accueil, les fiches logements, la page "À propos" et la gestion des erreurs 404. - Hooks & State Management : Utilisation des React Hooks (
useState,useEffect,useParams) pour piloter la logique d'affichage et la récupération des données. - SASS (Syntactically Awesome Style Sheets) : Implémentation d'une structure CSS robuste utilisant des variables, des mixins et une organisation modulaire pour garantir la maintenabilité du design.
- Fidélité au Design (Pixel Perfect) : Intégration rigoureuse des maquettes Figma, incluant les animations et les comportements interactifs (slideshow, collapse).
Le projet propose une expérience utilisateur complète et interactive :
Un composant de navigation d'images intuitif permettant de faire défiler les photos d'un logement. Il gère intelligemment l'affichage des flèches et du compteur selon le nombre total d'images.
Des composants interactifs et accessibles permettant d'axer l'affichage du contenu (descriptions et équipements), utilisés sur les fiches logements et la page "À propos".
Affichage dynamique d'une note sur 5 étoiles pour chaque logement, reflétant précisément les données issues du catalogue.
L'interface a été entièrement optimisée pour offrir une navigation confortable sur mobile, tablette et desktop.
- Node.js (version 14 ou supérieure recommandée)
- Un gestionnaire de paquets (NPM ou Yarn)
- Clonez le dépôt :
git clone https://github.com/AndreaP2A/P7-Kasa.git
- Accédez au dossier :
cd P7-Kasa/my-app - Installez les dépendances :
npm install
- Lancez l'application en mode développement :
npm start
L'architecture suit une logique modulaire orientée composants :
.
├── public/ # Assets publics (index.html, favicon)
├── src/
│ ├── assets/ # Images et logos du projet
│ ├── components/ # Composants UI (Card, Rating, Slideshow, Collapse...)
│ ├── data/ # Données JSON des logements
│ ├── layouts/ # Composants de structure (Header, Footer)
│ ├── pages/ # Vue des pages (Home, House, About, Error404)
│ ├── routes/ # Configuration de React Router
│ ├── sass/ # Fichiers sources SASS (Base, Utils, Components...)
│ ├── services/ # Logique de récupération de données
│ ├── App.jsx # Composant racine
│ └── index.jsx # Point d'entrée de l'application
└── package.json # Dépendances et scripts
Le projet est accessible en ligne via GitHub Pages : 👉 Consulter la démo Kasa
Ce projet constitue le 7ème projet pratique du parcours Développeur d'application (CDA) JavaScript / React (Bac+3/+4) chez OpenClassrooms. Il valide la maîtrise des concepts fondamentaux de React et la capacité à construire une application web moderne de A à Z.
Andréa PORCHE
GitHub : @AndreaP2A LinkedIn : Andrea Porche Email : andrea.porche2a@gmail.com