INTRODUCTION :

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

Features :-

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

Sources:

1. React: React

2. Redux: Redux

3. React-Redux: React-Redux

4. Redux-thunks: Redux-thunks

5. Custom UI: Custom UI

6. Images: Myntra

7. Fonts: Google Fonts

8. Firebase: Email Authentication

9. Icons: Material Icon

10. Material UI: Material UI

11. MockServer:HerokuServer

12. Axios: Axios

13. Styled Components: Styled Components

Problem Statement

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.

Idea

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.

Dermstore Landing 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, 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.

About Project:

- 

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.

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 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.

Landing Page

SignUp Page/Login:

Signup and Login pages are authenticated properly

Login Page Auth Features:

Email Authenticationa and vlaidation was done using MongoAtlas.

Cart Page :

All the products available accordidng to the paths. Invidual product page opens up while clicking any product.

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.

Team Members

• Debasis Tripathy

• Harshal Anil Apsunde

• Deepak Soni

• Devender Yadav

• Shagun Sharma

Technology Using

• React, • React-Redux, • React-Router, • Material UI, • Module CSS, • JSON Server • ExpressJS, • MongoDB, • NodeJS

Tools USing

• VS Code • GitHub • Heroku • Git

Getting Started with Create React App and How can you open This project on Local System

Clone This Repo Link into your Terminal

git clone https://github.com/debasistripathy01/DreamStore

Run npm install (This is to install all the dependancies to the node_modules)

This project was bootstrapped with Create React App.

Available Scripts

In the project directory, you can run:

npm start

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.

npm test

Launches the test runner in the interactive watch mode.
See the section about running tests for more information.

npm run build

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.

npm run eject