Kasa

Description

Kasa, une entreprise leader dans la location d’appartements entre particuliers en France, célèbre pour son dynamisme avec plus de 500 annonces postées quotidiennement, m’engage en tant que développeur Front-end freelance pour prendre part à un projet ambitieux : le développement de leur nouvelle plateforme web. Après une décennie d’activité et un site web initial construit en ASP.NET, la nécessité d’une modernisation est devenue évidente en raison de l’accumulation d’un code legacy conséquent.

Laura, la CTO de Kasa, a pris l’initiative d’une refonte totale du site, optant pour une stack technologique entièrement basée sur JavaScript, avec l’adoption de NodeJS pour le Back-end et React pour le Front-end. Cette transition marque une étape significative dans l’évolution de l’entreprise, visant à améliorer l’expérience utilisateur, faciliter la maintenance et soutenir l’expansion future de la plateforme. En parallèle, de nouvelles maquettes ont été commandées à leur designer habituel, également freelance, pour s’assurer que la refonte réponde aux standards modernes en matière de design et d’ergonomie web.

Un rendez-vous est prévu plus tard dans la semaine avec Laura pour discuter des détails de cette mission. Cependant, un récapitulatif m’attend déjà dans ma boîte mail pour me permettre de me familiariser avec les enjeux du projet et les attentes précises de Kasa concernant cette refonte majeure. Ce document est essentiel pour comprendre l’ampleur du travail à réaliser et pour commencer à élaborer une stratégie de développement efficace qui répondra aux besoins de Kasa et à ses ambitions de croissance.

Hello,
Bienvenue pour ton premier jour !

On est vraiment ravis de te compter parmi nous !
Tu vas pouvoir nous aider à donner vie à un chantier sur lequel on travaille depuis plusieurs mois.

Je préfère te mettre par écrit quelques éléments de contexte qui t’aideront à te projeter dans ta mission avant notre point de jeudi.

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 ce fichier JSON pour que tu puisses construire le Front qui correspond.

Contraintes techniques : Tu trouveras les coding guidelines de Kasa ici. Comme tu le verras, nous utilisons habituellement Create React App pour créer les applications React, mais tu peux utiliser un autre bundler comme Vite par exemple si tu préfères.

Voilà j’espère que ce petit récapitulatif t’aura donné suffisamment de pistes pour aborder sereinement tes premiers jours chez nous.

Très bonne journée à toi !

Laura

Plus tard dans la journée, je reçois un e-mail crucial de Paul, le designer avec qui Kasa collabore pour la refonte de sa plateforme. Dans cet e-mail, Paul partage des détails importants concernant le design et les fonctionnalités envisagées pour le nouveau site. Ces informations sont essentielles pour aligner mes efforts de développement sur la vision créative et les objectifs fonctionnels de Kasa.

Paul attache également à son e-mail les maquettes finales, offrant un aperçu visuel des interfaces utilisateur que Kasa souhaite mettre en place. Il souligne l’importance d’une expérience utilisateur fluide et intuitive, mettant l’accent sur la facilité de navigation et l’interaction agréable sur le site. Les fonctionnalités clés mentionnées incluent une recherche avancée d’appartements, des filtres personnalisables, des pages de détail pour chaque annonce avec une galerie photo, ainsi que la possibilité pour les utilisateurs de poster des avis et des évaluations.

Paul insiste également sur l’importance de l’adaptabilité du design, assurant que le site soit entièrement responsive pour offrir une expérience optimale sur une large gamme d’appareils, des smartphones aux ordinateurs de bureau. Il évoque l’utilisation de composants React modernes et réutilisables pour faciliter le développement et la maintenance du site.

Cet e-mail me fournit une base solide pour commencer le développement, me permettant de mieux comprendre les attentes de Kasa et de m’assurer que le produit final reflète fidèlement les designs et fonctionnalités souhaités. Avec cette orientation claire, je peux désormais planifier mon travail de développement de manière efficace, en me concentrant sur la création d’une plateforme robuste, esthétiquement plaisante, et facile à utiliser pour les utilisateurs finaux.

Salut,

Bienvenue parmi nous ! Laura m’a dit de te briefer sur le design de la nouvelle version du site alors voici les infos clés.

Design : Voici les maquettes sur Figma pour le design d’interface.

Pour avoir un rendu le plus réaliste possible de l’application, utilise les prototypes du site disponibles ici.

Tu verras qu’il y a des animations sur les menus déroulants mais ce n’est pas indispensable de les intégrer dans ton code à ce stade.

J’ai l’habitude de travailler avec la logique de composants sur Figma, Sandra m’a dit que ça te faciliterait le travail sur React. Tu trouveras toutes les ressources dont tu as besoin directement dans la maquette (logo, icônes pour les composants, etc.). Pour cela, il suffit de cliquer sur la ressource souhaitée et de faire “Exporter” au format voulu. Sur les vignettes des logements, pour les images de couverture, j’ai mis une rectangle orange que tu peux remplacer par l’image correspondante.

Contraintes fonctionnelles – Quelques précisions sur les fonctionnalités du site :

  • 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 Collapse 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.

Bon courage pour le développement, j’ai hâte de voir ce que ça va donner !

Paul

Details
  • Date: mars 16, 2023
  • Categories: Formation JavaScript ReactReact
  • technologies: REACT
  • JAVASCRIPT
  • CSS3
  • maquette: LINK
  • prototype: LINK
  • github: LINK
  • hebergement: VERCEL
  • url: kasa.jeremyteurterie.com