Les Petits Plats 🍴👨‍🍳

Site live - README en Français - English README

Description FR :

Ceci est un projet réalisé dans le cadre du programme de formation Développeur Front-end JavaScript React chez OpenClassrooms

Développez un algorithme de recherche en JavaScript

Compétences évaluées :

• Analyser un problème informatique 🔍
• Développer un algorithme pour résoudre un problème 💻

Situation (fictive) du projet :

Développeur freelance, missionné par une entreprise en tant que Développeur Front-end.

L’entreprise souhaite se lancer dans la création d’un site web de recettes de cuisine à l’instar de Marmiton ou 750g. Pour faire la différence avec ses concurrents, l’entreprise souhaite que le moteur de recherche des recettes sur le site soit rapide et fluide.

Mon rôle a été de développer tout l’aspect Front-end du site à partir de maquettes, de réaliser un algorithme de recherche pour les recettes et de faire une fiche d’investigation de fonctionnalité pour cet algorithme pour l’équipe Back-end.

Règles de gestion :

Ces points doivent absolument être respectés durant le développement :

1. La recherche doit pouvoir se faire via le champ principal ou via les tags (ingrédients, ustensiles ou appareil)
2. La recherche principale se lance à partir de 3 caractères entrés par l’utilisateur dans la barre de recherche
3. La recherche s’actualise pour chaque nouveau caractère entré
4. La recherche principale affiche les premiers résultats le plus rapidement possible
5. Les champs ingrédients, ustensiles et appareil de la recherche avancée proposent seulement les éléments restant dans les recettes présentes sur la page
6. Les retours de recherche doivent être une intersection des résultats. Si l’on ajoute les tags “coco” et “chocolat” dans les ingrédients, on doit récupérer les recettes qui ont à la fois de la coco et du chocolat.
7. Comme pour le reste du site, le code HTML et CSS pour l’interface (avec ou sans Bootstrap) devra passer avec succès le validateur W3C.
8. Aucune librairie ne sera utilisée pour le JavaScript du moteur de recherche

Installation :

1. Téléchargez le dépôt en cliquant sur le bouton "Code" sur la page du dépôt et en sélectionnant "Download ZIP".

2. Extrayez le contenu du fichier ZIP dans un dossier sur votre ordinateur.

3. Ouvrez le dossier et double-cliquez sur le fichier HTML index pour le visualiser dans votre navigateur web (ou utilisez live-server sur Visual Studio Code, par exemple).

4. Pour effectuer des modifications, éditez les fichiers HTML, CSS ou JS à l'aide d'un éditeur de texte et enregistrez le fichier. Actualisez la page web dans votre navigateur pour voir la version mise à jour.

Développé avec :

• Visual Studio Code - Éditeur de texte
• Sass - Préprocesseur CSS
• Bootstrap - Collection d'outils utiles à la création du design de sites et d'applications web
• GitHub - Outil de gestion de versions
• GitHub Pages - Outil d’hébergement
• Validateur W3C - Outils de détection des erreurs dans le code HTML et CSS

Auteur :

Arthur Blanc : GitHub - Portfolio

Maquettes :

Lien des maquettes : https://www.figma.com/file/xqeE1ZKlHUWi2Efo8r73NK/UI-Design-Les-Petits-Plats-FR

---

EN Description:

This is a project carried out as part of the Front-End JavaScript React Developer training program at OpenClassrooms.

Develop a search algorithm in JavaScript

Evaluated skills:

• Analyze a computer problem 🔍
• Develop an algorithm to solve a problem 💻

Project (fictional) situation:

Freelance developer, commissioned by a company as a Front-end Developer.

The company wants to launch a cooking recipe website like Marmiton or 750g. To differentiate itself from its competitors, the company wants the recipe search engine on the site to be fast and fluid.

My role was to develop the entire Front-end aspect of the site from mockups, to develop a search algorithm for recipes, and to create a functionality investigation sheet for this algorithm for the Back-end team.

Management rules:

These points must be strictly respected during development:

1. The search must be possible via the main field or via tags (ingredients, utensils or appliance)
2. The main search starts from 3 characters entered by the user in the search bar
3. The search is updated for each new character entered
4. The main search displays the first results as quickly as possible
5. The ingredients, utensils and appliance fields of the advanced search only propose elements that remain in the recipes on the page
6. The search returns must be an intersection of the results. If we add the tags "coco" and "chocolate" in the ingredients, we must retrieve the recipes that have both coconut and chocolate.
7. As with the rest of the site, the HTML and CSS code for the interface (with or without Bootstrap) must pass the W3C validator successfully.
8. No library will be used for the JavaScript of the search engine.

Installation:

1. Download the repository by clicking on the "Code" button on the repo page and selecting "Download ZIP."

2. Extract the contents of the ZIP file to a folder on your computer.

3. Open the folder and double-click on the index HTML file to view it in your web browser (or use live-server on Visual Studio Code for example).

4. To make changes, edit the HTML, CSS or JS files using a text editor and save the file. Refresh the web page in your browser to see the updated version.

That's it!

Developed with:

• Visual Studio Code - Text editor
• Sass - CSS preprocessor
• Bootstrap - Collection of tools for creating the design of websites and web applications
• GitHub - Version control tool
• GitHub Pages - Hosting tool
• W3C Validator - Tools for detecting errors in HTML and CSS code

Author:

Arthur Blanc: GitHub - Portfolio

Mockups:

Link to mockups: https://www.figma.com/file/xqeE1ZKlHUWi2Efo8r73NK/UI-Design-Les-Petits-Plats-FR