Kasa: projet scolaire front-end

Kasa est un projet d'intégration front-end dans le cadre de ma formation OpenClassRooms. Je vais vous présenter ici:

  • Les technologies utilisées
  • Les fonctionnalités
  • Les éléments de style un peu complexes
  • Les difficultés rencontrées

Je vais devoir utiliser le langage technique. Je vous propose donc, avant cela, un résumé compréhensible par un non-développeur.

Vous pouvez consulter le code ici: https://github.com/AlexandreBaumann/p6_react

Résumé

Ce projet a été réalisé dans le cadre de ma formation OpenClassRooms. Il s'agissait de développer le front end d'un site en utilisant React.js, une librairie javascript. Il s'agissait d'une application présentant des logements. La page principale présentait l'ensemble, puis chacun avait une page produit dédiée.

L'un des challenges était de générer procéduralement ces pages produits. C'était aussi notre premier contact avec react, qui a des principes de fonctionnements spécifiques, nécessitant la compréhension de notions comme le "state".

Présentation des technologies utilisées

React.js

Le site repose sur React.js, une librairie javascript permettant de créer des "single page application".

Dépendances

Parmi les dépendances, il y a notamment:

  • Sass pour permettre le SCSS.
  • Prettier pour le formattage automatique.

Autres

J'utilise le SCSS pour le style.

Nous avions un fichier .json pour faire office de base de données.

Fonctionnalités

les fonctionnalités à développer étaient :

  • Un carousel d'images, irrigué par les liens des images, renseignés dans le .json
  • Un élément permettant de dérouler du texte ("collapse")
  • Un routage dynamique et un remplissage automatique à partir des informations du .json.
  • Une boucle d'affichage de cards

Le style

Difficultés rencontrées

Avoir une page 404 sur une des pages produits lorsque l'id, utilisé dans l'url pour le routage dynamique, n'était pas présent dans la base de données a demandé d'être astucieux. En effet, le routeur que j'avais codé considérait que c'était une route valide. J'ai donc ajouté une redirection en amont du composant définissant les fiches produits (Prezpage) si l'id renseigné ne correspondait à aucun élément de la base de données.

Ayant un écran relativement petit, j'avais oublié de mettre une largeur maximale aux pages, ce qui dégradait l'affichage pour les écrans aux largeurs supérieures à 2000px.

Globalement, je ne me souviens pas de difficultés particulières.