Project 4 - Foody Zone | 10 React Projects for Beginners

Discover the best React project series ever created for beginners! Follow along as we guide you through 10 engaging projects that use Figma design to create stunning UI. From building a to-do list app to a weather app, you'll learn the fundamentals of React while developing real-world web apps. With our step-by-step tutorials, you'll become a React pro in no time! So join us now and unlock the secrets of building awesome web apps with React and Figma
Project 4 Foody Zone Figma Design
www.figma.com/...
Starter Code Base Project 4 - github.com/ans...
Project 4 Foody Zone Source Code
github.com/ans...
10 React Projects Playlist - • 10 React Projects For ...
HTML Course
• HTML Course Hindi - B...
CSS Course
• CSS Course Hindi - Be...
Html and CSS practice Projects
• HTML CSS 10 Practice P...
Javascript Course
• Javascript for beginne...
Linkedin - / anshuopinion
Telegram Channel - telegram.me/do...
Instagram - / dosomecoding
Github - github.com/ans...

[@shivskeleton4563]

bhaiya jo kaam 6-7 million vale nhi kr paaye vo aapne kr diya mujhe react sikha diya

[@shivskeleton4563]

😇

[@techlm-z8y]

As a regular viewer I have a request. Could you please do a simple MERN project. I am searching all over the internet. There are so many MERN project but I find it more easy to understand your classes. So plz make one for us

[@proavijit2082]

successfully watch and done 4 project properly -----> continue playlist and really i enjoy it --- and really love your teaching process-------🥰❤❤❤

[@PravinKumar-qy6vg]

best channel for react project.....you are doing good bro......thankyou

[@amenaakter6621]

This is a wonderful project for me,Thanks.

[@appweb7596]

if you facing this issue npm ERR! Cannot read properties of null (reading 'edgesOut') npm ERR! A complete log of this run can be found in: run this command on your terminal = npm install styled-components@5

[@rjrealsachinr]

Thanks

[@blackopss017]

Thanx

[@Random-qt5ok]

thanks

[@PraveenRaju-u7z]

if anyone having issue with npm install? use npm i styled-components@latest and then npm install again there is install error for styled component version

[@freeschool2]

Love you bro. I was facing this problem.

[@MayankPimpale]

Thanks 👍

[@samannaz8304]

yes i faced too

[@AnuragSharma-dv6mh]

love u bro

[@SenseiVraj]

thanks, buddy I almost breaks my laptop!!

[@HarshSingh-kr2ci]

[00:04] Create a responsive food search app with filtering features [02:18] Setting up the React project for Foody Zone [07:15] Exporting and using images in the Foody Zone project [09:42] Setting up style components for front end code [18:01] Customizing button properties in Sigma for quick editing [21:43] Creating food container and food card [30:56] Understanding the logic and syntax of React [33:28] Structuring data and maintaining code in React projects [44:09] Designing a food card with proper inspector properties [48:15] Implementing search functionality in the Food Zone project [1:03:37] Adjusting flex-direction and button colo

[@dosomecoding]

Thanks

[@abhishekyadav1764]

Sir aap bhut acha padhate h no doubt but ye wle video lecture me esa lg rha tha jese app khud h apne mnn se project bna rhe ho .. apne search wla logic nhi smjhya and aap thodi der me container ka naam change kr dete ho to hm link nhi kr pate ki kya changes hua h and aap please kbhi kuch css me changes kro to thoda logic bta dia kro i know aap yha project bnawanye aaye na ki ek ek cheez detail me batane ... btw i'm follwing you since last 9 months thank you for every content you have provided

[@muhammadmuneeb4489]

Nice Project & Explain well... Love from Pak

[@_S_AmitPandey]

after deploying the app with server running, website is working but after closing the vs code, the site doesn't work. What to be changed if I wanna deploy it? I feel like BASE URL is to be changed. PLease HElp!

[@AnujSharma-ro4kc]

bro your content is gem thanks for this project series its best for practice

[@4060_shivamBharti]

can you help me in this project

[@punjabicovers5009]

41 minutes onwarde in the video no inspect element is visible in the figma, how do i copy the css

[@OmarKhan-zc4bk]

bohot zabardast amazing project love from pak

[@chumar8688]

npm i Error. just run this command after cd app : npm config set legacy-peer-deps true, then run npm i 100% it will work.

[@adityasangani4156]

This helped. Thanks!

[@udaypratapsingh8923]

thanksssssss bhai

