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

Опубликовано: 19 Февраль 2026
на канале: Aleks Popovic
21,492
348

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.

See the full project in action on SandBox: https://codesandbox.io/s/meal-planner...

Find code from this video in my Github repo: https://github.com/alekspopovic/meal-...

Find text version of this tutorial on my website: https://aleksandarpopovic.com/Buildin...

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

Blog: https://aleksandarpopovic.com/blog/
Github: https://github.com/alekspopovic/
Twitter:   / alekswritescode  
Instagram:   / aleks.popovic  

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