Mobile-first recipe search platform for “Les petits plats,” a fictional French cooking startup launching their own site to rival big players like Marmiton and 750g.
This project was built as part of the Développeur d'application - JavaScript React training at OpenClassrooms.
Mission: bring to life a fully responsive, high-performance recipe search interface based on provided Figma designs and JSON data.
While the training required implementing two distinct search algorithms: one with native loops, one with functional array methods. This repository showcases only the single, best-performing algorithm chosen after benchmarking. The distinction was for learning purposes; here you get the one that works smoothly and efficiently.
Les Petits Plats aims to stand out in the crowded recipe site market by making searching feel instant and effortless for users.
I didn’t design this. The UX flows, Figma mockups, and animations were handed down as part of the assignment.
So if you’re side-eyeing the fonts, colors, layout choices, or even the animations, that’s not my call 😅
My job was to integrate everything pixel-perfect and performant, focus on clean code, accessibility, and making the search engine smooth and reliable.
Blame the pixels, not the coder.
- HTML5
- CSS3 (Flexbox, Grid, Media Queries)
- Vanilla JavaScript (ES6+) for all logic
- Git & GitHub for version control
- Figma (provided designs)
- Mobile-first responsive UI
- Two distinct search algorithm implementations for benchmarking
- Modular, reusable JavaScript functions
- Semantic and accessible markup
- Performance testing with Jsbench
- Clean separation of UI and logic to ease backend integration
✅ Mission validated - Fully functional search with two algorithms, clear documentation, and performance analysis. Great attention to requirements and code quality!
Evaluation Highlights:
- ✅ Clear, well-structured diagram and algorigram
- ✅ Two fully working algorithm branches with documentation
- ✅ Performance testing done and analyzed
- ✅ Responsive, accessible UI with pixel-perfect design respect
Areas for growth:
- Slight improvements suggested in presentation and delivery slides for future demos.
- Clone this repo
- Open
index.htmlin your browser - No build tools required, just HTML/CSS/JS magic