Build e-Commerce Website with React and Ant Design | Simple e-Commerce Website in React JS
HTML-код
- Опубликовано: 30 ноя 2022
- #reactjs #antd #ecommercewebsite
In this video tutorial I have explained how to build an e-Commerce website with React and Ant Design.
This video focuses on
- How to build an e-Commerce website with React and Ant Design.
- Simple e-Commerce Website development in React JS
- How to create simple e-commerce website using ReactJS and Ant Design UI components
- How to create header for e-commerce website in react js
-How to create footer for e-commerce website in react js
- How to add react router dom navigation for ecommerce react website
- How to create header menu and sub menu for e commerce categories listing
- How to fetch e commerce related products from server in reactjs
- How to populate e commerce products in react js app using ant design card
- How to show discount badge ribbon on e commerce products in react app
- How to show rating on e commerce products in react app
- How to show add to cart button on e commerce products in react app
- How to implement add to cart API call for ecommerce react website
- How to show strike through price on e commerce products cards in react app
- How to show view cart button
- How to show cart list for ecommerce react website using ant design table
- How to change cart quantity on the go on view cart
- How to calculate grand total on cart view for ecommerce react website using ant design table summary prop function
- How to use javascript map, reduce and promises
- How to show badge on view cart button for ecommerce website in react js project
- How to use typography for different content of react js project
- How to use ant design drawer component
- How to use ant design List component to show a list of e commerce products
- How to add styling to e commerce website components
- How to create different pages and components inside react application
- How to integrate react e commerce website with server APIs
- How to create checkout FORM for e commerce website in react using antd form component
- How to add validation to e commerce checkout form to confirm order
- How to show loading while products are loading/fetching
- How to show success messages/feedback based on user action on e commerce website in react app
- How to combine different ant design components to create a simple website in react js
- How to user BrowserRouter, Routes and Route in react js application
- How to define routes in a react application using react router dom
- How to add product image preview in e commerce react website
If you are new to ant-design, I have already added an intro video on ant-design and overview of its components at • Ant Design UI library ... link, please go through that video to set up the ground for further components implementation.
Also in this video we will be using different ant design components, so if you have not gone through those already here are their specific videos to see how those components are being used in react app
Ant Design Button: • How to use Ant Design ...
Ant Design Input: • How to use Ant Design ...
Ant Design Select: • Ant Design Select comp...
Ant Design Drawer: • How to Use Ant Design ...
Ant Design Form: • Ant Design Form compon...
Ant Design Form Validation: • How to Create and Vali...
Ant Design Menu: • How to use Ant Design ...
Ant Design Spin: • Ant Design Spin compon...
Ant Design Message: • Ant Design Alert and M...
Ant Design Table: • Ant Design Table compo...
Ant Design Typography: • Ant Design Typography ...
Ant Design Card: • How to Create React JS...
Ant Design Rate: • How to Use Ant Design ...
Ant Design Icon: • How to use Ant Design ...
Also used different hooks and react/javascript concepts based on these videos
useState Hook: • Learn React useState H...
useEffect Hook: • Learn React useEffect ...
React Router Dom: • How to implement Route...
JavaScript Promise: • JavaScript Promises Tu...
React Flexbox: • React FlexBox Tutorial...
The codebase developed in this tutorial can be access via Github at following link
github.com/aamirjaved844/Simp...
For more details on ant-design, please visit its documentation at ant.design/components/overview
Happy Coding!
정말감사합니다. 열심히 보고 배우고있습니다. ^_^
great work amir, gonna try out this!!
By the way thanks for the great support and guidance you provided to me regarding antd tables. We finished our project successfully and graduated from the Bootcamp and I can't fail to thank you. I will be forever grateful as I start off my tech career. May God reward you abundantly.
That's a really great news @balenzi phillip
I am very glad to hear this nice feedback, always happy to help! Thank you so much for the best wishes.
Can't believe we are having our first project based Ant design tutorial. I am really excited to go through it. Thank you keep that coming
Thanks @Testing Account,
I am so grateful for your kind words and hoping that you will find this a very helpful tutorial.
Cheers!
@@CodeWithAamir Now i can see how you are using the components practically which makes more sense now.
Yes @Testing Account you are right, there are around a dozen different components used in the tutorial and I have added their separate video links in the video description as well for developers who has not gone through those yet, can watch to get the ground set.
Thanks
@@CodeWithAamir I am still trying to understand how you have displayed the card item without using any get management. and i like the filtering that you have done. i must say very nice Aamir. i just finished watching your tutorial but i will have to develop this too by watching your video so i could clear my more concepts.
i will rewatch the video again tomorrow and maybe couple of more times.
Great!!!
Thank you @Arnaud POUTIEU
Fantastic
Thank you! Cheers!
❤ awesome 👍👍 work bro
Thank you so much 😀
awsome, guy!
Thank you so much @ReDo ! 😊
Can we use tailwind css with ant design
nice bro
Thanks ❤
Hello, my friend! First of all, I would like to thank you. I recently discovered your channel and I'm learning a lot. How long have you been programming? It seems very easy for you. I'm just starting out, I've been studying for 6 months and I still can't come close to doing something like what you do. Do you have any tips for me? Thank you in advance, and greetings from Brazil!
Hi @Iuan1,
Thank you so much for such a nice feedback. Means a lot to me. I started programming a decade ago. Keep your passion high and learn the basic concepts and building block of whatever you are doing. Soon you will be a pro in your field.
Thanks again!
@@CodeWithAamir Im having a hard time to understand some integrations with the back end on front end. If u could bring more of this, like, consumin an api with redux and stuff, such hard for me. Btw I really appreciate your help, thank you very much!
where you defined menu section?
Hey 👋. How can I control the width of the contents in the layout. Because that of antd is too wide
Hi @mutebi ug official,
We can control the width of content usually by adding a css className or style prop to the parent component which is holding the content so we adjust its width based on a %age value or a flex value or a fixed px value. If you can share the code snippet I can suggest where to add that, but I have a video on this thing as well which explains how to style different antd components based on our needs even we can override their styles so those antd components take the space we specify like in you case. Here is that video link it might help you. ruclips.net/video/gpG967lkiJc/видео.html
Please let me know if you have any more questions on that. Thanks
Hey how to modify ant design theme completey to our custom theme just like with mui
Hi @Dania,
We can customise antd theme overall or even customise it differently in different components based on our needs, I have explained it in detail in following video
ruclips.net/video/tgD-csfLNUs/видео.html
I hope it will be helpful. In case of any questions please let me know.
Thanks
my bug is 'Menu' is not defined react/jsx-no-undef. Can you answer my question
Hi @Lê Hoàng Anh
Can you please share how you are importing the Menu from antd?
The import statement should be like
import {Menu} from 'antd'
Thanks
is there a project of yours that use real api or cms?
Hi @CoconutwCoco
Not at the moment, I usually make videos from frontend point of view and use existing/dummy JSON/APIs or if needed I create a simple node/express server but not that much fancy to cater the real APIs etc.
Amir please how can we make this website and others responsive for all tabs and mobiles. It's important please
Hi @muhammadbashir3695
We can make the website responsive using media queries or using flexbox/Grid and adjusting the components accordingly. I have explained similar concept in the following video by creating a responsive nav bar at below link please check and see if that works for your project.
ruclips.net/video/1bJ_LkCJVP8/видео.html
Please let me know if you need any more help on that.
Thanks
Is it Responsive or not ??
Hello sir, I set API and data but at Men's shirt it shows No data . I coded the same as in the video .Please help why it is showing no data.
Hi @Anshul Sharma
Please make sure the category name is "mens-shirts" and if still it does not work, may be you can share the code snippet here or send me on aamircodewith@gmail.com I will take a look to see what could be the issue.
Thanks
@@CodeWithAamir ohkk Thank you sir
@@CodeWithAamir Bro im also getting the same error i dont know how to solve it plz help
please do a video stripe front end for react js
Thank you for the great suggestion for future videos.
Much Appreciated !
Hii amir I m getting this error props.setEditing not a function what is the right approach ?
Hi @Deadmax,
Please share the code snippet here so we can see what’s the issue?
@@CodeWithAamir this issue is fixed but now actually I wanted to show my user details when I type url as localhost/users/1 by typing this url I should get my user details content to be rendered what should I do in this case?
Hi @Deadmax Max,
You can achieve that using following steps
1- Declare your route path like "/users/:userId"
2- In your user details component you can get this userId param inside the useParam hook provided by react-router-dom
3- Fetch the user details as per userId
4- Display it inside user details component
Please let me know if you need any more help in any above step.
Thanks
When I click on another menu then whole page is blank & getting error "Uncaught TypeError: Cannot read properties of undefined (reading 'then')" & "Consider adding an error boundary to your tree to customize error handling behavior." please help me to solve it
Hi @Mohammad Arsil,
Are you getting the error on mine code or its a different codebase?
@@CodeWithAamir I coded the same as in the video
Hi @Mohammad Arsil
If its the same codebase then it should work fine, but still if you are getting issues, we can jump over the zoom call to see the problem and fix that. Will that work for you?
Also I have pushed the code at below repo, you can download that to may be match your code with that one if that helps,
otherwise I am available for a zoom call to see the issue.
Here is the repo: github.com/aamirjaved844/Simple-e-Commerce-Website-using-React-and-Ant-Design
Thanks
@@CodeWithAamir ok Thanks
Bro API is not working with mee when i select a specific category.. and showing no error i check everything ... all are ok but still nort working... what should i do please??/
Hello @Asfand,
Which particular API is not working?
@@CodeWithAamir getProductByCategory
Is it possible to share the code snippet here so I can take a look what could be the issue?
@@CodeWithAamir bro i need some guidance as well.. would be good if u give me ur email and we arrange a google meet call in later when u get free.. give me ur email so that i can contact u
Hi Asfand Khan ,
You can email me at aamircodewith@gmail.com
30:59 line 78:5 'addToCart' is not defined error please help me
Hi @Mohammed Khan,
Please continue viewing I have written all those functions so at that particular time it might be giving you error but if you continue viewing video I have defined that function.
Please let me know if you still facing any issues.
Thank s
How can I make it responsive to show atleast one card on mobile 📱 and two cards on iPad etc
Hi @mutebi ug official
You can adjust the number of columns in the grid prop of List. So you can try something like below, change the values according to your needs.
Please let me know if it worked for you or need more help on that.
THANKS.
@@CodeWithAamir great it's what I did!. But I would like to know how I can make the top navbar responsive ie. To fit on 📱. Mine only shows 3 menu items and dots to show the rest. How can I make it to show all
Hi @mutebi ug official
We can make the navbar responsive, like on larger resolution/desktop we can keep it on top header and on lower resolutions/mobile we can show that as side-menu or in a drawer or something to fit within mobile screen resolution. I have explained this responsive navbar concept in following video, please go through that if you have not watched already.
ruclips.net/video/1bJ_LkCJVP8/видео.html
Please let me know if you need any more information on that. Thanks
@@CodeWithAamir great
@@CodeWithAamir how can I reduce the card width when reducing the grids to fit responsively on tab and mobiles??
Is it mobile responsive working this website?????
It is not mobile responsive at the moment.
@@CodeWithAamir Can we will used media queries in css for mobile responsive it's right?
Yes, its right Raja. Thanks
30:30 i will contineu when i have time love u somuch
Thank you @Thành Quí Nguyễn
Hello am following up with this tutorial!. But am getting an error , invalid attempt to iterate over non array items . When am rendering items in list with cards.
I have used useState hook and my state is stored in setItems(res.data)
How can I solve this because I've tried most solutions but am failing
Hi mutebi ug official
Can you please console the res.data before you set it to setItems just to check its a valid array?
Thanks
memo 24:00
Compiled with problems:
ERROR in /src/Apps 4:0-14
Module not found: Error: Can't resolve antd" In "C:\Users
ajab\OneDrive\Desktopireact-project reactiisrc"
ERROR in /r/Components Footenindex.js 4:0-34
Module not found: Error: Can't resolve "ant" in "C:\Users\jab\OneDrive\Desktop
eact-project
eact1\src\Components\Footer
ERROR in Jar/Components/Header/index.js 8:0-69
Module not found: Error: Can't resolve @ant design/icons in 'C:\Users\j
erve\WDesktop
eact-project
eact1\src\Components\eader
ERROR in Jarc/Components/Header/index.js 7:0-115
Module not found: Frror: Can't resolve 'ante' in "CMsers
Drive\Desktop\/react-project
eact\src\Components\header"
ADO
ERROR in /src/Components/Products/index.js 6.0-97
Module not found: Error: Can't resolve "ent" in "C:\Users
ajab\Onebrive\Desktop
eact-project
ect\src\Components\Products"
Bro this error
Come
Hi,
You can checkout the code from below repo and see if issues still exist
github.com/aamirjaved844/Simple-e-Commerce-Website-using-React-and-Ant-Design
Hey!. Suppose one item like iphone x, had many images !, How can such images be displayed using antd image preview or any other phone. Thanks
Hi ,
Yes you can display multiple images inside antd image preview I have explained this in pretty much detail in following video.
ruclips.net/video/ZoR2pNbwTNs/видео.html
Luckily in both videos I user the same dummy json products so you can easily relate them.
Please let me know if that video was helpful or need any more information on this one. Thank you
@@CodeWithAamir it's exactly 💯 what I was looking for
That is great to hear its been covered 💯