[@vrajparmar9586]

Hello

[@sachinr3047]

Let God bless yuh for this help❤

[@ManoharBediya]

Thank you mitr

[@nikismagic8263]

sir actually fetchdata may bohot issue ho raha hai or voh loading unablefetchdata ke badd dikha hi nhi raha but jab mat fetchdata ko comment out krti hu toh tab babraber show hota hair please help what should I do

[@UPSC_IAS_IPS_007]

once again an amazing concept booster

[@lalit-singh-bisht]

this projecct was really something finally finished it

[@Sahilsharma-sk5vr]

you got any errros?

[@Aliyaaugust]

Wts the backend used here ?

[@lalit-singh-bisht]

@@Sahilsharma-sk5vr no

[@lalit-singh-bisht]

​@@Aliyaaugustyou don't have to worry about backend...it's code is already provided...just focus on frontend in this project 😊

[@4060_shivamBharti]

@@lalit-singh-bisht could you help me pls in this project

[@mukulrana7094]

Thanks anhu bro I have doubt that in your vs code when writing css in template literal you getting snippet or suggestions so which plugin use please reply 😊

[@msaikrishna6100]

Thank you so much. Need this kind of videos.

[@akhileshchauhan9561]

npm error Cannot read properties of null (reading 'edgesOut') npm error A complete log of this run can be found in: C:\Users\User\AppData\Local pm-cache\_logs\2024-09-08T09_46_43_690Z-debug-0.log , bro front part me npm install karne par es types ka error aa raha hain plz help me bro

[@akhileshchauhan9561]

server wale part me koe issues nhi aa rha bus only App wale me problem aa rahi hain, plz reply me!

[@multitalentedboy152]

why the app dependencies are not installing and showing error that npm ERR! Cannot read properties of null (reading 'edgesOut')

[@GoruWalaBhaiya]

same problem how to solve??

[@AmanSingh-ot5nh]

can someone help!? i am unable to install the dependencies for app folder! you can refer to 9:54 someone lpz help!! i am geeting an error saying- cannot read properties of null(reading 'edgesout') i am getting this error whenever i am executing the command npm i app folder terminal

[@abhiak3959]

just run this command after cd app: npm config set legacy-peer-deps true, then run npm i 100% it will work.

[@abhishekseth7187]

@@abhiak3959 Thankyou bhai.. i also had same problem

[@prajwalbokade4622]

@@abhiak3959 Thank you brother it solved the issue

[@YasirShaikh-sc7lj]

guru ji jitni tareef ki jaye utni kam

[@MuhammadArslan-px1sm]

very much helpful bhai jaan 👍.

[@pratikadsul2129]

Superb bhai.. easy to learn platform.

[@vidyasinha779]

nice content and well explained each points....Kudos!!

[@mohsinalijafery2217]

Thanks so much Sir G...

[@codeshshubh]

Global styled - 13:31 Filter Data - 53:30

[@AA_SHORTS_]

why is the npm i is not working for app folder in my terminal.

[@_S_AmitPandey]

same problem i am facing

[@Prashantsrivastav-z6y]

Backend se jo api call hora hai use interview me explain kese karege?

[@mohammadxihan8492]

Love from Bangladesh

[@RahulPortfolio]

bro showing error in npm i for app folder npm ERR! Cannot read properties of null (reading 'edgesOut')

[@rjrealsachinr]

Same error

[@AnkitKumar-is4ro]

the project is not able to deploy on netlify or vercel, there is some issue with the file structure.

[@samarvlogs88935]

yes please explain styled component......i cant understand this component. why nd from where to import ....thats why i am leaving these projects.......these projects are really helpfull..but what we do...could u please explain this....@Do Some Coding

[@ANILKUMAR-es6ty]

Thank you so very much sir ji

[@PlayerOneOnlineGamer]

very helpful video thanks brother

[@babidulhasaan3231]

React js se hum kaise animated website bana sakte hain uske upar ek do video late toh aur bhi acha hota

[@amankureshi1]

Is project github par post karte tab output nahi dikhta , jab server open raheta tab tak output dikhta hai , server ko band karne par output nahi dikhta

[@jesvinp.d424]

superb sir

[@skthakor_codes5110]

your project is osm and helpful for react ☺. can you make any project in react + metrial ui

[@divyanshgupta3126]

Sir, aap jo jo karne wale ho ek project me wo starting me hi points me bata dia karo to hum khud se bhi try karenge aur jo points nahi ho payenge wo dekh lenge, ase to video dekhkar code likhte rehne se kuch fayada nahi hoga

