Building a Meal Planning app with React and Spoonacular API | React tutorial

React tutorial on how to build a meal planning app using Spoonacular API. We go over setting up components that fetch meal plan data from Spoonacular using calorie count as a variable input. We do a bit of state management with useState and we utilize useEffect to combine two API calls for getting the meal plan and individual meal images.

Music in the video is from StreamBeats collection by Harris Heller.

Chapters:
0:00 Intro
1:00 Spoonacular API
1:42 Setting up React app
5:20 Meal List component
6:07 Fetching API data
9:45 Meal component
17:55 Getting Image data with useEffect
21:16 CSS
30:19 Outro

[AleksPopovic]

Let me know if you end up building this and send me your creations! Especially if you add more stuff to it, like recipe details, ingredient list, meal preparation instructions or something similar.

[raghavgupta]

teaching by building
this is what I like to see
keep up the good work :)

[Yackkimani]

Can I say “I love you “ lol this is the best explanation

[milos-makes-maps]

Straightforward presentation and useful content once again. I like that you zoom in your code, which makes it easier to follow you.

[charlesmagno]

lets say i dont use api for the food, is it better to hardcode the ingredients or use database like firebase? i cant find any api for filipino foods website. pla advise thanks

[eduardorosado]

Would be interested to know how to add a favorite button to those cards and have them appear on another page

[bankolemichael]

Good evening, thanks for the tutorials, it really helped, I generate my api key last week, I was doing some editing on my css file afer some while it came up with status error 402, which means I have to pay to continue to use it

[aj-boatchannel]

awesome video @AleksPopovic can i use typescript for this app?

[SaniPatel-oz]

Cannot read properties of undefined (reading 'calories')

I'm Getting this error!'

[jeepneygang]

I want to use .ajax({}) while making my API key in a separate js

[Javedboqo]

How to generate meal for some specific date on Spoonacular? I can't find any related endpoint for that in docs

[mobhamjee]

Can I use this for a diet app in android studio