My Experience of cloning Banggood.com

Hello everyone,

I’m Shubham,

A student @Masai_School,

I would like to share my experience of cloning Banggood.com — an e-commerce website that operates internationally. As in Construct week at the end of the unit, students have to make a project. So, the site was given to us, and we had to clone it.

The site given to us was https://www.banggood.com, an e-commerce website

We used a very basic tech stack for building the pages like HTML, CSS, and JavaScript, nothing other than that. While building the pages a struggled a lot but I did learn. I tried my best to give simpler functionality to the pages so that the end-user will have hustle free experience while shopping.

We were five people working on various pages. In the very first meeting of our project, the work had divided equally. Some people in the group had previous experience in building the site.

There were a total of five people working on the project including me.

Teammates

Harsh Vyas

lead the project and collaborate to build the signup and top navigation bar and added functionality to the home page

Mohammad Ahtiesham Khan

Added some crucial functionality on the home page as well as the Wishlist page.

Naresh Rajput

Responsible for building the Women’s page as well as the Coupon page.

Prateek Kumar

Responsible for building the Shoes and Bags page.

Shubham Rakhonde

Responsible for Building Men’s page, shipping address, payment gateway page, and the cart page

Pages I worked on:

  • Men’s page
  • Cart
  • Payment page
  • OTP verification

Men’s page

I worked on “Men’s Page”, where I have added a side navigation bar. I also added three sections which are as follows:

  • Flash Deal,
  • New Arrival,
  • Recommendations For You

For Flash Deals and New Arrival, I used an array of objects and then mapped the data using JavaScript. It took much time to first make an array of objects as I had to get the URLs of images and names and prices.

  • As you can see above, I have used a display grid for arranging the data, putting five products per row.
  • I also added a button the ‘Add to cart, which will add the selected product to the cart, with the help of JavaScript.
  • Whenever the end-user clicks on add to cart, the data will be stored in the local storage and I have assigned a unique key to get the items from the local storage.
  • I used local storage extensively for storing the data as per the requirements.
  • Whereas, in the ‘Recommendation For You’ section, I added more functionality like filtering the data according to its category and sorting the data according to price.
  • For filtering out the data, I have used the higher-order function filter, so the data can be arranged according to the categories. I used a select tag from the HTML side to display the data.
  • Sorting the data according to price, I go with a higher-order function sort. So, the data will be sorted according to the price like Low to High or High to Low. On the HTML side, I used the select tag.
  • Previously I wanted to build both the men’s and women’s pages so that while giving functionality there won’t be any confusion about classes and ID uses as well as the key used for getting the data from the local storage. But Harsh, our team leader asked me to stick to the Men’s page only and work on other pages, so I went accordingly.
  • The weightage of Tech Stack used: Html used-25%, CSS used-35%, JavaScript used-40%.

Cart page:

The end-user can go to the cart, by clicking on the cart icon shown above in the navbar so that he/she can see whichever products are added by him/her to the cart.

  • First, I thought about display flex only to arrange the data in various blocks. But after some time, I realize, I can use the grid area method also. So, I went for the grid area to arrange the data on the whole page
  • In this, I created four subsections which as shown above and also mentioned below:

Shopping Cart — for showing the number of items present in the cart

Selected items — Showing the items added to the cart

Order summary — showing the total price of all the items in the cart and buttons for payment Proceeding and Appling Promo code.

Card Accepted — shows the Debit cards accepted for the online payment

  • In the shopping cart section, the number inside the round bracket shows the number of products inside the cart. As I inject the cart data into the local storage in form of an array of objects, the length of an array given the number of products in the cart.
  • Below the shopping cart section, the products added to the cart have shown along with the image of the product as well as the price and the category. I also gave the remove button, so that the end-user can easily remove the product whichever he/she does not want to buy. For removing any product, I used an inbuilt function splice in JavaScript.
  • For calculating the total price of the products inside the cart, I used JavaScript.
  • And I showed it in summary. On the actual website, the total price is displayed along with the number of products added to the cart. But I only went for the total price.
  • The weightage of Tech Stack used: Html used-25%, CSS used-45%, JavaScript used-30%

