https://github.com/andreap2a/p7-kasa
7ème projet pratique réalisé dans le cadre du cursus "Développeur d'Application - Javascript React" chez OpenClassrooms.
https://github.com/andreap2a/p7-kasa
app kasa openclassrooms-frontend openclassrooms-frontend-path react react-router reactjs student
Last synced: 2 months ago
JSON representation
7ème projet pratique réalisé dans le cadre du cursus "Développeur d'Application - Javascript React" chez OpenClassrooms.
- Host: GitHub
- URL: https://github.com/andreap2a/p7-kasa
- Owner: AndreaP2A
- Created: 2024-11-16T18:35:07.000Z (over 1 year ago)
- Default Branch: master
- Last Pushed: 2024-12-04T14:17:50.000Z (over 1 year ago)
- Last Synced: 2025-02-06T10:53:19.116Z (over 1 year ago)
- Topics: app, kasa, openclassrooms-frontend, openclassrooms-frontend-path, react, react-router, reactjs, student
- Language: JavaScript
- Homepage:
- Size: 475 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 🏠 Kasa — Application de Location Immobilière entre Particuliers
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.
## 📌 Présentation du Projet
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.
## 🎯 Objectifs techniques
- **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).
## ✨ Fonctionnalités
Le projet propose une expérience utilisateur complète et interactive :
### 🖼️ Galerie / Slideshow Dynamique
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.
### 🔽 Menus Accordéons (Collapse)
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".
### ⭐️ Système de Notation
Affichage dynamique d'une note sur 5 étoiles pour chaque logement, reflétant précisément les données issues du catalogue.
### 📱 Design 100% Responsive
L'interface a été entièrement optimisée pour offrir une navigation confortable sur mobile, tablette et desktop.
## 🚀 Installation et Utilisation
### Prérequis
- [Node.js](https://nodejs.org/) (version 14 ou supérieure recommandée)
- Un gestionnaire de paquets (NPM ou Yarn)
### Installation locale
1. Clonez le dépôt :
```bash
git clone https://github.com/AndreaP2A/P7-Kasa.git
```
2. Accédez au dossier :
```bash
cd P7-Kasa/my-app
```
3. Installez les dépendances :
```bash
npm install
```
4. Lancez l'application en mode développement :
```bash
npm start
```
## 🛠️ Structure du projet
L'architecture suit une logique modulaire orientée composants :
```text
.
├── 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
```
## 🌐 Aperçu en ligne
Le projet est accessible en ligne via GitHub Pages : 👉 [Consulter la démo Kasa](https://andreap2a.github.io/P7-Kasa/home)
## 🎓 Contexte Pédagogique
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.
## 👨💻 Auteur
Andréa PORCHE
GitHub : [@AndreaP2A](https://github.com/AndreaP2A)
LinkedIn : [Andrea Porche](https://www.linkedin.com/in/andrea-porche-2a/)
Email : [andrea.porche2a@gmail.com](mailto:andrea.porche2a@gmail.com)