JavaScript

Completion of Final Project and 28 hour JavaScript course

Posted by

Hello everyone! I am really excited to announce that I have finished the final recipes project of my course and I also finished the entire 28 hour immersive JavaScript course. This final project was designed around using a module bundler known as Webpack, tools to convert newer ES versions into backwards compatible version of JavaScript in current and older browsers or environments using Babel and to practice making XMLHttpRequests from the browser using axios.

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.

Final Project walk through

Thank you for always taking the time to read and give input! Below is also my certification and I have provided a link to the course for those who are interested in taking it and enhancing your JavaScript skills!