Kasa

Développez une application Web avec React et React Router

Projet 11 du parcours "Développeur d'application - JavaScript React" d'OpenClassrooms

📚 Contexte

En tant que développeuse front-end freelance, Kasa m'a recruté pour développer sa nouvelle plateforme web.

Kasa est dans le métier de la location d’appartements entre particuliers depuis près de 10 ans maintenant. Avec plus de 500 annonces postées chaque jour, Kasa fait partie des leaders de la location d’appartements entre particuliers en France.

🧍‍♂️ La demande client

Refonte totale du site actuel pour passer à une stack complète en JavaScript avec NodeJS côté back-end, et React côté front-end.
L'équipe back-end n'étant pas encore formée, les données sont stockées dans un fichier JSON

💡 Outils et technos

⚙ Contraintes techniques

➡ React

• Aucune librairie externe
• Découpage en composants modulaires et réutilisables
• Un composant par fichier
• Structure logique des différents fichiers
• Utilisation des props entre les composants
• Utilisation du state dans les composants quand c'est nécessaire
• Gestion des événements
• Utilisation de composants fonctionnels

➡ React Router

• Les paramètres des routes sont gérés par React Router dans l'URL pour récupérer les informations de chaque logement
• Il existe une page par route
• La page 404 est renvoyée pour chaque route inexistante, ou si une valeur présente dans l’URL ne fait pas partie des données renseignées
• La logique du routeur est réunie dans un seul fichier
• Le code ne doit pas produire d'erreur ou de warning dans la console

➡ UX
Gallery :

• Si l'utilisateur se trouve à la première image et qu'il clique sur "Image précédente", la galerie affiche la dernière image
• Si l'utilisateur se trouve à la dernière image et qu'il clique sur "Image suivante", la galerie affiche la première image
• S'il n'y a qu'une seule image, les flèches ainsi que la numérotation n'apparaissent pas

Collapse :

• Par défaut, les Collapses sont fermés à l'initialisation de la page
• Si le Collapse est ouvert, le clic de l'utilisateur permet de le fermer
• Si le Collapse est fermé, le clic de l'utilisateur permet de l'ouvrir

🏆 Compétences évaluées

➡ Créer des composants avec React

➡ Développer les routes d'une application web avec React Router

➡ Initialiser une application web avec un framework

🔨 Installation du projet

➡ Télécharger le dossier ducode et le dézipper
➡ Ouvrir le dossier dans VSCode (ou tout autre IDE)
➡ Installer les nodes-modules : pnpm install
➡ Lancer l'application : pnpm run dev