{"id":25052650,"url":"https://github.com/andreap2a/p7-kasa","last_synced_at":"2026-04-13T12:31:23.406Z","repository":{"id":263884294,"uuid":"889601265","full_name":"AndreaP2A/P7-Kasa","owner":"AndreaP2A","description":"7ème projet pratique réalisé dans le cadre du cursus \"Développeur d'Application - Javascript React\" chez OpenClassrooms.","archived":false,"fork":false,"pushed_at":"2024-12-04T14:17:50.000Z","size":486,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-02-06T10:53:19.116Z","etag":null,"topics":["app","kasa","openclassrooms-frontend","openclassrooms-frontend-path","react","react-router","reactjs","student"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/AndreaP2A.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-11-16T18:35:07.000Z","updated_at":"2025-01-13T13:05:42.000Z","dependencies_parsed_at":"2024-12-13T05:06:12.048Z","dependency_job_id":"2b6c501f-a1d5-4c3b-bdc4-2cc889057018","html_url":"https://github.com/AndreaP2A/P7-Kasa","commit_stats":null,"previous_names":["andreap2a/p7-kasa","andreap2a/p8-kasa"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AndreaP2A%2FP7-Kasa","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AndreaP2A%2FP7-Kasa/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AndreaP2A%2FP7-Kasa/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AndreaP2A%2FP7-Kasa/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/AndreaP2A","download_url":"https://codeload.github.com/AndreaP2A/P7-Kasa/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246426979,"owners_count":20775486,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["app","kasa","openclassrooms-frontend","openclassrooms-frontend-path","react","react-router","reactjs","student"],"created_at":"2025-02-06T10:42:47.155Z","updated_at":"2026-04-13T12:31:23.395Z","avatar_url":"https://github.com/AndreaP2A.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# 🏠 Kasa — Application de Location Immobilière entre Particuliers\n![React](https://img.shields.io/badge/React-20232A?style=for-the-badge\u0026logo=react\u0026logoColor=61DAFB)\n![React Router](https://img.shields.io/badge/React_Router-CA4245?style=for-the-badge\u0026logo=react-router\u0026logoColor=white)\n![SASS](https://img.shields.io/badge/Sass-CC6699?style=for-the-badge\u0026logo=sass\u0026logoColor=white)\n![JavaScript](https://img.shields.io/badge/JavaScript-F7DF1E?style=for-the-badge\u0026logo=javascript\u0026logoColor=black)\n![HTML5](https://img.shields.io/badge/HTML5-E34F26?style=for-the-badge\u0026logo=html5\u0026logoColor=white)\n![CSS3](https://img.shields.io/badge/CSS3-1572B6?style=for-the-badge\u0026logo=css3\u0026logoColor=white)\n![Figma](https://img.shields.io/badge/Figma-F24E1E?style=for-the-badge\u0026logo=figma\u0026logoColor=white)\n\nKasa 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.\n\n## 📌 Présentation du Projet\nDans 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.\n\n## 🎯 Objectifs techniques\n- **Architecture React** : Conception d'une application modulaire décomposée en composants atomiques et layouts réutilisables.\n- **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.\n- **Hooks \u0026 State Management** : Utilisation des React Hooks (`useState`, `useEffect`, `useParams`) pour piloter la logique d'affichage et la récupération des données.\n- **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.\n- **Fidélité au Design (Pixel Perfect)** : Intégration rigoureuse des maquettes Figma, incluant les animations et les comportements interactifs (slideshow, collapse).\n\n## ✨ Fonctionnalités\nLe projet propose une expérience utilisateur complète et interactive :\n\n### 🖼️ Galerie / Slideshow Dynamique\nUn 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.\n\n### 🔽 Menus Accordéons (Collapse)\nDes composants interactifs et accessibles permettant d'axer l'affichage du contenu (descriptions et équipements), utilisés sur les fiches logements et la page \"À propos\".\n\n### ⭐️ Système de Notation\nAffichage dynamique d'une note sur 5 étoiles pour chaque logement, reflétant précisément les données issues du catalogue.\n\n### 📱 Design 100% Responsive\nL'interface a été entièrement optimisée pour offrir une navigation confortable sur mobile, tablette et desktop.\n\n## 🚀 Installation et Utilisation\n### Prérequis\n- [Node.js](https://nodejs.org/) (version 14 ou supérieure recommandée)\n- Un gestionnaire de paquets (NPM ou Yarn)\n\n### Installation locale\n1. Clonez le dépôt :\n   ```bash\n   git clone https://github.com/AndreaP2A/P7-Kasa.git\n   ```\n2. Accédez au dossier :\n   ```bash\n   cd P7-Kasa/my-app\n   ```\n3. Installez les dépendances :\n   ```bash\n   npm install\n   ```\n4. Lancez l'application en mode développement :\n   ```bash\n   npm start\n   ```\n\n## 🛠️ Structure du projet\nL'architecture suit une logique modulaire orientée composants :\n\n```text\n.\n├── public/                 # Assets publics (index.html, favicon)\n├── src/\n│   ├── assets/             # Images et logos du projet\n│   ├── components/         # Composants UI (Card, Rating, Slideshow, Collapse...)\n│   ├── data/               # Données JSON des logements\n│   ├── layouts/            # Composants de structure (Header, Footer)\n│   ├── pages/              # Vue des pages (Home, House, About, Error404)\n│   ├── routes/             # Configuration de React Router\n│   ├── sass/               # Fichiers sources SASS (Base, Utils, Components...)\n│   ├── services/           # Logique de récupération de données\n│   ├── App.jsx             # Composant racine\n│   └── index.jsx           # Point d'entrée de l'application\n└── package.json            # Dépendances et scripts\n```\n\n## 🌐 Aperçu en ligne\nLe projet est accessible en ligne via GitHub Pages : 👉 [Consulter la démo Kasa](https://andreap2a.github.io/P7-Kasa/home)\n\n## 🎓 Contexte Pédagogique\nCe 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.\n\n## 👨‍💻 Auteur\nAndréa PORCHE\n\nGitHub : [@AndreaP2A](https://github.com/AndreaP2A)\nLinkedIn : [Andrea Porche](https://www.linkedin.com/in/andrea-porche-2a/)\nEmail : [andrea.porche2a@gmail.com](mailto:andrea.porche2a@gmail.com)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fandreap2a%2Fp7-kasa","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fandreap2a%2Fp7-kasa","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fandreap2a%2Fp7-kasa/lists"}