My Experience of cloning Banggood.com
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 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.
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.
Responsible for building the Women’s page as well as the Coupon page.
Responsible for building the Shoes and Bags page.
Responsible for Building Men’s page, shipping address, payment gateway page, and the cart page
Pages I worked on:
- Men’s page
- Payment page
- OTP verification
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
- As you can see above, I have used a display grid for arranging the data, putting five products per row.
- 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 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.
- 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.
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.
For this, I have created two sections, which are as follows:
- Shipping Address — Made by using a display grid
- 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.
- 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.
- 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.
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.
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