I used the free version of the Food2Fork recipe API that gives you 50 calls a day! When you sign up, you are given a key that you can use for your callouts. One thing to note is I did experience same origin errors when integrating from my local web server out to the API. For those that are unfamiliar, the same-origin policy “is a critical security mechanism that restricts how a document or script loaded from one origin can interact with a resource from another origin. It helps isolate potentially malicious documents, reducing possible attack vectors.” ~ MDN web docs. To counteract this, I used a super handy website called CORS Anywhere. This API enables cross origin requests to anywhere. Note that this is an okay approach when practicing/building on your own but should not be used for any sort of production integration.
A majority of the application fell within four categories:
- Search View: which displayed the recipes along with an image
- Recipe View: which displays the actual recipe the user has selected
- List View: which displays the ingredients added to the shopping cart which can be removed
- Likes View: which stores the liked recipe that the user can navigate back to at anytime
This project was a great way to see bundling and utilizing modules to separate out code and import/export the needed functionality to utilize in a main controller which is just like the behavior we see with the new Lightning Web Component technology that Salesforce just introduced.
Below is a preview video of the application and I have linked my forkify GitHub repo for those that are interested in improving or exploring what went into the app.