Build a Food Recipe App with React | React Recipe App | React Projects For Beginners

If you are a beginner with react I highly encourage you to follow along because you are going to learn how to put all the small pieces together to understand things like how to fetch data from an api, how to update state and more.

📕 Things covered in this video:
- Working of React Recipe Finder
- Creating the crisp and clear UI with styled-component
- Code Modularity
- Responsive UI with Flex

Github Repository for the react-recipe-finder -

Timeline
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
00:00 Introduction
01:15 Application Walkthrough (Demo)
03:25 Setting up API Keys at Edamam
07:10 Initialising the Application
11:30 Header Component Design
29:00 Recipe Component Design
39:48 Making UI Responsive
42:34 Outlining for Part 2

Part 2 Will Cover-

✅ API integration (axios)
✅ Dialog using Material UI
✅ Improving User Experience
✅ App Deployment over Github

Social
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬

Equipments I Use:
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬

#reactjs #javascript #webdevelopment

[TheIndianDev]

Guys.. Make sure to like this video and Subscribe to The Indian Dev 🤜🤛
Thanks for watching... Have a nice day 😊

[carlossolano]

Much respect to you, love all your videos its easy to understand keep up the great work!

[MansiGupta-wt]

jst amazing...u made it so simple to understand thanku soo much

[yuvarajm]

Great tutorial, waiting for API integration

[Al_AmeenMD]

Great projeċt. But I would appreciate if you an Create a CRUD application to allow users from around the world submit their recipes to their preferred category (food type/ingredient/nationality, e.t.c). If the category does not exist, they can create one however, if it does, the user should receive an alert to say it does. Users should also be able to rate recipes (star ratings) and search for recipes that have been submitted. You can go further by including a feature that allows users to add comments to submitted recipes, perhaps a correction or addition. It is an excellent chance to show off your frontend framework skills.

[akankshaverma]

Hello sir,
I am really grateful to your work. I have done this, but didn't thought that this was part 1,
Waiting for part 2 😅

[ranuchaubey]

Really awesome explanation Sir, really enjoyed it, thank you for making this amazing recipe app

[karanordberg]

So far so good. I am learning and this has been a nice follow along and I thought the project would be a useful tool at home .

[narendra]

One thing I will tell you.. After Entering into the project creation, First create Separated Components, CSS Files related to project is the better thing than PUT All the components and it's styling details In APP.JS, then exporting & importing is not better practice for Beginners Level .. Am I right ??

[TealComet]

The free developer plan isn't there anymore.

[bharathbellamkonda]

can`t install the dependcies u provided.the terminal just going on and never installing it .

[todaycircle]

Sir please create more such project based videos

[tenc]

Good effort but it was honestly very confusing. Definitely not beginner-friendly at all. I wish you could have been clearer with your explanation in terms of setting up the environment. I somehow made it. but I got lost when it came to uploading that "Search-icon" at 16:37. I tried a lot but failed. So, gave up this tutorial and deleted the folders that I have created. Thanks anyways.

[farid]

Where can I see part 2 of this video sir?

[desubrahma]

Hai sir....
Would you please tell mee react js

[harshadkhade]

Great 👍🏼, what is you think about to learn vue js is good in 2021 ?

[PIYUSH-lzzq]

Bhai isme payment gateway integration laga do