Les Petits Plats

"Les Petits Plats" est un projet de formation pour une application web de recherche de recettes de cuisine. Elle permet aux utilisateurs de parcourir une collection de plus de 1500 recettes du quotidien, simples et délicieuses.

Fonctionnalités

Moteur de recherche principal

• Recherche par mots-clés dans les noms de recettes, descriptions et ingrédients
• Affichage en temps réel des recettes correspondant aux critères de recherche
• Indication du nombre total de recettes trouvées

Système de filtrage avancé

• Filtrage par catégories :
  • Ingrédients
  • Appareils de cuisine
  • Ustensiles
• Tags sélectionnables pour affiner la recherche
• Possibilité de combiner plusieurs tags et la recherche textuelle

Affichage des recettes

• Présentation sous forme de cartes
• Affichage des informations essentielles :
  • Photo de la recette
  • Nom de la recette
  • Temps de préparation
  • Liste des ingrédients avec quantités
  • Description de la préparation

Architecture technique

Structure du projet

• Interface HTML/CSS avec Tailwind CSS
• JavaScript vanilla pour la logique de l'application
• Organisation modulaire du code
• Données des recettes stockées dans un fichier JavaScript (data/recipes.js)

Modules principaux

searchObject (searchObject.js)

Ce module est le cœur du moteur de recherche de l'application :

• Gère l'état global de la recherche avec plusieurs collections (Sets) :
  • filteredRecipes : les recettes filtrées actuellement affichées
  • selectedTabs : les tags sélectionnés par l'utilisateur
  • ingredientTagsList, applianceTagsList, ustensilsTagsList : les listes de tags disponibles
  • ingredientTags, applianceTags, ustensilsTags : les tags activés par catégorie
• Fournit des méthodes pour :
  • Filtrer les recettes selon les critères de recherche (getFilteredRecipes())
  • Gérer l'ajout et la suppression de tags (addIngredientTag(), removeApplianceTag(), etc.)
  • Mettre à jour dynamiquement les listes de tags disponibles (setTagsLists())
  • Vérifier la présence de tags dans les recettes
• Implémente un algorithme de filtrage optimisé avec mesure de performance

cardsSection

• Affiche les recettes et les listes de tags

DOMActions

• Gère les interactions utilisateur et les événements DOM

Approche d'optimisation

Le projet propose deux versions du moteur de recherche :

• Version standard (branche "first")
• Version optimisée (branche "optimized") avec des algorithmes de recherche plus performants