Kasa

Besoin Client

Le site de Kasa, une plateforme de location de logements entre particuliers, a été initialement développé en ASP.NET il y a plus de 10 ans. Avec l'évolution des technologies et pour répondre aux attentes modernes des utilisateurs, une refonte complète du site était nécessaire. L'objectif principal était de migrer vers une stack JavaScript moderne, en utilisant React pour le front-end et Node.js pour le back-end, afin d'améliorer la maintenabilité, les performances et l'expérience utilisateur.

Contexte et Objectifs du Projet

Le projet s'inscrit dans le cadre de la formation Développeur d'application JavaScript React chez OpenClassrooms. L'objectif était de refondre le site existant en adoptant une architecture moderne, en se basant sur les maquettes fournies via Figma, et en respectant les coding guidelines établies.

Technologies et Bibliothèques Utilisées

• React 18 : Pour la création de composants réactifs et modulaires.
• React Router : Pour la gestion des routes et de la navigation au sein de l'application.
• SASS : Pour le stylage avancé et la maintenance aisée des feuilles de style.
• Figma : Utilisé pour les maquettes et la référence des composants. :contentReference[oaicite:0]0

Processus de Développement

• Initialisation du Projet : Mise en place de l'environnement de développement avec Create React App, intégration de React Router pour la gestion des routes, et configuration de SASS pour le stylage.
• Développement des Composants : Création de composants modulaires et réutilisables en React, en suivant les bonnes pratiques et en respectant les maquettes fournies.
• Gestion des Routes : Implémentation de la navigation entre les différentes pages du site en utilisant React Router, assurant une expérience utilisateur fluide.
• Tests et Validation : Réalisation de tests pour vérifier le bon fonctionnement de chaque composant et de l'application dans son ensemble.

Résultats et Bénéfices

• Modernisation de l'Application : Transition réussie vers une stack JavaScript moderne, améliorant la maintenabilité et les performances du site.
• Expérience Utilisateur Améliorée : Interface utilisateur plus réactive et intuitive, conforme aux standards actuels du web.
• Facilité de Maintenance : Codebase structurée et modulaire, facilitant les futures évolutions et ajouts de fonctionnalités.

Compétences Développées

• Initialisation d'une Application Web avec un Framework : Maîtrise de la configuration et du démarrage d'un projet React.
• Création de Composants avec React : Capacité à développer des composants réutilisables et maintenables.
• Développement des Routes avec React Router : Compétence dans la gestion de la navigation au sein d'une application monopage.

Ressources et Outils

• Maquettes : Figma pour la conception et la référence des composants.
• Gestion de Projet : Suivi des tâches et des deadlines pour assurer le respect du planning.
• Éditeur de Code : Visual Studio Code pour le développement de l'application.
• Contrôle de Version : Git et GitHub pour la gestion des versions et la collaboration.

Prérequis

• Git : Pour cloner le projet et gérer les versions du code.
• Node.js : Pour exécuter les commandes et installer les dépendances.
• npm : Pour la gestion des packages JavaScript et l'installation des dépendances.

Accès au Projet

• Code Source : github
• Site Déployé : kasa.fr

Conclusion

La refonte du site Kasa a permis de moderniser l'application en adoptant des technologies actuelles, améliorant ainsi l'expérience utilisateur et facilitant la maintenance future. Ce projet démontre une expertise dans le développement front-end moderne et la capacité à mener à bien des projets de refonte complète.

Ressources