Chemins de vie: un site vitrine bien-être

Chemins de vie est un site vitrine pour un masseur-sophrologue. 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, si autorisé, à l'adresse suivante: https://github.com/AlexandreBaumann/cdv

Résumé

Le site est développé avec Next.js, un framework javascript basé sur React.js. Il n'y a pas encore de base de données.

Les deux principaux challenges ont été de rendre l'interface responsive, la mise en page étant assez complexe, et de faire fonctionner le formulaire sur l'hébergement.

Présentation des technologies utilisées

Next.js

Le site repose sur Next.js, un framework javascript basé sur React.js. React est, avec Vue.js et Angular.js, l'un des langages de "single page application"? Comme les autres, il peut poser des problèmes de référencement et de performance. Next.js compense ce problème grâce à la génération de site statique ou côté serveur (server side rendering). On a ainsi la fluidité de navigation des SPA tout en conservant une conformité aux bonnes pratiques du référencement naturel (SEO).

Dépendances

Parmi les dépendances, il y a notamment:

  • Sass pour permettre le SCSS.
  • Prettier pour le formattage automatique.
  • Express pour gérer le server.js, qui sert de point d'entrée à l'application.
  • Dotenv pour les variables d'environnement.

J'utilise également Typescript pour avoir un code plus propre.

Autres

J'utilise le SCSS pour le style.

Fonctionnalités

Le formulaire est la seule fonctionnalité.

Le style

Le style a demandé beaucoup d'efforts, notamment la gestion de l'affichage du header sur deux points:

  • La gestion de la position:fixed de la barre de menu et la disparition de la barre supérieure.
  • Le menu déroulant et le menu hamburger (version mobile).
  • Pour la première, j'ai utilisé deux state: un pour savoir si l'utilisateur a scrollé de plus de 30px ou non et l'autre pour identifier la hauteur de la barre de menu. Quand l'utilisateur descend de 30px, une division vide de la hauteur de la barre de menu s'ajoute en haut de la page. Cela permet d'avoir une transition fluide.

    La seconde logique se trouve dans les composants dédiés aux barres de navigation: navbarsmall (version mobile) et navbarwide (versions tablette et bureau). Leur affichage est géré par des states: un pour le sous-menu "prestations" et un pour le menu hamburger pour la version mobile.

Difficultés rencontrées

Sur le fonctionnement

C'était ma première API vers le serveur SMTP de mon hébergeur (O2Switch), il a fallu trouver les bonnes informations à renseigner.

Mettre en ligne ce genre d'applications sur un hébergement basé sur le cpanel peut être un challenge. Le formulaire, notamment, ne fonctionnait pas. Cela a été résolu en ajoutant un certificat SSL.

Sur la mise en page

Rendre responsive la page d'accueil a été un challenge, en raison du grand nombre de variables qui doivent chaque fois changer et de l'utilisation d'une hauteur de division s'adaptant à la hauteur de l'écran.