E-Commerce Store App

An E-Commerce Store application built using React, Vite, Tailwind CSS, and React Router. This project demonstrates the development of a fully functional e-commerce platform, featuring product browsing, cart management, and global state management with React Context API and useReducer. It is designed to be responsive, ensuring a great user experience across devices.

Features

• Product Listing: Browse and view product details.
• Shopping Cart: Add and remove items from the cart, view total price.
• State Management: Centralized global state management using React Context and useReducer.
• Responsive Design: Tailwind CSS ensures that the app works seamlessly on all screen sizes.
• React Router: Multi-page navigation for different sections like Home, Product Details, and Cart.
• Product Filtering: Sort and filter products based on different criteria (optional feature).

Tech Stack

• Frontend:

  • React: JavaScript library for building user interfaces.
  • Vite: Next-generation, fast development server and bundler for React.
  • React Router: Declarative routing for single-page applications.
  • Tailwind CSS: Utility-first CSS framework for designing custom and responsive UI components.

• State Management:

  • Context API: React's built-in method to share state globally without prop-drilling.
  • useReducer: A React hook for managing complex state logic.

• Others:

  • Axios: Promise-based HTTP client for making API requests.

Getting Started

Prerequisites

• Node.js (>=14.x)
• npm or yarn

Installation

1. Clone the repository to your local machine:

   git clone https://github.com/Hareem-Gohar/E-Commerce-Store-App.git

2. Navigate into the project folder:

   cd E-Commerce-Store-App

3. Install the required dependencies:

   npm install

4. Run the app locally:

   npm run dev

   The app will now be accessible at http://localhost:3000 in your browser.

Usage

Once the app is up and running, users can:

• Browse Products: View a list of available products.
• View Product Details: Click on a product to view more information.
• Add to Cart: Add items to the shopping cart and proceed to checkout.
• Manage Cart: View items in the cart, remove them, or update the quantity.
• Responsive Design: The app automatically adjusts to different screen sizes, ensuring usability on mobile and desktop devices.

Acknowledgments

• Tailwind CSS for the fantastic utility-first framework.
• React Router for efficient routing.
• React Context API and useReducer for managing global state in a React app.
• Axios for handling API requests.