Project 4 - Foody Zone | 10 React Projects for Beginners
HTML-код
- Опубликовано: 18 май 2023
- 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/file/rephrU2FVg...
Starter Code Base Project 4 - github.com/anshuopinion/React...
Project 4 Foody Zone Source Code
github.com/anshuopinion/React...
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/dosomecodinghelp
Instagram - / dosomecoding
Github - github.com/anshuopinion
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
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 😊
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
Love you bro. I was facing this problem.
Thanks 👍
best channel for react project.....you are doing good bro......thankyou
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!
once again an amazing concept booster
the project is not able to deploy on netlify or vercel, there is some issue with the file structure.
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
why is inspect option is not showing in figma for me to get the css code can anyone pls help
Thank you so much. Need this kind of videos.
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
Thanks
41 minutes onwarde in the video
no inspect element is visible in the figma, how do i copy the css
How can we deploy this along with backend??
bohot zabardast amazing project love from pak
nice content and well explained each points....Kudos!!
Backend se jo api call hora hai use interview me explain kese karege?
Always great❤
very helpful video thanks brother
Superb bhai.. easy to learn platform.
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
bro your content is gem thanks for this project series its best for practice
can you help me in this project
app ke packages install nhi ho rhe ! what to do ?
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
your project is osm and helpful for react ☺. can you make any project in react + metrial ui
very much helpful bhai jaan 👍.
Thank you so very much sir ji
guru ji jitni tareef ki jaye utni kam
Bhaiya how do i deploy this project ?
THANKS BRO AMAZING ...
Nice 👌
React js se hum kaise animated website bana sakte hain uske upar ek do video late toh aur bhi acha hota
superb sir
45:18 how to copy css properties?
Always gr8
bro my server side not working starting
video time
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
just run this command after cd app: npm config set legacy-peer-deps true, then run npm i 100% it will work.
@@abhiak3959 Thankyou bhai.. i also had same problem
@@abhiak3959 Thank you brother it solved the issue
how to host this project ?
Thanks bro
why the app dependencies are not installing and showing error that npm ERR! Cannot read properties of null (reading 'edgesOut')
same problem how to solve??
npm install mein error aa rahe hai bahut windows mein
[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
Thanks
if you do not use const [selectedBtn, setSelectedBtn] = useState("all");.in this case also it will work properly
Love from Bangladesh
good project
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
Env replaced ?
nice vedio
@dosomecoding bro 10 projects bola tha aapne abhi bas 7 hi projects upload huwe hai , pleasee bhai or 3 upload kardo tagde waale.
this projecct was really something finally finished it
you got any errros?
Wts the backend used here ?
@@Sahilsharma-sk5vr no
@@27august60you don't have to worry about backend...it's code is already provided...just focus on frontend in this project 😊
@@lalit-singh-bisht could you help me pls in this project
bro showing error in npm i for app folder
npm ERR! Cannot read properties of null (reading 'edgesOut')
Same error
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?
@dosomecoding yes please reply, the project is not able to deploy on netlify or vercel, there is some issue with the file structure.
Next js better option ..Here built in route .Can you make video with next js
why is the npm i is not working for app folder in my terminal.
same problem i am facing
cart,payment is missing
Nice clone ❤
sir please tell when we use callback function but unfortunetly that function didn't work here please tell me the way urgent
When you want to control rerendering
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
Pls continue series 😢
It will be good if you add time stamps
Inspect tab not showing in Figma even after applying dev mode
Figma is updated
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
Okay
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
clone using github, check my github course
sir ho nhi rha h
@@dosomecoding nhi ho rha h sir smjh nhi aa rha ,
bro tune shayad source code download karliya hoga
@@user-ge6cd1mh4t
starter base code vala download karo
@@user-ge6cd1mh4t
Bro please also create a 1video course for Gatsby js
raw code likho keya hoga library use karke
koi batayega muze ye duplicate to your draft ka option kaha hai
Top pe hoga design me
hey bro....app me npm i work nhi kr raha..error aa raha hai..plz help
same
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
Node install hi ?
@@dosomecoding yes sir update bhi kar liya
@@dosomecoding mujhe bhi same error aa rha hai
solve hua kya bhai?? @@lalit-singh-bisht
mera bhi error a rha h jab me `npm i ` likh rha hu error:`npm ERR! Cannot read properties of null (reading 'edgesOut')`
Sir mere vs code me css suggestion nhi aa rha kya kre??
Automatic ata hi
Styled component ke liye extension chiye
Bro please you can use tailwind css or just pure CSS in next project.
tailwind css
@@dosomecoding thank you boss
@@dosomecoding the project is not able to deploy on netlify or vercel, there is some issue with the file structure.
@@AnkitKumar-is4ro well that's because we have created an fake api here
Brother please bootstrap instead of styled-components
Bootsrap is easy to make responsive websites
I Love you Sir
pls do a project that uses next js
its a request as it helps many of us
Sure
better if used axios than fetch
Figma me inspect ka option nhi aa raha hai koi btayega kese inspect show hoga
Duplicate it
Bro by when the series will be done???
1 month
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.
Can you share the code with components
Project 8, 9, 10 ?
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😂
I know it’s starting project
That’s why i made this
@@dosomecoding ok.. And pls make projects using next js too if possible
Please react project make with tailwind css
i have lots of confusion on this project
Please create a complete add to cart shopping system please sir
It will be in library project don’t worry everything is here
@@dosomecoding thank you sir library name please
Bro plz make a project with tailwind css
Yes
Yes
bro ur inactive ,you not making projects videos now why bro
Health issue
@@dosomecoding ok
bro where is the project 5 and 6?
Check playlists
next projects se html css template de do.. you are writing mostly html css.
sure
2:00
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.
This helped. Thanks!
thanksssssss bhai
Hello
Let God bless yuh for this help❤
Thank you mitr
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
did you fixed it?
After cd app, run this:npm config set legacy-peer-deps true then run npm i
@@chumar8688 thanks error solve ho gya👍
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???
const filter = data?.filter((food)=>(
food.name.toLowerCase().includes(searchValue.toLowerCase())
));
it should be like this
This is working:
{
data?.map((food)=>{
{console.log(food.text)}
})
}
But this is not working :
{
data?.map((food)=>{
{food.text}
})
}