Project carried out as part of the Front-End Web Development Career Path of OpenClassrooms.
The mission of this project was to develop a search algorithm to filter and display dynamically a list of recipes with two components : the main search bar and the filter options. To understand how It works, I made a detailed document about It's structure and the choices made during it's development : (EN / FR).
Use this link to try the project : https://leonard-wojcik-p7.netlify.app/
assets/ : contains the favicons and the images used in the project.
src/ :
benchmarking/: contains the scripts used for the benchmarking tests.data/contains the original file with all recipes and a second one that have been improved (typos).scripts/contains all JavaScript files.classes/contains the classes used to create the elements of the page.components/contains the script to handle dropdowns.utils/contains the search algorithm and some generic functions.
scss/contains all SCSS files. Their organisation follow the 7-1 pattern.
- Autoprefixer — PostCSS plugin to parse CSS and add vendor prefixes to CSS rules using values from Can I Use.
- Eslint — A JavaScript linter.
- Husky — Git hooks manager.
- lint-staged — Run linters against staged git files.
- Prettier — A code formatter.
- Sass — A CSS preprocessor.
- Vite — Next Generation Frontend Tooling.
- Clone this repository or fork It.
git clone https://github.com/leoncik/LeonardWojcik_6_24112021- Make sure that Node.js is installed on your machine and that you have a package manager (like npm or yarn). Then install the dependencies.
yarn install- You are ready to do !
Simply run yarn dev to launch a dev server and work on the project.
To build the production version of this project, run yarn build to build the project and then yarn preview to check if your build is successful (I am sure It will !).