🏡 Kasa – Développement Front-End d'une plateforme de location en React

Aperçu

Contexte

Kasa, acteur majeur de la location d'appartements entre particuliers en France, m’a confié la refonte complète de son site web côté front-end. L’objectif était de moderniser une ancienne application ASP.NET avec une nouvelle stack JavaScript : React pour le front-end et Node.js côté back-end (non encore disponible au moment du développement).

En tant que développeur front-end freelance, j'ai eu pour mission de développer l'application React from scratch à partir de maquettes Figma et d’un fichier JSON contenant les 20 dernières annonces de logements.

Objectif

• Créer une application React complète à partir de maquettes Figma responsives
• Implémenter les composants dynamiques : carrousel d’images, collapsibles, fiche logement, page d’erreur 404, etc.
• Gérer les routes via React Router
• Suivre des standards de qualité de code stricts et une organisation modulaire
• Styliser l’ensemble avec Sass, sans bibliothèque externe

Fonctionnalités développées

• Routing via React Router :

  • Page d’accueil listant tous les logements
  • Page logement avec affichage dynamique selon l’URL (/logement/:id)
  • Page À propos avec collapsibles
  • Page 404 personnalisée pour les routes inexistantes ou IDs non trouvés

• Composants dynamiques :

  • Gallery : carrousel circulaire avec gestion des extrémités
  • Collapse : sections rétractables, ouvertes/fermées au clic
  • Tags, host cards, rating stars – entièrement réutilisables

• Gestion des données JSON :

  • Chargement dynamique depuis un fichier local
  • Affichage conditionnel selon les données

Contraintes techniques respectées

• ✅ Utilisation de Create React App
• ✅ Styling 100 % en Sass
• ✅ Pas de bibliothèque externe (UI, animation, etc.)
• ✅ Code sans erreur ni warning en console
• ✅ Composants modulaires et réutilisables
• ✅ Props, state, events : bonnes pratiques React respectées
• ✅ Logique de routage centralisée
• ✅ Responsive design selon les maquettes Figma

Stack technique

• React (Functional Components)
• React Router DOM
• Sass
• Figma (design)
• JSON local pour simuler les données du back-end

Compétences développées

• Architecture d'une SPA React
• Routing avancé et gestion dynamique d’URL
• Développement UI à partir de maquettes responsives
• Conception de composants réutilisables
• Styling avec Sass en suivant une charte graphique
• Manipulation conditionnelle des données
• UX : gestion fluide des erreurs et navigation claire

Liens utiles