Si vous clonez le projet, ouvrez votre éditeur de code. Dans le répertoire du projet, tapez la commande suivante dans le terminal : npm install puis npm run dev.
Cela exécute l’application en mode développement sur le port 5173.
Ouvrez "http://localhost:5173" pour l’afficher dans votre navigateur.
La page se recharge automatiquement lorsque vous apportez des modifications.
Vous pouvez également voir les erreurs signalées par Eslint dans la console.
Vous êtes développeur front-end en freelance pour Kasa, le leader de la location d’appartements entre particuliers.
Le site de Kasa a été codé il y a maintenant plus de 10 ans en ASP.NET avec un code legacy important. Laura, la CTO, a donc lancé une refonte totale pour passer à une stack complète en JavaScript avec NodeJS côté back-end, et React côté front-end. Kasa en a également profité pour commander de nouvelles maquettes auprès de son designer habituel.
Vous trouvez le récapitulatif suivant dans votre boîte mail :
Objet : Brief refonte site Kasa
De : Laura
À : Moi
Hello, Bienvenue ! Tu vas pouvoir nous aider à donner vie à un chantier sur lequel on travaille depuis plusieurs mois.
Ton objectif : Démarrer le projet React et développer l’ensemble de l’application, les composants React, les routes React Router, en suivant les maquettes Figma (responsives !) et toutes les infos que je te donne ci-dessous. Et ce avec un code de qualité !
Back-end/data : Le recrutement de la personne en charge du back-end n'est pas terminé et va prendre plus de temps que prévu. Du coup, il va falloir que tu fasses sans pour le moment. Je t'ai extrait les 20 dernières annonces de logements dans un fichier JSON pour que tu puisses construire le Front qui correspond.
Design : Tu trouveras ci-joint les maquettes, sur Figma, pour le design d’interface.
Contraintes fonctionnelles :
Pour le défilement des photos dans la galerie (composant 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. Inversement, quand l'image affichée est la dernière de la galerie, si l'utilisateur clique sur "Image suivante", la galerie affiche la première image. S'il n'y a qu'une seule image, les boutons "Suivant" et "Précédent" ainsi que la numérotation n'apparaissent pas. La galerie doit toujours rester de la même hauteur, celle indiquée sur la maquette Figma. Les images seront donc coupées et centrées dans le cadre de l’image.
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. Inversement, si le Collapse est fermé, un clic permet de l'ouvrir.
Très bonne journée à toi !
Laura, CTO
Dans ce projet, vous allez implémenter le front-end d’une application en utilisant React et React Router pour créer une expérience utilisateur moderne et réactive.
Vous travaillerez sur la logique de présentation des données et les composants React.
Vous utiliserez React Router pour configurer la navigation entre les différentes pages de l'application.
Le projet se concentrera exclusivement sur le développement front-end, en se basant sur les maquettes fournies et en utilisant des données simulées extraites d'un fichier JSON.
Vous débuterez le projet avec Create React App, un outil qui simplifie la configuration initiale d'une application React. Vous utiliserez également Node.js pour exécuter du code JavaScript en dehors du navigateur.
La maîtrise de React et de React Router est essentielle dans le développement web moderne, en particulier pour la création d'applications web dynamiques et réactives.
L'utilisation de SASS pour gérer le CSS et l'implémentation d’animations CSS sont également des compétences clés pour améliorer l'expérience utilisateur.
Ces compétences vous permettront de créer des applications web interactives et visuellement attrayantes, très demandées dans l'industrie du développement web.
Le site avait été initialement développé en février 2024 avec Create React App et Node.js 20.11.1.
Create React App ayant été déprécié en 2025, plusieurs dépendances sont devenues obsolètes et certaines vulnérabilités n’étaient plus corrigées.
J’ai donc entrepris une migration complète vers :
- Vite, un bundler moderne, plus rapide et maintenu
- Node.js 24.14.0, dernière version LTS au moment de la migration
Cette mise à jour permet désormais au projet d’être :
- plus performant
- plus léger
- plus simple à maintenir
- sans vulnérabilités connues
Le site est maintenant entièrement à jour et bénéficie d’un environnement moderne et sécurisé.
Vous pouvez voir le projet en cliquant ici : Kasa