Here I got stuck:

  • In the order summary section, I got stuck, as I was unable to understand, after calculating the total price how will be the user-flow. So, I immediately call one of my teammates, Naresh.
  • Then Naresh and I had a long discussion on where to land the user from the cart page. So, after almost one and half hours of discussion, we unanimously decided to add two buttons:

1. Proceed to Payment: After clicking on this, the user will be landed on the Shipping Address & payment page with the same total price shown on the cart page.

2. Click here: If the user has the coupon or promo code, he/she after clicking on the click here button will be landed on the coupon page, so he/she can apply it and get the discount on the total price.

Payment page:

For this, I have created two sections, which are as follows:

  1. Shipping Address — Made by using a display grid

2. Payment Gateway — Made by using a display grid and JavaScript

  • For shipping address details and debit card details, I used the display flex. To arrange the content inside the forms, I used the display grid.
  • For shipping address details, I had to refer to the previous notes of our instructor Chandra Sekhar sir. So, I used the form along with the Input and Select tags on the HTML side. Whereas, on the JavaScript side, I added the event listener “submit”. And also added a button for getting details of the user. So, when the user will fill in his/her name and click on the “click here to get details”, his/her details will be fetched automatically. So, for now, data was hard printed for only one name.
  • The same goes with the card details, the card data is also hard printed, so that, it will check for only one entry. If the details are correct, the alert of OTP sent will be displayed and the user will be redirected to OTP verification.
  • All I did was with the only one if-else condition.
  • The weightage of Tech Stack used: Html used-40%, CSS used-30%, JavaScript used-30%.

OTP verification:

  • On this, Harsh was not ready to make a separate page for the OTP verification but I convinced him and I made the page, and here also I hard printed the value of OTP.
  • On this page, a user has to enter the OTP sent to his/her registered email id.
  • I have used JavaScript for matching the OTP, if it matches with the data, payment successful and order placed alerts will be shown and the user will be redirected to the “my order” page. For now, I hard printed the OTP.
  • The weightage of Tech Stack used: Html used-25%, CSS used-25%, JavaScript used-50%.

Obstacles I faced:

With Payment Page:

  • As I mentioned, I had hard printed the values regarding the card details, I had to compare those with the input values. But while comparing, it was only satisfying one condition. I tried a lot, but couldn’t find what was going wrong.
  • Then I discussed the same with Naresh. Naresh told me that the issue is with the input value of the card name. As JavaScript is case sensitive language, it needs input as it is. Then I fixed the same.

Summary:

The first time, I experienced that, building a website in a group is a challenging task. I had to co-ordinate with the people, share my thoughts and ideas and I had to understand the thought and ideas of others also.

Sometimes, we were ahead of the deadline decided by us for completing a particular task, sometimes we lagged. So, I experienced, how to approach any problem actually in a group.

A new thing I learn:

  • When your teammate wants to add his code to your file, you should not use the same class name or id name. So, while merging the files, there will be no conflict.
  • While adding CSS to HTML elements, we have to be careful about giving margins, especially the left and right margins because the webpage has to adjust according to the particular screen size.
  • At times your mate does not get the thing or may face issues like understanding any particular thing. In that case, you have to make him understand the things though the particular assigned task is not yours, because as a team you have all have to align the things so that the project will be completed on time.
  • While using a universal selector in CSS, you have to be very careful, especially when giving margins, and font sizes.

Call of Action:

I know there is always scope for improvement. If you want to suggest something, if you want to guide me, I will happy to implement those things along with my team.

You can reach to me on following handles:

My LinkedIn profile: linkedin.com/in/shubham-rakhonde-102964166

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store