Shopping Cart React.js Project with Explanation✅ [Simple Ecommerce Website using Reactjs ] with code

[@amancollege9064]

this is what we actually want to learn in WEB DEV ❤people used to learn the html and css and focus only on style rather than working ...plz make more videos like that it will help more students.

[@SaifiCode]

Sure bro will try my best

[@umairmithoo2673]

Allah pak apko jaza da Mashallah bht acha sa explain kiy hai ap na and isi video ko daikh ka main na apka channel bhi subscribe kiya and like bhi kiya thanks a lot

[@SaifiCode]

Thank you bro

[@naimuddin6303]

it really helpful to have video like this keep making such videos

[@SaifiCode]

Thank you, I will

[@hafizsherazhanifkhan7775]

Zabardast bro Allah apko jaza ata farmaye

[@SaifiCode]

Shukriya bro keep supporting I need supporters like you

[@ThugLifes-ob9df]

happy to see u back

[@triptivyas2521]

Somehow I managed with audio but...the content helped me a lot Thanks ...

[@SaifiCode]

You're welcome

[@AnjanDas-rw2xh]

Bahut kuch sikhne ko mila. Now i am confident on react. State management easily kar lunga

[@SaifiCode]

Good bro keep it up

[@codewithravi8549]

Nice and easy explaination.More better than my Institute.

[@SaifiCode]

Glad to hear that

[@VirusOnEarth]

best ever video sir

[@SaifiCode]

Thank you keep supporting💪

[@sandeepmaurya1694]

Thank you so much sir

[@SaifiCode]

All the best bro

[@saifitech2.097]

Appreciate your efforts to make videos and nice explanation

[@SaifiCode]

welcome bro

[@webarrays]

@@SaifiCode can you help me i have a problem with my code when I click on add to card function is running but props are not drilling

[@umairmithoo2673]

and you have a very good blog also have you post any video about routing in react

[@SaifiCode]

Yes I have

[@ajitkumarpandey4397]

i am waiting for next part of this video

[@SaifiCode]

Coming soon bro

[@digitaldeveloper7635]

great

[@SaifiCode]

keep supporting bro , more projects coming soon

[@mbh604]

thank you so much bro

[@SaifiCode]

Welcome

[@abhi_vj_cutz]

ThankYou Sir😍

[@SaifiCode]

You are welcome

[@Imran_kpk]

Very helpful for me bro thanks ❤

[@SaifiCode]

keep watching

[@SwatiDange-g1v]

Thank You sir😊

[@SaifiCode]

Welcome

[@shabnamshaikh118]

Is mango DB used in this project?

[@SaifiCode]

This project is using react state only

[@riskid6395]

thanks sir, it helpful❤❤❤

[@SaifiCode]

you are welcome riski d

[@tubeyou9007]

Have you used Redux for state management?

[@SaifiCode]

hi , i have done it without redux

[@tubeyou9007]

@@SaifiCode thanks! A I am searching for redux. Is there any video of u with Redux?

[@SaifiCode]

Check the redux playlist on my channel , waiting for your feedback there. Thank you

[@naimuddin6303]

nice vieo bro bt the way

[@SaifiCode]

Thanks

[@malikbhai2285]

Bro..es project me ap props na use kare ....es ko pele redux me bana phr es ko backent se connect kare..ta k redux..or saga ka bi kuch seekh sakee

[@SaifiCode]

sure bro , is project me frontend pe hi data hai , isi data ko hum backend se call karenge and will use redux to save data

[@malikbhai2285]

@@SaifiCode bas kisi terha se ap muje 4 cheze sekha de...1 image ko data k 7 kese frontend se backen me seave kare 2. category ko kese banye frontend se phr es ka data bi froned se backend se kese hangele kare 3. ID ko front end or backend se kese collet kare.. 4.redux or saga aj my ap ki redux ki vieo dekh rha ho..or us ki practice bi ker rha ho.

[@SaifiCode]

Good , I will be happy to make videos on these topics

[@sanketlondhe7725]

Sir, GitHub ki konsi repo me hai ye vode

[@SaifiCode]

Ye blog me hai

[@naimubro5911]

nice video yaar keep doing..

[@SaifiCode]

Thank you so much 😀

[@mdrahul7343]