[@dosomecoding]

Okay

[@atifamin-c4b]

why is inspect option is not showing in figma for me to get the css code can anyone pls help

[@CoderSingh]

same issue with me as well, Not sure the reason

[@muhammadatique2553]

THANKS BRO AMAZING ...

[@moosarahil2403]

Always gr8

[@DEBUGENTITY]

Bro project is good. But u should make seperate components for each part from scratch.. Because making all comonents in App.js is not recommended.. First u make in app. Then moving in. Components.. This can make beginner super confused too😂

[@dosomecoding]

I know it’s starting project That’s why i made this

[@DEBUGENTITY]

@@dosomecoding ok.. And pls make projects using next js too if possible

[@santoshsalawadagi6809]

Always great❤

[@sakhawat532]

Next js better option ..Here built in route .Can you make video with next js

[@doedits2842]

Bro please also create a 1video course for Gatsby js

[@arnab_16]

raw code likho keya hoga library use karke

[@mdfaijakhtar432]

Thanks bro

[@nature38753]

how to start the server it is showing error

[@lokeshshivnani2413]

nice vedio

[@kanishkshakya5705]

good project

[@MuhammadImran_Dev]

Nice 👌

[@prashantagrawal1140]

it would be great if you have made this project with separate component and style.people face majority problem in card design which you also skip to explain.

[@muskansethi7684]

Can you share the code with components

[@PredictionKingKamal]

sir mai jab terminal me app me (npm i) run karta hu to mujhe error show karta hai (can not read properties of NULL),please sir sollution bataye

[@dosomecoding]

Node install hi ?

[@PredictionKingKamal]

@@dosomecoding yes sir update bhi kar liya

[@lalit-singh-bisht]

@@dosomecoding mujhe bhi same error aa rha hai

[@AnishKumar-xu1nk]

solve hua kya bhai?? @@lalit-singh-bisht

[@kanishkshakya5705]

mera bhi error a rha h jab me `npm i ` likh rha hu error:`npm ERR! Cannot read properties of null (reading 'edgesOut')`

[@shadikhusain1216]

Nice clone ❤

[@itsme-vo1tc]

pls do a project that uses next js its a request as it helps many of us

[@dosomecoding]

Sure

[@sakshamkhurana769]

Inspect tab not showing in Figma even after applying dev mode

[@dosomecoding]

Figma is updated

[@roktimkamalsenapoty5793]

How can we deploy this along with backend??

[@not_amanullah]

Pls continue series 😢

[@yashsurywanshi8516]

vo to thik h per responsive ka ky

[@clashersgaming1946]

app ke packages install nhi ho rhe ! what to do ?

[@adnanmalik3723]

I Love you Sir

[@nikismagic8263]

sir please tell when we use callback function but unfortunetly that function didn't work here please tell me the way urgent

[@dosomecoding]

When you want to control rerendering

[@nikismagic8263]

but sir may use kr rahi hu fetch function but voh kaam nhi kr raha hai or bass loading or unable to fetch data hi dikh raha hai please tell me the solution urgent@@dosomecoding

[@ArpitPanchal-d3z]

make mern projects biginner to advance like react playlist

[@msaikrishna6100]

It will be good if you add time stamps

[@ssrchamp]

can any one tell me how to deploy such type of folder structure react app because whenever i tried to deploy such site it is not working and showing message unable to fetch data ? help me out what i am missing out?

[@AnkitKumar-is4ro]

@dosomecoding yes please reply, the project is not able to deploy on netlify or vercel, there is some issue with the file structure.

[@hypergaming3682]

@dosomecoding bro 10 projects bola tha aapne abhi bas 7 hi projects upload huwe hai , pleasee bhai or 3 upload kardo tagde waale.

[@prashantagrawal1140]

if you do not use const [selectedBtn, setSelectedBtn] = useState("all");.in this case also it will work properly

[@sahilpatil9707]

Bhaiya how do i deploy this project ?

[@ProblemSolver_0]

Brother please bootstrap instead of styled-components Bootsrap is easy to make responsive websites

[@arunrawat3142]

npm install mein error aa rahe hai bahut windows mein

[@latakantsharma3134]

Bro plz make a project with tailwind css

[@avijitdam7872]

Yes

[@moosarahil2403]

Yes

[@4060_shivamBharti]

