• Netlify Deployed Link - CosmetiCare
Problem statement is to build a pixel-perfect Dermstore website clone. Previously I cloned two websites and some web pages but in this problem, we were supposed to make pages dynamic and responsive too.
I'm pursuing a Full Stack Web Development course at Masai School I was given a project to clone **Dermstore ** which is a skincare and beauty e-commerce site in the United States. Since December 2020, it is a subsidiary of The Hut Group which is a British e-commerce company. I was given a team of five members including me and the task was to clone the pixel-perfect clone of the website. Let's look at how we designed it 👇
On the Home Page, there are many options like a search bar where users can search products by product name or Brand, then there is also an account option where users can log in or signup and beside it, a cart option is also there and by clicking on the cart option users can see the products which they have added to the cart. users can also see new arrivals products and scroll through them just by clicking the buttons which are present on the left and right sides.
DermStore Link:- DermStore
DermStore is a skin care and beauty e-commerce site in the United States. It is one of the best places to find some of the highest quality skincare, makeup, haircare, and so much more for both women and men. DermStore was founded by dermatologist Craig Kraffert in 1999. In 2012, the company expanded from distributing professional skin care, to consumer cosmetics brands. Since December 2020, it is a subsidiary of The Hut Group which is a British e-commerce company.
We have tried to create as many features as we can of this website. Some of the pages and features which we created are : Home Page, log In page, signUp page, sell page, add to cart, checkout page, functionality to add any product to cart page and displaying its details and total amount, functionality to scroll horizontally on the home page through buttons in various sections, functionality to get the product description if you click its image on all pages except for homepage and functionality to sort the products in some of the pages. Here are some sample snippets of our cloned website.
On the Home Page, there are many options like a search bar where users can search products by product name or Brand, then there is also an account option where users can log in or signup and beside it, cart option is also there and by clicking on the cart option users can see the products which they have added to the cart.
users can also see new arrivals products and scroll through them just by clicking the buttons which are present on the left and right side.
This is the footer part of the landing page where users can know about the company, privacy policy and payment partner, and many more. They can also sign up from the button present in the footer.
This page will show those products which are on sale. And here users can also filter the products by prices of their own choice. And they can also add the products to the cart just by clicking on Add to Cart button.
Users can filter products of their own choice also brand option is there to select the best product.
This is the user's cart page, after clicking on the add to cart option users can see their product on the cart page. To get redirected to this page users need to click on the cart option in the navigation bar. Here users can check the product name, quantity, and total price.
This is the Checkout page, which is the last page of the website. The user will get redirected to this page once he clicks on the checkout securely button on the cart page. The user needs to fill his account details and then after clicking on submit my order button.
• HTML, • CSS, • JAVASCRIPT, • JSON-SERVER, • API
• VS Code • GitHub • CYCLIC • Git
If you are interested in knowing more about this project...like how we made it and in what time then check DermStore out!