Dermstore.com Website Clone — Construct week, Unit 06
DermStore Clone
A hearty welcome to our blog and a big thanks for being a valued reader of this blog.
INTRODUCTION:
Hello Everyone, We have to build a clone of Dermstore. Currently, we are pursuing the Full Stack Web Development course at Masai School. We are in the last week of unit 6 which is known as construct week. This week we build the clone of Dermstore which is given by Masai School. Thanks to Masai School for this opportunity.
Our Team Members: We are Five in our group. Our group consists of the following students:
- Md Talib Ansari :-
- Vaibhav Suryavanshi :-
- Ayush Kumar :-
- Yashasvi Vij :-
- Krishna Chaturvedi :-
We are assigned to clone a website.
About Project:
DermStore is a skincare 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.
OUR WORK:
We have tried to create as many features as we can for this website. Some of the pages and features which we created are :
Landing page, log in, 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.
Home Page :
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 sides.
Register Page/Login:
This is the signup page, which the user will get if he clicks on the continue button on the account page new users can create an account here.
Login Page:
This is the login page by clicking on the account option on the landing page users will be redirected to the login page if the users are existing customers they can log in with the same email and password. If users are new customers then by clicking on continue they will be redirected to the signup page.
Footer part:-
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.
Category Page:-
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 the brand option is there to select the best product.
Cart Page :
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.
Payment Page :
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.
Create JSON Server
{
"usersInfo": [
{
"fullName": "Md Talib Ansari",
"email": "mdtalibansari55048@gmail.com",
"confirmEmail": "mdtalibansari55048@gmail.com",
"password": "12345",
"confirmPassword": "12345",
"mobile": "08340595343",
"referralCode": "",
"reward": true,
"id": 1
},
{
"fullName": "TALIB ALI",
"email": "taalibullah786@gmail.com",
"confirmEmail": "taalibullah786@gmail.com",
"password": "1234567890",
"confirmPassword": "1234567890",
"mobile": "8084703458",
"referralCode": "12345q",
"reward": true,
"id": 2
},
{
"fullName": "Ayush Kumar",
"email": "ayushkumar@gmail.com",
"confirmEmail": "ayushkumar@gmail.com",
"password": "1234567",
"confirmPassword": "1234567",
"mobile": "08340595343",
"referralCode": "",
"reward": true,
"id": 3
},
{
"fullName": "Ayush Kumar",
"email": "ayushkumar.barbighaiya@gmail.com",
"confirmEmail": "ayushkumar.barbighaiya@gmail.com",
"password": "123456",
"confirmPassword": "123456",
"mobile": "7004012768",
"referralCode": "",
"reward": true,
"id": 4
},
{
"fullName": "Md Talib Ansari",
"email": "mdtalibansari55048@gmail.com",
"confirmEmail": "mdtalibansari55048@gmail.com",
"password": "12345678",
"confirmPassword": "12345678",
"mobile": "08340595343",
"referralCode": "",
"reward": true,
"id": 5
}
],
"products": [
{
"id": "43742-0409",
"brand_logo_url": "https://static.thcdn.com/design-assets/images/logos/shared-brands/colour/eltamd.gif",
"name": "EltaMD UV Elements Tinted Broad-Spectrum SPF 44 (2 oz.)",
"description": "A tinted mineral sunscreen that provides broad spectrum sun protection.",
"img_url_1": "https://static.thcdn.com/images/large/webp//productimg/1600/1600/11370314-1304944342872775.jpg",
"img_url_2": "https://static.thcdn.com/images/large/webp//productimg/1600/1600/11370314-8714944342890403.jpg",
"img_url_3": "https://static.thcdn.com/images/large/webp//productimg/1600/1600/11370314-1704944342981480.jpg",
"item_category": "Moisturizers",
"complexion_format": "Cream",
"complexion_coverage": "Buildable",
"makeup_category": "Complexion",
"rating": 4.8,
"review_count": 118,
"mrp": 84,
"offer_price": 45,
"quantity": 1,
"item_in_cart": "false",
"item_like": "false",
"item_stock": "true"
},
{
"id": "10956-020",
"brand_logo_url": "https://static.thcdn.com/design-assets/images/logos/shared-brands/colour/colorescience.gif",
"name": "Colorescience Sunforgettable® Total Protection™ Face Shield SPF 50 (PA+++) (1.8 fl. oz.)",
"description": "A face sunscreen that offers non-chemical broad-spectrum sunscreen protection to shield your skin from harmful rays.",
"img_url_1": "https://static.thcdn.com/images/large/webp//productimg/1600/1600/11814869-9924866362390772.jpg",
"img_url_2": "https://static.thcdn.com/images/large/webp//productimg/1600/1600/11814869-3714864714301856.jpg",
"img_url_3": "https://static.thcdn.com/images/large/webp//productimg/1600/1600/11814869-9924866362390772.jpg",
"item_category": "Face Sun Care",
"complexion_format": "Cream",
"complexion_coverage": "Full",
"makeup_category": "Complexion",
"rating": 1.3,
"review_count": 778,
"mrp": 61,
"offer_price": 16,
"quantity": 1,
"item_in_cart": "false",
"item_like": "false",
"item_stock": "true"
},
{
"id": "51621-031",
"brand_logo_url": "https://static.thcdn.com/design-assets/images/logos/shared-brands/colour/dhc.gif",
"name": "DHC Deep Cleansing Oil (Various Sizes)",
"description": "A hydrating skin-nourishing cleanser.",
"img_url_1": "https://static.thcdn.com/images/large/webp//productimg/1600/1600/11207443-2214866130380732.jpg",
"img_url_2": "https://static.thcdn.com/images/large/webp//productimg/1600/1600/11207443-5504859308084353.jpg",
"img_url_3": "https://static.thcdn.com/images/large/webp//productimg/1600/1600/11207443-1384859308157328.jpg",
"item_category": "Face Makeup",
"complexion_format": "Liquid",
"complexion_coverage": "Medium",
"makeup_category": "Makeup",
"rating": 3.1,
"review_count": 899,
"mrp": 87,
"offer_price": 57,
"quantity": 1,
"item_in_cart": "false",
"item_like": "false",
"item_stock": "true"
},
{
"id": "0363-0634",
"brand_logo_url": "https://static.thcdn.com/design-assets/images/logos/shared-brands/colour/colorescience.gif",
"name": "Colorescience Total Eye™ 3-in-1 Renewal Therapy SPF 35 (0.23 fl. oz.)",
"description": "An anti-aging eye treatment that improves signs of dark circles and wrinkles.",
"img_url_1": "https://static.thcdn.com/images/large/webp//productimg/1600/1600/12666791-4044866391045062.jpg",
"img_url_2": "https://static.thcdn.com/images/large/webp//productimg/1600/1600/12666791-1404876928252391.jpg",
"img_url_3": "https://static.thcdn.com/images/large/webp//productimg/1600/1600/12666791-4044866391045062.jpg",
"item_category": "Eye Care",
"complexion_format": "Liquid",
"complexion_coverage": "Sheer",
"makeup_category": "Eyes",
"rating": 2.1,
"review_count": 795,
"mrp": 89,
"offer_price": 15,
"quantity": 1,
"item_in_cart": "false",
"item_like": "false",
"item_stock": "true"
},
{
"id": "51514-0331",
"brand_logo_url": "https://static.thcdn.com/design-assets/images/logos/shared-brands/colour/janeiredale.gif",
"name": "jane iredale Pure Pressed Blush 3.7g (Various Shades)",
"description": "A silky easy-glide pressed blush that builds like a powder and blends like a cream for seamless long-lasting color and a fresh healthy glow.",
"img_url_1": "https://static.thcdn.com/images/large/webp//productimg/1600/1600/13674838-2504939183735374.jpg",
"img_url_2": "https://static.thcdn.com/images/large/original//productimg/1600/1600/13674842-1784939184695137.jpg",
"img_url_3": "https://static.thcdn.com/images/large/original//productimg/1600/1600/13674842-1194939184732355.jpg",
"item_category": "Blush",
"complexion_format": "Powder",
"complexion_coverage": "Buildable",
"makeup_category": "Palettes",
"rating": 2.5,
"review_count": 527,
"mrp": 94,
"offer_price": 57,
"quantity": 1,
"item_in_cart": "false",
"item_like": "false",
"item_stock": "true"
},
{
"id": "68400-122",
"brand_logo_url": "https://static.thcdn.com/design-assets/images/logos/shared-brands/colour/janeiredale.gif",
"name": "jane iredale Smooth Affair Brightening Face Primer (1.7 fl. oz.)",
"description": "jane iredales Smooth Affair® Brightening Face Primer refines and prepares the skin for a long-lasting foundation application.",
"img_url_1": "https://static.thcdn.com/images/large/webp//productimg/1600/1600/10877675-1204892801854575.jpg",
"img_url_2": "https://static.thcdn.com/images/large/webp//productimg/1600/1600/10877675-1874892801931234.jpg",
"img_url_3": "https://static.thcdn.com/images/large/webp//productimg/1600/1600/10877675-2144892801982945.jpg",
"item_category": "Face Makeup",
"complexion_format": "Cream",
"complexion_coverage": "Full",
"makeup_category": "Makeup",
"rating": 4.5,
"review_count": 733,
"mrp": 74,
"offer_price": 17,
"quantity": 1,
"item_in_cart": "false",
"item_like": "false",
"item_stock": "true"
},
{
"id": "11523-6549",
"brand_logo_url": "https://static.thcdn.com/design-assets/images/logos/shared-brands/colour/colorescience.gif",
"name": "Colorescience Sunforgettable® Total Protection™ Color Balm SPF 50 Collection - Blush/Berry/Bronze (3 piece - $87 Value)",
"description": "A collection of three color balms with SPF 50.",
"img_url_1": "https://static.thcdn.com/images/large/webp//productimg/1600/1600/12459291-1584866382993395.jpg",
"img_url_2": "https://static.thcdn.com/images/large/webp//productimg/1600/1600/12459291-2064956487273929.jpg",
"img_url_3": "https://static.thcdn.com/images/large/webp//productimg/1600/1600/12459291-6614956509033181.jpg",
"item category": "Blush",
"complexion format": "Stick",
"complexion coverage": "Medium",
"makeup category": "Makeup",
"rating": 3.4,
"review count": 35,
"mrp": 83,
"offer price": 25,
"quantity": 1,
"item_in_cart": "false",
"item_like": "false",
"item_stock": "true"
},
{
"id": "55910-548",
"brand_logo_url": "https://static.thcdn.com/design-assets/images/logos/shared-brands/colour/ilia.gif",
"name": "ILIA Multi-Stick (0.15 oz.)",
"description": "A creamy lip and cheek color stick.",
"img_url_1": "https://static.thcdn.com/images/large/webp//productimg/1600/1600/12905829-1844869965787699.jpg",
"img_url_2": "https://static.thcdn.com/images/small/webp//productimg/130/130/12905829-1534869965846106.jpg",
"img_url_3": "https://static.thcdn.com/images/large/webp//productimg/1600/1600/12905829-1794869965914122.jpg",
"item category": "Lip Makeup",
"complexion format": "Stick",
"complexion coverage": "Sheer",
"makeup category": "Lips",
"rating": 3.3,
"review count": 143,
"mrp": 96,
"offer price": 43,
"quantity": 1,
"item_in_cart": "false",
"item like": "false",
"item stock": "true"
}
]}
Technology Used
• React, • React-Redux, • React-Router, • ExpressJS, • MongoDB •NodeJS • Module CSS, • Material UI. • db.JSON • API • Bootstrap • JSON Server
Tools
• VS Code • GitHub • Git
Team Work Efforts
It is always taught to us that communication plays a great where it comes to group work. Our communication was so good that it enhanced our interest and motivated us to keep working in order to achieve the end result.
First, we make a Slack and WhatsApp group for better communication between all of the team members, Then we connect a zoom meeting discussion about a given project.
In zoom meet we divide small parts of the project, to the team, next are collect raw data for a project on which content is better to merge and easy to complete work.
Daily we connect meet and discuss the past day's work and the present day's work, anyone has an issue all the team helps to solve the bug.
Finally, all push the data to the Git hub, and a lot more changes will occur.
The complete given project works after we talk about the presentation part of our project, and all are efforts go to the final result then we submit Successfully our project with our team's efforts.
We all showed our responsibility. It was a wonderful experience for all of us.
What We Learn
- We all became proficient in reading the code of team members.
- How to work and communicate with a team.
- How to figure out new things.
- How to be more efficient and productive at the same time.
- Here I get to know how the team works, and how to keep myself and my teammates motivated throughout the ups and downs.
- At last, I would like to thank my team members for their support & guidance during the project.
Major Issue We Encountered:
- We faced difficulties to manage the routes, pages, and dependencies to work at a time.
- It was difficult for us to develop the carousel for our main page as it was not taught to us yet.
- We encounter issues while pushing all our code to the master branch in git.
Source Code :- https://github.com/ayush-kr05/DermStore_Clone
I hope this article will help you to understand the DermStore website project.
Hope you liked our project and the way we work together. Please share your valuable thoughts and suggestions in the comment section so that we can implement them in our upcoming project.
“leave a comment below,” “we would love to know what you think,”
Thank you for reading