sir mne zip winrar app or server ko copy kia ek new folder m or waha se drag n drop kia mne apne project-4 m toh usme sb kuch copy hokr aa gya image wagera and after that jaise localhost:5137 se run kr rha hu toh y pura web bna hua aa ja rha h ,, but aap jaise kr rhe ho usme sirf App likha hua aa rha h .video time-10.01 min p , pls help me to figure this out

[@dosomecoding]

clone using github, check my github course

[@4060_shivamBharti]

sir ho nhi rha h

[@4060_shivamBharti]

@@dosomecoding nhi ho rha h sir smjh nhi aa rha ,

[@dungar5919]

bro tune shayad source code download karliya hoga @@4060_shivamBharti

[@dungar5919]

starter base code vala download karo @@4060_shivamBharti

[@faizalish]

how can i get the api

[@saitejabommali6621]

bro my server side not working starting video time

[@sakshamkhurana769]

45:18 how to copy css properties?

[@afaqahmad8918]

Bro please you can use tailwind css or just pure CSS in next project.

[@dosomecoding]

tailwind css

[@afaqahmad8918]

@@dosomecoding thank you boss

[@AnkitKumar-is4ro]

@@dosomecoding the project is not able to deploy on netlify or vercel, there is some issue with the file structure.

[@SaadMahimkar]

@@AnkitKumar-is4ro well that's because we have created an fake api here

[@technicalrider6196]

cart,payment is missing

[@lucky-ok7mq]

koi batayega muze ye duplicate to your draft ka option kaha hai

[@dosomecoding]

Top pe hoga design me

[@yuvrajrajput6650]

Figma me inspect ka option nhi aa raha hai koi btayega kese inspect show hoga

[@dosomecoding]

Duplicate it

[@lozerkit4949]

Please react project make with tailwind css

[@baragame334]

Please create a complete add to cart shopping system please sir

[@dosomecoding]

It will be in library project don’t worry everything is here

[@baragame334]

@@dosomecoding thank you sir library name please

[@ineffable_guy]

Sir mere vs code me css suggestion nhi aa rha kya kre??

[@dosomecoding]

Automatic ata hi

[@dosomecoding]

Styled component ke liye extension chiye

[@rishabhdhawad]

how to host this project ?

[@sidds09]

next projects se html css template de do.. you are writing mostly html css.

[@dosomecoding]

sure

[@Lucifer-xt7un]

Bro by when the series will be done???

[@dosomecoding]

1 month

[@user-ko7fu4uy8h]

better if used axios than fetch

[@ChandPeHun]

Project 8, 9, 10 ?

[@syedaliabidi7822]

2:00

[@technicalrider6196]

bro ur inactive ,you not making projects videos now why bro

[@dosomecoding]

Health issue

[@technicalrider6196]

@@dosomecoding ok

[@riteshkhare8239]

i have lots of confusion on this project

[@hamzaamjad8354]

bro where is the project 5 and 6?

[@dosomecoding]

Check playlists

[@akarshnair440]

it is showing me error when i install packages of app > npm i Cannot read properties of null (reading 'edgesOut') npm ERR! A complete log of this run can be found in: npm ERR! C:\Users\aksha\AppData\Local pm-cache\_logs\2023-08-21T05_55_14_877Z-debug-0.log

[@roktimkamalsenapoty5793]

did you fixed it?

[@chumar8688]

After cd app, run this:npm config set legacy-peer-deps true then run npm i

[@kanishkshakya5705]

@@chumar8688 thanks error solve ho gya👍

[@dineshadhikari5573]

I got a error saying "food.name.toLowercase is not a function" in this line const filter = data?.filter( (food) => food.name.toLowercase().includes(searchValue.toLowercase()) ); How to fix this error???

[@dsr6041]

const filter = data?.filter((food)=>( food.name.toLowerCase().includes(searchValue.toLowerCase()) )); it should be like this

[@RaiSaqibMukhtar]

This is working: { data?.map((food)=>{ {console.log(food.text)} }) } But this is not working : { data?.map((food)=>{ {food.text} }) }

[@bhanusai2948]

please help me i copied all the files from source code and it was hosting perfectly but im getting the site only for one second and it is showing unable to fetch when i refresh it is again coming for just one second please reply as soon as possible

[@dosomecoding]

Env replaced ?

[@rushikeshnaik8421]

hey bro....app me npm i work nhi kr raha..error aa raha hai..plz help

[@_S_AmitPandey]

same