This is a single page recipe application that provides over 1000000 recipes for multiple different foods within categories.The data/recipe are being fetch from food2fork public API. The user will then select the food he/she likes and the recipe view will be shown with much more details. The user will then be able to add the necessary ingredients to shopping cart.The app allows user to like the recipe and stores the like locally in the browser so he/she can later visit and find the liked recipe.
- Babel - The Javasript compiler used to execute/convert ES6 code to ES5 for browser support.
- Webpack - JavaScript module bundler used to bundle javascript files and css files together.
- Babel-polyfill - support browser for ES6 new features that were not present in previous specifications
The project follows the MVC(Model-View-Controller ) design implemented through latest ECMA Script 6 modules features.
Axios -to make AJAX calls to the API by XHR request to fetch data in json,and parse the json data into javascript object.
Factional- used to generate perfect fraction no.
Uniqid- used to generate unique id/value.
The application has been programmed following the latest ES6,7,8 featurs and specifications like arrow functions, string template ,modules import/export, async-await,promises etc and thus require dependencies like babel ,webpack and babel polyfill for browser support.
To set up the project in your local enivironment ,first clone the repository and save it on your local environment/machine. once you've downloaded the project ,navigate to the src/js directory in the project and edit the config.js file.
To edit the config file you'll need to visit to food2fork site and register for their public API and paste your API key in the config.js
https://www.food2fork.com/about/api
NOTE -that the free account have a call limit of 50 calls/day , so depending on the no of key you're registering also edit the recipe.js and search.js file in src/js/model directory.
Edit this line by changing the index manually of ${key(2) in both search.jsand recipe.js, set it to 1,2,3,4 or more if you like as per your keys in config.js, this key function in string template gets you the API key from config.js
const res = await axios(`${proxy}http://food2fork.com/api/get?key=${key(2)}&rId=${this.rid}`);
Now to build the project locally you'll need to install npm dependencies and prior to it node and npm if you don not already have it, download node from here:-
https://nodejs.org
after sucessfully installing node/npm ,navigate to the project directory and open/run terminal/bash/CLI there and execute:-
npm install
this would install all the development and built dependencies for your project and necessary npm library for this project,after sucessfull installation you would see a node_module directory in your project directory containing all the necessary module.
Now to run the app on your localhost execute:-
npm run start
This will run the app on your localhost and build the html and javascript files on the fly.(recommended).
To built the project in distribution directory execute:-
npm run dev
This would build the project in development mode, the javascript and css file would be bundled by webpack and mutated by babel to ES5 specification code.
npm run build
This would do the same thing as the prior step but the bundled file would be built in production mode and thus will have comprably small size and less irrelevant code.
- Udemy
- MDN Web Docs(https://developer.mozilla.org/en-US/)
- stackoverflow
- etc