vai mera Navbar ka compunents alag file me ha...me kase count ko pass karu navbar ma without navbar import because ager ma navbar ko import karu , tu 2 bar navbar aye ga or ma nahe chata mera webiste ma 2bar navbar hu props kase send karu samaj nahe arahaa he plz help me broo .

[@SaifiCode]

Bhai navbar ko props ke through pass karo jaise maine isme kiya hai for search and setSearch ke liye jahan se component call hoga wahan se pass karo. Ya apne count ko localstorage me save kar lo aur wahan se get karke navbar me dikha do. Try karo ho jaye to warna mere ko screenshot bhejo insta pe me wahan apko solution deta hu

[@litunkhan4309]

Local storage use kare. Ho Kya bhi ?

[@SaifiCode]

litun bro , we have used state only to save data temporary

[@litunkhan4309]

@@SaifiCode bhi react par or vi project banao use local storage plz bhi

[@SaifiCode]

@@litunkhan4309 sure bro

[@ekamruthgangaraju8827]

The content and all is great but your voice is really very low in the video. As an audience I would advice you to increase your default volume in the video.

[@SaifiCode]

Sure bro . In my new videos i have worked on volume issue

[@ekamruthgangaraju8827]

Great man, appreciate you!

[@abhishekKumar-lh3pc]

Bhai apka explanation is so wonderful and very easy for new learner to understand clearly, while developing application i got struck at one point when i implement + or - button after seeing in card their price showing NAN and also + or - button is not working ,i spent lot time to implenet in my way also but failed please help me in comming from that issues.and once again it really helping me to get better understanong of functionality of reactJS.

[@SaifiCode]

Bro aise apka issue nahi samjh aa raha , phir bhi aap string and number zaroor check karna price me agar string me price hai to usko number me convert karna jahan bhi price use ho raha hai

[@hfghgfhg2436]

good

[@SaifiCode]

Thanks

[@talhahaider2186]

sir how can we delete a particular item in cart

[@SaifiCode]

cart ek array hai , so jis bhi cart item pe click hoga us index se entry ko delete karna hota hai , ya phir map method se bhi remove kar sakte hai given index data ko, is video me detail me disscuss kiya h ye main , check kzbin.info/www/bejne/h5K1cpmMnM2bn7c Shopping cart ka next video bana raha hu to usme data api se call karenge and aur functionalities add karenge try and let me know if you still face any issue

[@SaifiCode]

always welcome , keep learning , keep supporting

[@talhahaider2186]

@@SaifiCode Allhumdulillah sir hoagay thank you soo much sir 🖤🖤🖤🖤

[@SaifiCode]

You are welcome , keep supporting my channel

[@prathvin8218]

How long will it take to install the package?

[@SaifiCode]

Depends on net speed, one to five minutes

[@prathvin8218]

Thanks bro

[@rajeevyadav-np3fg]

Yr img kha se la rhe ho ye mujhe samajh nhi a rrha m same aapka wala url use kr rha hu to mere m nhi a rha...

[@SaifiCode]

Aap description me code link hai wahan jake try karo

[@TechnoSaifi]

Nice

[@SaifiCode]

Thanks

[@CricketNews-iv5op]

Waiting for this bro

[@SaifiCode]

thank u

[@sonamojha5342]

Hi saifi..ur video is really awesome..can you please upload the next part of this whatever you have Mentioned in last min of this video..I have some requirements to complete..If you will do it will be helpful. Thank you!!

[@SaifiCode]

Thank you , you find my video helpfull , i will upload the next part of it soon , and also working on some other projects. If you have any other project ideas plz share

[@prathvin8218]

Im getting an error where u give this Product It's showing syntax error what do i do

[@SaifiCode]

Can you share more details on this

[@prathvin8218]

​​@@SaifiCode It's showing error in those angular bracket and the last 2 flower braces (Unexpected token) Function ProductList(){ return { product } }

[@SaifiCode]

@@prathvin8218 you are calling product component it should be or if it is variable it should be {product}

[@prathvin8218]

@@SaifiCode oh okaay thanks bro🫡

[@SaifiCode]

Is it solved?

[@rajeevyadav-np3fg]

Suru se btao ye kese bnaya h title img I'd..

[@SaifiCode]

