ATTIRE-GURU

---

E-COMMERCE WEBSITE FOR FASHION PRODUCTS*

Project: Make a website with provided reference website images.

Original-Website-Images : https://dribbble.com/shots/20389012-Sopa-Marketplace-Landing-Page

Cloned-Website: https://attire-guru.vercel.app/

HOW TO GO THROUGH THE PROJECT -

• First, go to Login or signup ( for the first time ).
• After login go to Shop Page.
• On Login page, use the following credentials to log in as Admin
  • Username - saurabh
  • Password - saurabh123

Landing Page

Product Page

Admin Page

This E-Commerce website specializes in selling fashion products for men, women, and kids. The website provides 16,000 products of different products like shoes, jeans, shirts, kurtas, etc.

In this project, We have tried to manipulate dom elements using REACT with TYPESCRIPT, manage state changes using REDUX, CHAKRA UI Library, style using CSS in react, REACT TOASTIFY, styled-components and tried to make a responsive website and implement dynamic routing to persist data. With the self-learning efforts and the technology stack, that we have learned till Unit-5 in the Masai School, we were able to clone the whole website with the same looks & features.

This is a collaborative project built within 5 days by a team of 3 members

--> Saurabh Bhatt ( Team Lead ) --> Admin Side

--> Vishal Giri --> Product Page, Single Product Page, Add to Cart

--> Murad Kodalwad --> Home Page, Login/SignUp, Payment Page

Technology Stack Used 🌟

• REACT
• TYPESCRIPT
• REACT-REDUX
• CHAKRA UI Library
• Styled-components
• REACT-Toastify
• react-router-dom library
• axios library
• Thunk Middleware
• HTML
• CSS
• JavaScript

For storing user data we also used JSON-Server & REDUX Store.

How to run the Project

• Open the pages directory.
• Clone this repo and run using the live server command 'npm run start'.

End Notes 📑

In this project, we have tried to achieve a near-to-perfect clone of the original website images provided as much as possible. This entire journey of this construct week has given us experiences and we have learned lots of things by applying to the actual website and it gave us a lot of confidence. Most of the features are added and the functionality of the website is achieved.