• Netlify Deployed Link - Dermstore
System display size 💻 = 1024 to 1680 pixels
Our 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.
Since 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 signup page, which the user will get if he clicks on the continue button on the account page and new users can create an account here.
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 login by the same email and password. If users are new customers then by clicking on continue they will be redirected to the signup page.
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.
• Md Talib
• React, • React-Redux, • React-Router, • Material UI, • React-Router, • Module CSS, • API • JSON Server
• VS Code • GitHub • Heroku • Git
If you are interested in knowing more about this project...like how we made it and in what time then check DermStore out!
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 with communication between all of team members , Then we connect a zoom meet discussion about given project.
In zoom meet we divide small parts of project ,to all the team , next all are collecting raw data for project which content is better to merge and easy to complete work.
Daily we connect a meet and discuss about past days work and that present days work, any one have issue all the team helps to solve the bug.
Finally all push the data to Git hub , lot more changes will be occur.
Complete given project works after we talk about presentation part of our project ,and we all are efforts goes to final result then we submit Successfully our project with our team efforts.
We all showed our responsibility. It was a wonderful experience for all of us.
- 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, 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.
- We faced difficulties to manage the routes, page, 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.