Hello Everyone, We have built a unique website of Dreamstore.
β’ Deployed Link - [Dermstore] (https://debasistripathy01.github.io/plausible-porter-6646/)
System display size π» = 1024 to 1680 pixels
SignIn with Email Authentication using greenWeb SignUp Browse Products based on the section Search Products with brands. Apply Filters, Sorting according to price, features and brands Create, Update, Remove Products from Bag Payment Integration (RazorPay) Tech Stack:- React JS Javascript Redux Routers NodeJS Mongo Atlas Material UI & Styled-Components
-
React: React
-
Redux: Redux
-
React-Redux: React-Redux
-
Redux-thunks: Redux-thunks
-
Custom UI: Custom UI
-
Images: Myntra
-
Fonts: Google Fonts
-
Firebase: Email Authentication
-
Icons: Material Icon
-
Material UI: Material UI
-
MockServer:HerokuServer
-
Axios: Axios
-
Styled Components: Styled Components
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 We are 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 π. We also Optimized this Whole project Using Plugins too.
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
DreamStore is a skin care and beauty e-commerce site. 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.
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 this, cart option or admin panel 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.
Signup and Login pages are authenticated properly
Email Authenticationa and vlaidation was done using MongoAtlas.
All the products available accordidng to the paths. Invidual product page opens up while clicking any product.
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.
β’ Debasis Tripathy
β’ Deepak Soni
β’ Devender Yadav
β’ Shagun Sharma
β’ React, β’ React-Redux, β’ React-Router, β’ Material UI, β’ Module CSS, β’ JSON Server β’ ExpressJS, β’ MongoDB, β’ NodeJS
β’ VS Code β’ GitHub β’ Heroku β’ Git
This project was bootstrapped with Create React App.
In the project directory, you can run:
Runs the app in the development mode.
Open http://localhost:3000 to view it in your browser.
The page will reload when you make changes.
You may also see any lint errors in the console.
Launches the test runner in the interactive watch mode.
See the section about running tests for more information.
Builds the app for production to the build
folder.
It correctly bundles React in production mode and optimizes the build for the best performance.
The build is minified and the filenames include the hashes.
Your app is ready to be deployed!
See the section about deployment for more information.