On my blog I am going to discuss and give guild to those who want to build E-commerce website with react. React is the future frontend technology every frontend developer must learn. Thank for viewing my blog. I promised this wont be a waste of time. Thank You!!!
Things found on a normal E-Commerce are as follow: First Navbar: Navbar is the first page you find on every web site and web application including Apps. This are things you will see on almost every E-Commerce Navbar.
#1, Brand Logo:it is usually placed by left top corner on nav page. It beautify and it display company's name.
#2, Search Input Space: It is usually placed at the center of the nav page. Every E-Commerce website must have search input space for easy access to desire product.
#3, Shopping Cart: It helps customers to know the items they want to shop or item they added from the page.
#4, Product Category: This contains all the product you are selling. It usually placed beside the search input.
#5, Location: Some site have but majority don’t. I may not discuss about it.
#6, Wishlists: You can use fontawesome to achieve this. It is usually placed beside Shopping Cart.
#7,Product Category: Product must be displayed on every E-Commerce website. Most E-commerce website uses dropdown beside left side of search input space to display product.
I will post pictures of the components been discussed.
Second slider: Slider makes an E-commerce page beautiful. It also helps to improve animation functionality to you product page. This is why you need sliders on your E-commerce site: 1, You use it as an adverts. 2, You can use it to display promo products. 3, You can use it to give quick introduction about your company. 4, You can use to display peculiar product items. 5, You can used it to display high graphics product items that will beautify your product page.
Products Display: Make use of better UI and UX design to display your products. Use clear pictures and don't make it to be too big. Make use of Css to add better functionality and style it in a fashionable way. Make use of Css hover to display hidden features. Product items should have :
#1,Cart Icon to add items to cart.
#2,Product price.
#3, Wishlist.
#4,Product name.
#5, Product image. Now , above are what you should include in your product items. Good!! We have made great progress and we are not relenting until we start building our web E-commerce application. In addition make sure you hide the cart icon so when you hover on the product page it display it. Product should be well display with sweet heading text. Example: Local Products should display all the local items in Nigeria like rice, beans, yam and so on. Another example: Export product should display all the items that are meant for exportation example are Cashew, Charcoal, Cocoa and so on. don't worry i will send pictures of how they will look like. Just feel relax.
First I will give table of content of things found on a nromal dynamic E-Commerce Web Site.
I guess everybody viewing the post as a background knowledge of html, css, bootstrap or any other css frameworks, Javascript, React and how to use command prompt.
Table of Contents:
#1, Installing Node.js to activate our command prompt.
#2,Creating React E-commerce Boiler Plate using npm or npx.
#3, Setting Images to the public folder on boiler-plate created.
#4, installing on react and Router libraries, useContext , others.
#5, Creating the UI component and navigating through it using Router.
#6, creating our navbar component.
7#, Creating Products Data lists for our products display
#8,Creating product modal.
#9, Creating Product Details.
#10, Creating our cart page for selected items. The cart page will contain the product title, price, amount, delete button, clear cart and checkout button
This are the ten things we are going to pass through to get the job done. React is the best single page application to build frontend interface. It allows you to add javascript directly to your website
#1 Installing Node.js to activate our command prompt