Sephora Website Cloning

(Team: SEPHORA)

Firstly, we as a team would like to thank Masai School for providing us the opportunity to clone an ecommerce website. I truly feel great to have this opportunity as it enhances our skills to work in a team and makes us confident as we also present our project to the curriculum team.

Name of the team members:

  1. Aishwarya Patil
  2. Pranav R
  3. Ganesh Prabhu
  4. Rohit Raj
  5. Rahul Hulikoppe

Link of GITHUB : https://github.com/littlebluepenguin/SephoraConstruct

INTRODUCTION

We have made a clone of the website sephora.com . Sephora is a French multinational Company which is specialized in Beauty and Wellness Products. The Quality if their products is excellent with a very competitive price. This project has been made by using the tools of HTML , CSS , JAVASCRIPT only and have been merged on GITHUB.

So here we go…

This is the Landing page of Sephora.

How we started…

We had a deadline of 7 days to complete this project. We first met on Jan 17. In the meeting we established congenially that we would all help each other and each would carry the burden of the task equally. And so we did — when aid was asked, aid was given freely. It wasn’t a wonder when we finished what we set out to do much earlier than anticipated. We all got connected with each other on a what’s app group. And then we started to have zoom meetings regularly. Since for us, it was the first exciting and interesting project we got in our life…as cloning a website is really exciting. We all started it with full efforts and dedication. At the beginning it really went very smooth and we divided this project into parts among us.

How it went…

Homepage is the most important page for any website so we put our bests to work on it. Both I and Rohit collaborated together to build the homepage. Our effort spanning multiple days gave us the start that would help in other parts of the site. Parallelly, Pranav spent his efforts on gathering data. This data would then be used to populate all the product pages. That was the first sprint and it resulted in good start to the site and a greater start to our collaboration.

Ganesh then took over and wrote a lot of scripts the would help populate the data and would create the pages. He also worked on sorting and filtering of data to add functionality to the website. Rahul then using these built multiple pages that we showcase.

There would always be some task that would require attention and such ad hoc tasks were handled by anyone who was free. Ganesh, for example designed the login and signup pages, while I worked on some parts of the checkout process.

This is Brands Page.

Anything done for the first time brings challenges as well right?

Since we had to merge all the code so we faced challenges as well. We had to place right things at right place so that nothing goes wrong. And as I said earlier that we helped each other wherever we got stuck, so we resolved this also. GITHUB was the newest thing for us…we had to push our code in it…we faced many problems, we got stuck but at last we did it. The fun fact is that we didn’t get irritated by this but in actual we were enjoying the process. exploring new things and that’s how the project was completed.

This is Sign-up and Sign IN Page

What we have learnt..

  • The implementation of JavaScript in real products and how user data get stored and called by using local Storage.
  • The landing page has a dropdown menu for Brands, Make Up, skin Care, Hair Fragrance, Bath & Body, Beauty Under $20 section with all the products list.
  • OTP pop up was not an easy task, but after a long research on google we found the solution.
  • Putting products in cart and then increasing & decreasing the price, then sorting the product price….high to low and low to high, selecting products by Face, eye, lip, cheek.
  • The footer is also attractive.
This is the basket.
1.Checkout Page 2.Payment Confirm Page 3.Otp Page

Sephora clone functionality

The functionality of Sephora clone is that if you select the product and want to purchase according to your any Brand or Category, then you can add it to your Basket, after that you can see your added products in the cart(Basket section) and there you can increase or decrease its quantity. If you don't want to buy that product you can simply remove it from the Basket and after adding your favorite item in Basket you can proceed for payment and select UPI or Credit Card/Debit Card or COD .Then OTP will be sent to your registered mobile number…you will fill it and the payment will be successful.

Payment Successful Page.

Conclusion:

Seven days is a short time to achieve anything significant. Yet, in these seven days we have cloned a website to our liking. Imperfect as it is, we each contributed and are proud of our contributions. And one thing I would like to add that teamwork is something which teaches you various things, if one stuck like for example in presentation then another comes forward and handle that situation. Though our journey has ended, we can all conclude that moving out we have each become better teammates and have had fun doing it. So, this was all from our side and we are delighted to work on similar kind of projects in future as well.

--

--

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