Img ka url aap koi bhi url use jar sakte hai dummy imges urls search karo net pe apko images url mil jayenge wo ap use kar sakte ho

[@rafeekahmad9979]

Good video by the way Thanksgiving

[@SaifiCode]

Thanks! You too!

[@digitaldeveloper7635]

mujhe react mai expert honay kai tips bbatay

[@SaifiCode]

In React you need to understand how state and props works and how can we pass functions from one component to another , except this focus on redux and other react is all about basic javascript

[@digitaldeveloper7635]

@@SaifiCode ok ok but my js is weak

[@SaifiCode]

Javascript is not difficult ,you just need to learn the basics

[@Movie_ki_kahani]

Make lots of projects and practice

[@SaifiCode]

@Movie_ki_kahani yes

[@creatorboy4901]

Please make more videos

[@SaifiCode]

sure bro

[@monirhossain6288]

How can I separated item by seller??

[@SaifiCode]

Monir Hossain Bro , Jab hum backend pe save karenge data to usme seller name bhi save karenge , seller name ke according hum data filter karke separate karte hain , next part me wo add karunga. abhi univeristy project pe work kar raha hu uske baad ye series me next features add karung bro. Thnk you for your support

[@monirhossain6288]

Thanks for your replied.

[@AbhishekKumar-xw7dz]

Mujhe na aap se personally pdhna hai or mere friend bhi hai pdhne ke liye ready hai ydi aap ready hai tho please reply me

[@SaifiCode]

Aapko kitna padhna hai aur kis type se padhna hai agar aap kuch detail me bataye to me apki help zaroor karunga

[@Dev-Phantom]

aacha tha

[@SaifiCode]

you are welcome bro

[@editingsaifi9150]

Wow sir

[@kaushikjadav5824]

How can i download full project source code ?

[@SaifiCode]

Bro iska source code available nahi hai mere pass

[@procoding735]

Superb Bro. I completed my task with the help of your video. I have a Question ? if Product A is already in cart. then if we click on Add to cart button of Product A it wont have to add in new row. it just have to increment in its quantity. Hows thats possible? can you explain a lil bit ? BTW Thanks for awesome tutorial. ❤❤

[@SaifiCode]

we can maintain some state to save quantity, with the object that we save in state, check my ecom series on MERN stack for more info

[@procoding735]

@@SaifiCode sure thank you

[@poojakalel2648]

👍👍

[@MustfaKhan-y8r]

Assalamualaikum

[@SaifiCode]

Wa alekum assalam

[@Ashokkumar-l2p9o]

thanks bhai

[@SaifiCode]

Welcome bro

[@bheeralingbheeraling3316]

Compiled with problems: A ERROR Mc App is 6.0-44 Module not found: Error: Can't resolve./components/Header.js' in 'C:\Users ajab\OneDrive\Desktop eact-project eacti\src ERROR in /src/App js: 7.0-54 Module not found: Error: Can't resolve ./components/ProductList.js' in 'C:\Users ajab\OneDrive\Desktop eact-project eact1\src ERROR in /src/App is 8:0-48 Module not found: Error: Can't resolve './components/Cartiist.js' in 'C:\Users ajab\OneDrive\Desktop eact-project eact1\src

[@SaifiCode]

App. Js file me import jo kiye un sab components ko create karo but src ke andar components folder ke andar karo apna folder structure ka screen shot do insta pe

[@manishnegi7150]

Api link please

[@SaifiCode]

Please check description

[@rajeevyadav-np3fg]

Bahut der ho gyi isme mujhe img nhi a rhi

[@SaifiCode]

Dummy images url use karo lo net pe search karke

[@saptarsidebnath3516]

Where is part two?

[@SaifiCode]

Check complete series in channels playlist section

[@bheeralingbheeraling3316]

Sir giving the error sir plz solutions give me sir

[@SaifiCode]

Share me err details on insta i will try to resolve

[@bheeralingbheeraling3316]

Compiled with problems: A ERROR Mc App is 6.0-44 Module not found: Error: Can't resolve./components/Header.js' in 'C:\Users ajab\OneDrive\Desktop eact-project eacti\src ERROR in /src/App js: 7.0-54 Module not found: Error: Can't resolve ./components/ProductList.js' in 'C:\Users ajab\OneDrive\Desktop eact-project eact1\src ERROR in /src/App is 8:0-48 Module not found: Error: Can't resolve './components/Cartiist.js' in 'C:\Users ajab\OneDrive\Desktop eact-project eact1\src

