Meals Finder.

Overview

Meals Finder est une application web de recherche de recettes construite avec React et l'API TheMealDB.

Recherche de plats par nom, ingrédient ou catégorie. Fiche détaillée pour chaque recette : ingrédients, instructions, vidéo YouTube intégrée. Favoris sauvegardés en local storage. Interface responsive et rapide, sans backend propriétaire.

Projet réalisé pendant ma formation à La Capsule — premier contact avec la consommation d'une API tierce et la gestion d'état en React.

Challenge & Problem Statement

Le principal défi de ce projet résidait dans la maîtrise de technologies que je découvrais pour la première fois, tout en veillant à maintenir de bonnes performances. L’utilisation d’une API externe combinée à un grand volume de données rendait indispensable la mise en place d’un caching efficace via TanStack Query. L’enjeu était d’éviter des rechargements inutiles, de conserver une navigation fluide et de structurer correctement la logique de requêtes.

Un autre challenge important consistait à intégrer plusieurs librairies — Tailwind Plus, Motion Primitives, et divers composants UI — sans complexifier l’architecture ou nuire à la cohérence visuelle. L’objectif était de garder une interface simple, lisible et intuitive malgré la diversité des éléments à afficher : recherche, pagination, liste de recettes, et modal vidéo.

Même si l’ensemble du projet s’est plutôt bien déroulé, la difficulté principale était de trouver le bon équilibre entre apprentissage, performance et simplicité. Grâce à une documentation riche, des ressources en ligne et l’aide de ChatGPT pour débloquer certains points, j’ai pu avancer rapidement et structurer une solution propre dans un délai court.

Solution

La solution finale est une application simple mais efficace, centrée sur l’essentiel : trouver rapidement une recette et accéder au tutoriel vidéo. Grâce à TanStack Query, les requêtes API sont mises en cache, ce qui améliore significativement les performances lorsque l’utilisateur navigue, recherche ou change de page.

La barre de recherche permet de filtrer facilement les repas, et la pagination évite de surcharger l’interface. L’intégration de la modal vidéo améliore l’expérience en donnant un accès immédiat au tutoriel YouTube.

En combinant Next.js, Tailwind, TanStack Query et des animations discrètes, j’ai obtenu une application fluide, lisible et agréable à utiliser.

Development

Stack

Application frontend pure — pas de backend maison. Toute la donnée vient de l'API publique TheMealDB.

Frontend — React

• React 18 + Vite — démarrage rapide, hot reload
• React Router — navigation entre la liste et le détail
• Axios — appels à l'API TheMealDB
• CSS Modules — styles scopés par composant
• localStorage — persistance des favoris sans backend

API — TheMealDB

• Recherche par nom : /search.php?s=
• Recherche par ingrédient : /filter.php?i=
• Détail d'un plat : /lookup.php?i=
• Liste des catégories : /categories.php

Décisions techniques notables

• localStorage pour les favoris : solution simple et suffisante sans besoin d'un compte utilisateur — zéro friction pour l'utilisateur.
• Debounce sur la recherche : évite de spammer l'API à chaque frappe — implémenté avec un hook useDebounce personnalisé.
• Gestion des erreurs API : l'API TheMealDB retourne null plutôt que des erreurs HTTP — gestion explicite des cas vides dans chaque composant.

Outcome & Results

Résultats

Application fonctionnelle déployée sur Vercel. Recherche fluide, fiches recettes complètes, favoris persistants.

Ce que j'ai appris

• Consommation d'API externe : première expérience avec une API tierce — gestion des rate limits, des réponses inattendues et de la forme des données.
• Hooks personnalisés : useFetch, useDebounce, useFavorites — factoriser la logique en hooks réutilisables plutôt que de l'écrire deux fois.
• UX sans loading spinner partout : skeleton screens sur les listes, transitions légères — apprendre à rendre l'attente supportable.

Learnings & Conclusion

Ce projet m’a permis de consolider mes bases en Next.js et de comprendre concrètement la valeur du caching avec TanStack Query. J’ai gagné en confiance dans l’intégration d’API externes et dans la mise en place d’une architecture front-end mieux structurée.

Si je devais aller plus loin, j’aimerais explorer des fonctionnalités plus avancées comme des filtres supplémentaires, un design system plus abouti ou l’optimisation côté serveur avec des routes dédiées. Ce projet a été une excellente occasion de progresser rapidement et de mettre en pratique des technologies modernes dans un cadre simple mais exigeant.

Gallery