Tunnel de vente
Mise en place
En démarrant sur la mission, j'ai très vite compris d'où venait leur problème de régressions.
IL N'AVAIENT PAS DE GIT 😱😱😱😱😱😱😱😱. Je ne savais même pas que c'était encore possible. Pas étonnant que les mises en prod soient source de tensions.
Mettre git sur le legacy
La site était un Wordpress et leur tunnel était à la fois en php et sur 3 fichier JS de 3000 lignes. Un vrai sac de noeuds. Mais bon en l'état, ça fonctionnait. Donc plutôt que de tout raser tout de suite en proposant une stack plus moderne, j'ai proposer de mettre en place git sur leur wordpress. Pas pour versionner le contenu du site vitrine car wordpress le fait très bien tout seul, mais bien pour versionner la partie funnel.
Mettre git sur un dossier ftp, c'est pas franchement évident. Mais il existe une solution ==> git-ftp
Avec git-ftp, il est possible de synchroniser un dossier distant ftp avec un git.
Une fois que ça a été mis en place, je pouvais me concentrer sur le refonte du funnel dans une v2.
Développer la v2
Voici la stack utilisée côté front
React
Evidemment
Typescript
8 ans que j'utilise ce langage au lieu de JS. Je ne saurais faire sans.
Vite
Pas besoin de SEO ou de features compliquées de NextJS. Et puis, même avec Vite, on peut faire du Serverside.
Tailwind
Pareil, je ne m'en passe plus.
React Aria Component
Gros besoin d'accessibilité des formulaires.
React Hook Form
Le funnel comprend des formulaires complexes avec des affichages et validation conditionnelles. Cette lib gère ça très simplement
React Query
Obligatoire quand on tape sur une API Rest.
Côté back, avec l'aide de Manon et Alex, 2 experts AWS, j'ai pu monter en compétences sur le framework
Serverless
Les avantages d'utiliser Serverless sont nombreux :
- Évolutivité automatique : Les applications Serverless s'adaptent automatiquement à la demande, augmentant ou diminuant les ressources sans intervention manuelle.
- Coût réduit : Vous payez uniquement pour le temps d'exécution et les ressources consommées par vos fonctions, ce qui réduit les coûts comparé aux modèles traditionnels où l'infrastructure doit être provisionnée en permanence.
- Gestion simplifiée de l'infrastructure : Les fournisseurs de services Serverless gèrent l'infrastructure pour vous, vous permettant de vous concentrer sur le code et la logique métier.
- Développement plus rapide : Le développement est souvent accéléré grâce à la possibilité de déployer des fonctions indépendantes, facilitant les mises à jour et les déploiements continus.
- Évolutivité mondiale : Les fournisseurs tels qu'AWS Lambda, Azure Functions, et Google Cloud Functions peuvent déployer des fonctions dans plusieurs régions, assurant une faible latence et une disponibilité élevée.
- Meilleure utilisation des ressources : Les fonctions s'exécutent en réponse à des événements, ce qui permet une utilisation plus efficiente des ressources à la demande plutôt que de maintenir des serveurs sous-utilisés.
- Maintenance allégée : La maintenance liée aux correctifs de sécurité, à la mise à jour de l'OS, et à la gestion du serveur est prise en charge par le fournisseur de services, réduisant la charge de travail de l'équipe DevOps.
AWS Lambdas
C'est hyper complet et ça permets de régler au poil de nez prêt le besoin exacte et éviter les surcoût inutiles
MongoDB
BDD orienté document pour plus de flexibilités. Pas mal adpaté à un funnel que les clients utilisent qu'une seule fois
Blinder la CI / CD
Pour dire adieu une bonne fois pour toutes aux problèmes de regression, voici la stratégie que j'ai adoptée :
- Mise en place d'ES Lint avec des règles assez contraignantes
- Mise en place de tests unitaires
- Mise en place de test E2E avec cypress et coder en TDD
- Utilisation d'husky pour linter et tester unitairementle code avant chaque push
- Utilisation des github action pour lancer les testes e2e avant déployement sur vercel.
- Utilisation de release-please pour générer des release notes propres
- Utilisation de commitizen
Les défis rencontrés
Tout ce que j'ai mis en place plus haut, je maîtrisais. Donc ça roulait. En revanche, certaines choses m'ont donner un peu de fil à retordre.
Jongler entre le legacy et la version 2
Pas évident pour un dev fullstack typescript de se replonger dans du bon vieux php et js. Parfois envie de tout supprimer et se concentrer uniquement sur la v2. Mais le client lui il veut pouvoir vendre et pas attendre que la v2 soit prête, donc bien obliger de faire évoluer le site legacy tout en développant la v2.
Générer le contrat de location en pdf
A la fin du tunnel de vente, l'utilisateur est inviter à signer électroniquement un pdf de 40 pages. Pour faire cela, j'ai codé une lambda coté back qui utilise la lib Pupeteer. Ça simule l'ouverture d'un browser virtuel et converti du contenu html en pdf. Il faut ensuite envoyer le tout en base 64 vers SlimPay, le prestataire pour la signature.
Calculer le nombre de panneaux solaire à mettre sur un toit
Dans le tunnel, l'utilisateur est invité à se géolocaliser et à dessiner les contour de sa toiture. Grâce à google map, j'ai pu mettre en place un système de polygone éditable en drag and drop. Ensuite, avec un algorythme, je calcule le nombre de panneaux solaire qu'on peut y intégrer. Cela en tenant compte des formes de toitures non rectangulaire et sachant l'inclinaison de la toiture.
Ce qu'en pensen mes clients.
.webp){kind=icon}
PH a été Tech-Lead Front-End chez hestiia pendant un an et demi et a joué un rôle central dans le développement de nos projets web et mobiles. Son expertise technique en React et NextJS a permis de lancer notre site vitrine avec succès, offrant une interface utilisateur moderne, performante et hautement réactive. PH s'est également distingué par son travail sur notre application mobile, où il a pris un concept initial sur Figma et l'a transformé en une application complète, disponible sur le Google Play Store et l'App Store. Sa maîtrise de React Native et d'Expo a été cruciale pour ce projet, assurant une intégration fluide et une expérience utilisateur optimale. PH possède également une solide expérience en méthodologies agiles et en Scrum, ce qui a grandement facilité la gestion de projets et l'organisation des équipes. Grâce à son expertise, nous avons pu effectuer des mises en production régulières et sans heurts, garantissant la qualité et la stabilité de nos applications.
Rapide, efficace, force de proposition, Pierre-Henri s'adapte vite à de nouveaux environnements et de nouvelles technologies et sera un bon atout pour vos projets !
Pierre-Henri (alias PH) m'a rejoint à la team Lead des développeurs front chez VP Auto. C'est quelqu'un d'extrêmement compétent, fiable et efficace. Il a rapidement pris en main le code source et a été une force de proposition et un des éléments clés de nos réalisations. A la fois enthousiaste et créatif, sa collaboration a permis d'atteindre un niveau de performance inimaginable au début de la plateforme, qui se traduit par une réduction drastique du nombre de bugs, une réduction des temps de réponse, une augmentation des livrables et j'en passe.Techniquement il a produit un code lisible, simple et efficace. De même, il s'est montré volontaire pour faire progresser ses collègues en partageant ses connaissances sur Typescript et React. Humainement, il a apporté une ambiance agréable au travail et a été une source de motivation pour les collaborateurs. Evoluer dans une équipe avec Pierre-Henri, c'est s'assurer d'être dans un milieu sain, ludique et jovial. C'est un véritable plaisir de travailler avec lui !
J'ai eu l'opportunité de travailler avec Pierre-Henri sur la conception d'un simulateur solaire pour notre site internet et je suis extrêmement satisfait du résultat. Il a su faire preuve d'écoute en tenant compte de mes besoins et en étant force de proposition à chaque étape du projet tant sur les choix techniques que sur l'UX et le développement. Sa polyvalence et son expertise en développement front et back ont été un réel atout pour la réussite du projet. Je le recommande vivement pour son professionnalisme et sa capacité à délivrer un travail de qualité.
Pierre Henri est intervenu en renfort de l'équipe de développement. Il a su rapidement s'intégrer, s'adapter à notre organisation et être force de proposition durant toute la durée de sa prestation (1 an et demi).Il a été un soutien important et nous retravaillerons avec lui avec plaisir.
J'ai eu la chance de directement travailler avec Pierre-Henri dans la même équipe et ça a été un grand plaisir ! C'est un excellent développeur avec beaucoup d'expérience. Il est très impliqué et très appliqué dans son travail. J'ai beaucoup appris juste en relisant son code qui est robuste et de grande qualité, d'autant plus qu'il est très à cheval sur les bonnes pratiques. Franchement je ne me fais aucun soucis pour les projets sur lesquels il est intervenu et j'apprécierai grandement retravailler avec lui de nouveau à l'avenir.