[@bheeralingbheeraling3316]

Compiled with problems: A ERROR Mc App is 6.0-44 Module not found: Error: Can't resolve./components/Header.js' in 'C:\Users ajab\OneDrive\Desktop eact-project eacti\src ERROR in /src/App js: 7.0-54 Module not found: Error: Can't resolve ./components/ProductList.js' in 'C:\Users ajab\OneDrive\Desktop eact-project eact1\src ERROR in /src/App is 8:0-48 Module not found: Error: Can't resolve './components/Cartiist.js' in 'C:\Users ajab\OneDrive\Desktop eact-project eact1\src

[@bheeralingbheeraling3316]

This error giving sir plz slove sir

[@bheeralingbheeraling3316]

3 error

[@bheeralingbheeraling3316]

Es error video bejo sir

[@SaifiCode]

check the link bro saificode.blogspot.com/2022/08/shopping-cart-reactjs-project-with.html

[@bheeralingbheeraling3316]

Sir not work sir

[@mobpsycho6600]

Bhai tumhara code me problem h agr agr ek hi product ko do ya usse zyada baar click kr raha to ek new object add ho raha jabke "if (cart.includes(e)) return" statement bhi use kiya h add event pe tab bhi to koi solution h kya?

[@SaifiCode]

Jahan pe bhai array me item push kiya hai wahan check lagate hai Like if(yourArray.indexOf('item')=== -1){ YourArray.push(item) } Agar array me wo item pahle se na ho ta hi push karte hai nahi to nahi karte hai , maine check nahi lagay isliye same product dubara push ho jayega

[@mobpsycho6600]

@@SaifiCode check your insta

[@SaifiCode]

ok bro

[@Mohd.murtuza-h7q]

thank you

[@SaifiCode]

Welcome

[@editingsaifi9150]

Support sir ❤️

[@SaifiCode]

sure bro welocme

[@editingsaifi9150]

@@SaifiCode sir community post please

[@Dev-Phantom]

CART?.map((cartItem, cartindex) => { why this ? is used , and what is it called, please any body reply

[@Dev-Phantom]

very informative, thanks for helping.

[@anshulvairagade1604]

, "CART?.map" is checking to see if the CART object exists and is not null or undefined before attempting to call the "map" method on it. This is useful to prevent errors that would occur if you tried to call a method on a null or undefined object.

[@creatorboy4901]

On react

[@SaifiCode]

will try my best

[@mdmeshkathossain259]

sound is too poor

[@SaifiCode]

yes bro that was little slow recorded , sorry for that

[@mdmeshkathossain259]

@@SaifiCode but explain is very good ,, already subscribed.. carry on

[@SaifiCode]

@@mdmeshkathossain259 keep supporting bro from my new videos i will take care of this

[@isurusandaruwan4769]

bro focus on UI

[@SaifiCode]

sure bro

[@mitadas7084]

Bhai kafi sara error hai

[@SaifiCode]

will resolve errors in next part

[@SaifiCode]

check the new ecom web dev series playlist

[@mohitgoyal598]

Kafi sare errors h sir video m pta nhi aap kase kr leete h practice karke dekho to shi nhi h ye videos aapki

[@SaifiCode]

new series start kiya h maine bro wo dekho

[@creatorboy4901]

Movie ui

[@SaifiCode]

movie ui pe like kis type se can you explain more bro thank you by the way

[@temujin9344]

Bhai iska second part kaha hai ap iska KZbin link de sakte hai ?

[@SaifiCode]

Bhai iske baad pura series hai ecom ka app channel. Visit karo wahan mil jayega isme without apis dummy data ke sath sirf ui show kiya detail me series me mil jayega

[@temujin9344]

@@SaifiCode apka jo E-commerce wala video hai 8 hrs wala wo dekhna hai ?

[@manyagupta8679]

Thank you sir 💕

[@SaifiCode]

You are welcome

[@SandeepSingh-ji1eo]

nice

[@SaifiCode]

Thanks for watching