Oftentimes I'd look at my pantry and wonder the age-old question:
"What's for Dinner". Using an API and Vue.js, I made a little app
which would take in a main ingredient and return a series of
mealcards with recipes for what I could make with that ingredient.
Check out the detailed explanation below, see the app
live
or see the
Github Repo
Make an app to help a user locate a recipe based on an ingredient they already have.
I began with a blank vue.js template and built out from there. Once I knew how many vues I would need, the project began to fall into place.
Once the API call was set up and retrieving data, then the project started to move along more rapidly. It was very exciting to see the data begin to appear on the page.
The result was a multi-vue app that utilized two API calls in order to bring the user recipe information.
Working with the API meant that I was contrained by the information the API was able to provide. It took some getting used to, but I was able to present the data on the page how I wanted it to be presented; neatly packaged and with images.
As a challenge, I made a little app that would take in an ingredient and output a list of recipes with menu cards.