Food Suggestor

Inspiration

The inspiration for this project came from participating in Day 1 of MLH's API week challenge, which required me to use TheMealDB API to build a web application. I decided to create a simple and easy-to-use app that would suggest random meals and their recipes.

What it does

The Food Suggestor web app has a "Get Recipe" button that generates a random meal suggestion from TheMealDB API. Once the user clicks the button, the app displays the name of the meal, a thumbnail image, a list of ingredients, and the process to cook it. Additionally, the user can view the source of the recipe and a YouTube link to a video demonstrating the recipe.

How we built it

I built the web app using JavaScript, HTML, CSS, and the Vite.js build tool. I used the axios library to fetch data from TheMealDB API, which provides meal data in JSON format. I then parsed the data and displayed it on the web page using HTML and CSS.

Challenges we ran into

One of the main challenges I faced was working with the data from TheMealDB API, which had some inconsistencies and missing information. I had to spend time cleaning and formatting the data to ensure that it displayed correctly on the web page. Additionally, I had to implement error handling to ensure that the app would still function if there were any issues with the API.

Accomplishments that we're proud of

I'm proud of building a (somewhat) responsive, functional web app that provides value to users by suggesting random meal recipes.

What we learned

Through this project, I learned how to work with APIs, parse JSON data, and handle errors. I also gained experience in using Vite.js as a build tool and implementing CSS styling to create an attractive user interface.

What's next for Food Suggestor

In the future, I plan to add more features such as dietary preferences, ingredient filtering, and user accounts to save favorite recipes

Built With

• axios
• css3
• html5
• javascript
• netlify
• themealdb
• vite