Search over 100,000 recipes online. Please click here or here to use the app.
Note: This app was made by following an online course. Please check the course details here.
There's a parent repository for this app, if the instructions in the parent repo are followed properly (the code is heavily commented), anyone can make this application. Please checkout the complete development workflow of this app here (parent repo).
- Search for your favourite recipe by typing in the query in the search box. Please note that the number of search queries are limited to the list given here.
- Select a recipe from the recipe list generated from the query. The recipe with the details about the number of servings, time taken to make it along with all the ingredients, will be rendered onto the webapp. You can tweak the number of servings by pressing ⊕/⊖ buttons and the quantity of each ingredient for the recipe will change accordingly.
- Add the recipe ingredients to the shopping list using the "ADD TO SHOPPING LIST" button.
- Increase/Decrease the quantity of each ingredient you want in the shopping list by using the ⇳ button respectively.
- Remove the ingredient(s) from the shopping list by pressing the Ⓧ button after hovering over the ingredient.
- To remove all the ingredients from the shopping list, simply press the "DELETE ALL ITEMS" button below the "MY SHOPPING LIST" heading.
- To get directions on how to make the dish by following the recipe given, just press the "DIRECTIONS" button below "HOW TO COOK IT" heading.
- You can also like a recipe by pressing the ♡ symbol. Similarly, you can also unlike the recipes by pressing the ♡ symbol again on the recipe.
- To find all your liked recipes, just hover on the ❤ symbol at the top right of the webapp, you can check out your liked recipes as a list.
Note that the webapp uses Cookies in the form of localStorage() API. If you see any warnings from the browser, kindly ignore them.
- axios -- code dependency
- fractional -- code dependency
- uniqid -- code dependency
- webpack -- dev dependency
- babel -- dev dependency
Please check package.json, webpack.config.js and .babelrc for more information on the dependencies and configuration.
Check ./src/ for the code (Models - ./src/models/, Views - ./src/views/, Controller - ./src/index.js) that makes the webapp work.
If you've downloaded and want to run the app in the local environment, then you first have to install the dependencies using npm install command using the shell/cmd/terminal in the cwd. After that, simply run npm run start command to run the app through the webpack-dev server @localhost:8080. To build it for production, run npm run build command in the shell. To build the app for development, run npm run dev command in the shell.