Finglefood est une application du bien-manger qui recense les acteurs éco-responsables de l’alimentation clean autour de vous. Avant l’application web, il n’existait seulement qu’une application native iOS. Pour étendre la portée de l’application, j’ai créé l’application web et le site vitrine pour Finglefood à partir de maquettes Figma réalisées par une UX/UI designer, respectivement sous les sous-domaines app.finglefood.com et www.finglefood.com. Le passage d’une infrastructure à l’autre est seamless et se fait sans aucune interruption pour l’utilisateur.
CRÉATION D’UNE APPLICATION WEB
Pour développer l’application web de Finglefood, j’ai utilisé les dernières technologies modernes, notamment Vite, ReactJS et Typescript, que j’ai connecté au back-end Ruby on Rails existant. Vite est un outil de build rapide pour les applications web modernes, qui permet un développement plus rapide et une expérience de développement plus fluide en prenant en charge les dernières fonctionnalités JavaScript. ReactJS est une bibliothèque JavaScript populaire pour la création d’interfaces utilisateur, qui offre une grande flexibilité et permet une mise à jour dynamique des composants de l’application. Typescript est un sur-ensemble de JavaScript qui offre une vérification de type statique pour améliorer la sécurité et la robustesse de l’application.
L’application web de Finglefood consiste en une carte interactive (Mapbox) qui recense les adresses de Finglefood sous la forme de pin-points, permettant à l’utilisateur de rechercher les adresses proches de sa localisation ou de l’adresse de son choix, mais aussi de retrouver une adresse par nom. L’utilisateur peut ensuite consulter les détails d’une adresse à travers une page dédiée, en apprendre plus sur le lieu mais aussi consulter les horaires d’ouvertures, accéder à ses réseaux sociaux ou visualiser ses labels.
J’ai également utilisé Vitest pour tester le code de l’application web de Finglefood. Vitest est une bibliothèque de test rapide et légère pour les applications web modernes, qui permet de tester le code de manière efficace tout en offrant une expérience de développement fluide et rapide. Elle prend en charge les dernières fonctionnalités JavaScript et TypeScript, ce qui facilite la création de tests pour garantir la qualité du code.
CRÉATION D’UN SITE VITRINE
Le site vitrine quant à lui est personnalisable par le client via le CMS Webflow. Webflow nous a permis de créer un site web moderne, élégant et facilement personnalisable par le client, sans nécessiter de compétences en développement web. Le site présente Finglefood, redirige vers l’application iOS ou l’application web, propose des recettes et des interviews de personnalités Finglefood.
Enfin, il est important de noter que le site vitrine et l’application web de Finglefood sont tous deux responsives, ce qui signifie qu’ils sont optimisés pour s’adapter à tous les formats d’écran, qu’il s’agisse d’un ordinateur de bureau, d’un ordinateur portable, d’une tablette ou d’un smartphone. Cela permet d’offrir une expérience utilisateur optimale, quel que soit le dispositif utilisé pour accéder à l’application.
En somme, ce projet a permis de développer une application web rapide, performante et hautement personnalisable pour Finglefood, tout en offrant une expérience utilisateur optimale sur tous les formats d’écran. L’utilisation des dernières technologies modernes et de Vitest a permis de garantir la qualité du code, tout en facilitant la maintenance de l’application à long terme.
Je suis ravi d’avoir pu contribuer à la création de Finglefood et convaincu que cette application aidera de nombreuses personnes à trouver des acteurs éco-responsables de l’alimentation clean près de chez eux.
Type : Application Web, Application Mobile, Site vitrine, Blog
Technologies utilisées : Ruby on Rails, React.js, Swift, UIKit, Webflow
Année : 2023