Yuka Clone - Portfolio Yaël Betton

Aperçu du projet

Cette application mobile développée avec React Native est un clone de l'application Yuka, qui permet aux utilisateurs de scanner le code-barres d'un produit alimentaire pour obtenir instantanément des informations détaillées sur sa composition et sa qualité nutritionnelle.

L'application fournit une note de qualité basée sur plusieurs critères : les valeurs nutritionnelles (calories, graisses, sucres, sel), la présence d'additifs potentiellement nocifs, et la qualité générale des ingrédients. Elle propose également des alternatives plus saines pour aider les utilisateurs à faire des choix alimentaires plus conscients au quotidien.

Fonctionnalités principales

Scanner de code-barres utilisant la caméra du smartphone pour une reconnaissance rapide et précise
Affichage détaillé des informations nutritionnelles et de la liste complète des ingrédients
Système de notation visuelle avec code couleur (excellent, bon, moyen, mauvais)
Analyse détaillée des additifs présents dans le produit avec leur niveau de risque
Suggestions d'alternatives plus saines dans la même catégorie de produits
Historique des produits scannés pour un suivi personnalisé
Interface responsive et intuitive optimisée pour mobile

Technologies utilisées

Le projet est développé avec React Native, un framework permettant de créer des applications mobiles natives pour iOS et Android à partir d'une base de code unique. L'utilisation de TypeScript apporte une sécurité de typage qui facilite la maintenance et réduit les erreurs potentielles.

L'application s'appuie sur l'API Open Food Facts pour récupérer les données des produits. La caméra est gérée via des bibliothèques natives React Native pour garantir des performances optimales lors du scan des codes-barres.

Compétences BUT démontrées

C1 : Réaliser un développement d'application

AC11.04 – Développer des interfaces utilisateur

Description : Dans le cadre d'un projet personnel, j'ai développé un clone de l'application Yuka en React Native et TypeScript. L'objectif était de concevoir une interface mobile complète permettant à l'utilisateur de scanner un code-barres et d'obtenir instantanément les informations nutritionnelles d'un produit alimentaire (score de qualité, additifs, alternatives plus saines). L'application devait être fluide, intuitive et fonctionnelle sur iOS et Android à partir d'une base de code unique.

Rôle personnel : J'ai conçu et développé l'intégralité de l'interface utilisateur : la page d'accueil, l'écran de scan via la caméra native, l'affichage des données nutritionnelles avec un code couleur visuel (excellent / bon / moyen / mauvais), la liste des additifs avec leur niveau de risque, et les suggestions d'alternatives. J'ai respecté les guidelines Material Design et iOS pour garantir une expérience cohérente selon la plateforme. La gestion asynchrone des appels à l'API Open Food Facts a également été intégrée avec retours visuels (chargement, erreur, données incomplètes).

Analyse réflexive

Le principal défi était de transformer des données brutes parfois incomplètes (produits mal renseignés dans Open Food Facts) en une interface claire et compréhensible pour n'importe quel utilisateur. Cela m'a appris à toujours penser du point de vue de l'utilisateur final, pas seulement du point de vue technique. Sur le plan des softskills, ce projet a développé ma rigueur (gérer tous les cas limites d'affichage) et ma capacité d'adaptation : les données de l'API étaient imprévisibles, il fallait sans cesse ajuster l'interface pour rester lisible. J'ai aussi renforcé mon sens de l'esthétique et de l'ergonomie, conscient qu'une bonne application, c'est avant tout une application qu'on comprend en trois secondes.

Défis rencontrés

L'un des principaux défis était l'intégration fluide du scanner de code-barres avec les fonctionnalités natives du smartphone. Il a fallu gérer les permissions d'accès à la caméra et optimiser la reconnaissance des codes pour qu'elle soit rapide et fiable même dans des conditions d'éclairage difficiles.

Un autre aspect complexe était le traitement et l'affichage des données nutritionnelles de manière claire et compréhensible. Il fallait transformer des données brutes parfois incomplètes en informations visuelles facilement interprétables par l'utilisateur.

Apprentissages

Ce projet m'a permis de maîtriser le développement d'applications mobiles avec React Native et TypeScript. J'ai appris à gérer les spécificités du développement mobile, notamment l'accès aux fonctionnalités natives comme la caméra, la gestion des permissions, et l'optimisation des performances.

L'intégration d'APIs externes, la gestion d'états complexes avec React Hooks, et la création d'une expérience utilisateur intuitive sur mobile ont été des compétences clés développées durant ce projet.