Cloning Shoppers Stop E-Commerce Website In A Week
Hello readers,
I hope you're doing well. This blog is about the project we have done in Construct Week of Unit-2 in Masai School.
Before actually getting into the project explanation, I would like to mention that It was a team project. And we are a team of four members.
- Nagendra Patil(me).
- Srikanta Banerjee
- Yashraj Maheshwari
- HUXLY Singh
All of us are students of Masai School. Masai School offers various courses for those who want to pursue their career in the IT industry. The curriculum in Masai is so well designed that, even if you're a person from a different educational background you can still learn things and enhance your skills. Such that at the end of the course you'll be job-ready!. In Masai school, each student has to build a project with his team members at the end of each unit from unit 2 to unit 4.
All four of us are from a full-stack web dev course. since we are at the end of our unit-2 we were given a site to clone, with as many functionalities as possible and make it look as similar as possible.
As we got to know our project the first thing we did was explore the site and express each other's opinions since Shoppers Stop is a website loaded with a lot of features. On the first day, we were able to figure out the tech stack, functionalities, and the flow of the website. After which we distributed tasks among ourselves.
For building this project we used,
- HTML
- CSS
- JavaScript
Initially, we started working on different pages and we aimed at completing the whole project within 4 days. The plan did work too, We were able to create the layout of each page to look alike the original one. As we were left with some more time, we decided to modify few functionalities so that they would make a positive impression on our work.
Here are a few snippets of our work and what are the functions in it.
- HOME PAGE
The landing page welcomes users with a trending products carousel. The carousel timer is set for 2 seconds for auto-sliding.
As we slide down there are more sections for users to choose from, users can log in or sign-up by hovering on the profile icon.
2. SIGN-IN and SIGN-UP
This is how our sign-in and sign-Up pages look like. Once the users enter their information in signup and submit they'll receive an OTP for authentication. The user profile will be formed only after the OTP verification. For this purpose, we generate a random number in the console and match it with the one in the localstorage. If OTP doesn't match with one in backend, it will notify to enter correct OTP
User data will be stored in LocalStorage and can be fetched as and when needed. Once the user profile is done, the user can log in directly. Here, the ID and password are matched will local storage data for each user, If the person enters the wrong password or ID or If they don't match with each other stored in the user’s object it will not allow the user to login.
3. CATEGORY PAGE
Users can sort and search products based on their interests.
For example, if the user wants to filter products based on Brands, He can choose the brand and hit refine search. Then the code brings and displays only those products from local storage whose name matches with the “Brand” key’s value from the products array of objects.
similarly, for offers, size, colors, price as well. For this purpose, addeventlistener method is used every time, when users click refine search.
Also if the user hovers on top of the product image, it will display a different image of the same product. All the data dynamically changes here.
4. PRODUCT PAGE
Users can hover over images to zoom in, check availability, delivery option, and more. Product image zoom in and zoom out is done completely using CSS.
If the size is available, “selected size available” is displayed this is done by appending the element on selection of size.
Also to check the delivery option to a particular location, Pincode is compared with pin codes stored in local storage. If it doesn’t match It will display “delivery option is not available”.
on clicking “add to bag” and “add to wishlist” the number of products in cart and wishlist array is updated and displayed on top of the icons in navigation bar.
5. WISHLIST AND CART
If a user is interested in a product He/She can add it to a wishlist or Cart.
If the user adds the product to the wishlist, it will be stored in an array of local storage and is displayed once the user opens the wishlist.
Similarly, cart data is also stored in an array of objects in the local storage and the total price of all the products in the cart will be displayed on the top of the cart.
Users can also remove products from the wishlist and cart, in that case, they will be removed from local storage as well. The number of items in the cart and wishlist is displayed on the top of cart and wishlist icons.
6. ADDRESS and CHECKOUT
Users need to provide proper address and Proceed to the payment page.
without entering the valid address user can’t proceed further. “Enter address” pop-up will be displayed if the user tries to skip this part.
On the checkout page, users can enter a PROMO code to avail extra discount. If the code matches with the one in the backend, the total amount will change accordingly.
7. PAYMENT and CONFIRMATION
During order processing, the page is timed for 5 seconds to redirect to a confirmation page.
Once payment is done, the user will receive a notification saying “Payment is Successful”. And now the cart will be emptied for the user automatically.
So, that’s how the flow goes. We have also provided users with an option to log in with OTP and reset their password if they have forgotten it.
All the above-mentioned functionalities and displayed pictures are built within the stipulated time of 1 week.
Last but not the least, I’d like to mention few things about my teammates as well,
‣ Srikanta Banerjee is a person with admiring leadership qualities who guided the flow of work and we both worked together in Js and connecting the dots in the end.
‣ Yashraj Maheswari and Huxly Gerard Singh have become 2 good friends to work with and are pretty good at HTML and CSS.
As there is an old saying, “Even the good things have a scope for betterment” we too believe that there is scope for improvement in our project as well. We are planning to do better and optimize the performance of this site in the upcoming days. We will keep you updated.
Thank you so much for pouring your valuable time into this blog. We hope you like it
This is my first group project in Masai School and I’ve absorbed a lot of learning in minimal time. I’m happy to share this blog with you all and I hope you all like our work.
