/WalmartClone

The WalmartClone project is a front-end web application created using React, aiming to replicate the user interface and experience of the Walmart online shopping platform. This project serves as a demonstration of React's capabilities for building dynamic and responsive user interfaces.

Primary LanguageJavaScript

WalmartClone

The WalmartClone project is a front-end web application created using React, aiming to replicate the user interface and experience of the Walmart online shopping platform. This project serves as a demonstration of React's capabilities for building dynamic and responsive user interfaces.

Table of Contents

Introduction

The WalmartClone project is a React-based front-end web application that emulates the core functionalities of an online shopping platform, specifically inspired by Walmart. The project focuses on providing users with a seamless shopping experience, allowing them to explore a variety of products, add items to their cart, proceed to checkout, and choose delivery options. Additionally, false account creation is implemented; without an account created, users are not able to checkout the product because user authentication is set to false. If you want to checkout a product, please create an account.

Features

1. Product Browsing:

  • Explore a wide range of products with detailed information and images.

2. Search Product by Product Category:

  • Search for specific items based on categories like jewelry.

3. Add to Cart:

  • Add the desired item(s) to your shopping cart.

4. View Shopping Cart:

  • View all the items added to the shopping cart with total payment and taxes before making any purchase.

5. Checkout:

  • Proceed to checkout where you can enter your shipping details, select delivery type, and review your order summary.
  • Proceed to make a purchase after reviewing the contents of the shopping cart.

6. False Account Creation:

  • A user can create a false account with an email, name, and phone number. All details of the user are stored in the local storage as a database.

7. User Login:

  • Users can log in to the application using their registered credentials. If the user is not registered, they can create an account.
  • During login, the application matches the user details from local storage with the stored user details.

Dependencies

  • React
  • React Router DOM
  • Axios
  • Chakra UI
  • Framer Motion
  • React Icons
  • React Custom Scrollbars

Installation

instructions on how to install project dependencies.

npm install 
npm install react-router-dom --save
npm install axios
npm install @chakra-ui/react @emotion/react @emotion/styled framer-motion
npm install react-icons
npm install react-customscrollbars
npm run dev .
  • Home with sticky navbar

    External Image

  • Footer External Image

  • Cart Page "Cart"

  • Account create page Account Create

  • User detail input User Detail Input

  • Mobile number input page Mobile Number Verification

  • Otp verify page otp otp

  • Checkout page CheckOut CheckOut

  • Login page opening

CheckOut CheckOut

###8.Reponsiveness :60%

  • responsive

  • responsive