This application is to be able to generate a daily meal plan for the user to reference. It should create a menu of meals while keeping track of nutritional their values. You input your targeted calories and using an API it should generate 3 meals.
Use react for DOM manipulation
Include interactive features
Include atleast one request to an API and use information in application
Use four separate components
Deploy application to web
Use Flexbox or CSS Grid for layouts
Must be adequately documented on Github
Commit daily for git version control
Use React Router for navigation
Must be responsive accross mobile, tablet, and desktop screens
API to be used: https://spoonacular.com/food-api/docs Example data response planned on being used:
"meals": [
{
"id": 655219,
"title": "Peanut Butter And Chocolate Oatmeal",
"imageType": "jpg",
"readyInMinutes": 45,
"servings": 1,
"sourceUrl": "https://spoonacular.com/recipes/peanut-butter-and-chocolate-oatmeal-655219"
},
As a user, I want to see the website portray clean, organized, and easily accessible information to be able to view the recipes for the meal I am to cook.
As a user I want to see the images of the recipes I am to cook.
As a user I want to see the ingredients and instructions of the recipes I am to cook.
As a user I want to see the nutritional value of the recipes I am to cook.
Make the application look sleek.
Add a protein tracker to make sure I am meeting my daily goals for muscle growth.
Another possibility is to add a calorie tracker if trying to lose weight.
Git and Netlify was used to commit and host the website JavaScript and CSS was used to build the website by connecting to an API. React was used as a JavaScript library to help build the websites by using components.
First you would fork and clone the repository in your preferred directory. You would then open it on your code editor. In your terminal you would then run your server using the command 'npm start'.
Users can identify weaknesses in the FoodJokes component. There can be a better way of styling it or making it user friendly.