Les Petits Plats

Site Web - README en Français - README in English

---

Description en Français

1. Présentation du projet

Projet réalisé dans le cadre du développement front-end pour le site web Les Petits Plats, une plateforme de recettes de cuisine.

1.1 Objectif :

• Développer une fonctionnalité de recherche permettant de filtrer les recettes en fonction du nom et des tags.
• Optimiser la recherche pour qu’elle soit rapide et fluide, afin d’offrir une expérience utilisateur optimale.
• Créer deux implémentations différentes de l'algorithme de recherche pour comparer les performances (boucles natives vs programmation fonctionnelle).

1.2 Compétences évaluées :

• Développement JavaScript, notamment avec les boucles natives et les méthodes fonctionnelles des tableaux.
• Développement d’interfaces utilisateurs réactives et interactives avec HTML/CSS.
• Utilisation de Git pour la gestion des versions et la collaboration en équipe.
• Tests de performance avec des outils comme Jsben.ch.
• Création de documentation technique pour expliquer les choix de développement.

2. Contraintes

2.1 Fonctionnelles :

• La recherche doit être rapide, fluide et effectuer des résultats en temps quasi-réel.
• Les utilisateurs doivent pouvoir rechercher des recettes par nom ou par tag.
• La recherche doit fonctionner avec un fichier JSON contenant les recettes et leurs images.

2.2 Techniques :

• Le projet est développé avec HTML, CSS, et JavaScript (ES6+).
• Utilisation de Git pour la gestion des versions.
• Les deux implémentations de la recherche doivent être testées et comparées en termes de performance.

3. Lancement du projet :

3.1 Prérequis :

• Git
• Node pour les commandes npm ou Yarn pour les commandes yarn

3.2 Dépendances :

• Aucune autre bibliothèque JavaScript n'est autorisée.

4. Procédure d'installation :

Clonez le dépôt :

git clone https://github.com/MeTusel/Les-petits-plats

4.1 Configuration du front-end :

• Accédez au dossier "Les-petits-plats"

• Lancez le site à l'aide de live server :

npx live-server

5. Autres :

5.1 Maquettes

• Lien vers les maquettes Figma

---

Description in English

1. Project Overview

This project was developed as part of the front-end development for the Les Petits Plats website, a cooking recipe platform.

1.1 Objective:

• Develop a search feature that allows users to filter recipes by name and tags.
• Optimize the search to be fast and smooth, providing an optimal user experience.
• Create two different implementations of the search algorithm to compare performance (native loops vs functional programming).

1.2 Assessed Skills:

• JavaScript development, particularly with native loops and functional array methods.
• Development of reactive and interactive user interfaces with HTML/CSS.
• Using Git for version control and team collaboration.
• Performance testing with tools like Jsben.ch.
• Creating technical documentation to explain development choices.

2. Constraints

2.1 Functional:

• The search must be fast, smooth, and provide results in near real-time.
• Users should be able to search recipes by name or tag.
• The search must work with a JSON file containing recipes and their images.

2.2 Technical:

• The project is developed with HTML, CSS, and JavaScript (ES6+).
• Git is used for version control.
• Both search implementations must be tested and compared for performance.

3. Project Launch:

3.1 Prerequisites:

• Git
• Node for npm commands or Yarn for yarn commands

3.2 Dependencies:

• No other JavaScript libraries are allowed.

4. Installation Procedure:

Clone the repository:

git clone https://github.com/MeTusel/Les-petits-plats

4.1 Front-end Configuration:

• Access the "Les-petits-plats" folder

• Launch the site using live server:

npx live-server

5. Others:

5.1 Mockups

• Link to Figma mockups