# My Store 🛒

A modern and responsive e-commerce web application built with **React** and **Vite**, designed to provide a smooth shopping experience.

![App Screenshot](./public/screenshot.png)  
_Screenshot of the home page_

## Features

- **Product Listing & Details:** Browse products and view detailed information.
- **Shopping Cart:** Add/remove items, update quantities, and calculate totals.
- **Category Browsing:** Filter products by categories.
- **Responsive Design:** Optimized for desktop, tablet, and mobile.
- **Modern UI Components:** Built with reusable components for easy maintenance.

## Technologies Used

- **React 18** – Frontend library
- **Vite** – Fast development and build tooling
- **Zustand** – State management
- **React Router** – Routing between pages
- **Tailwind CSS / shadcn-ui** – UI styling and components

## Getting Started

### Prerequisites

- Node.js v16 or higher
- npm or yarn

### Installation

1. Clone the repository:
   ```bash
   git clone <repository-url>
   cd my-store
   ```

2. Install dependencies:

   npm install
   # or
   yarn install

Running the App

Start the development server:

npm run dev
# or
yarn dev

The app will be available at http://localhost:5173 by default.

Building for Production

To build the app for production:

npm run build
# or
yarn build

---

Project Structure

my-store/
├── public/ # Static assets (images, icons, etc.)
├── src/
│ ├── components/
│ │ ├── features/ # Feature-specific components
│ │ │ ├── AddingAlert.jsx # Cart addition confirmation alert
│ │ │ ├── BestSales.jsx # Best selling products section
│ │ │ └── ProductsList.jsx # Main product listing
│ │ ├── layout/ # Layout & page sections
│ │ │ ├── Footer.jsx # Site footer
│ │ │ ├── Header.jsx # Navigation header with categories
│ │ │ └── intro.jsx # Welcome introduction section
│ │ └── ui/ # Reusable UI components
│ ├── Pages/
│ │ ├── Home.jsx # Homepage layout
│ │ ├── ProductInfo.jsx # Individual product page
│ │ ├── Cart.jsx # Shopping cart page
│ │ ├── CategoriesPage.jsx # Category-specific product listings
│ │ └── Help.jsx # Help/FAQ page
│ ├── Store/
│ │ └── Store.jsx # Zustand store for cart management
│ ├── App.jsx # Main app component with routing
│ └── main.jsx # Application entry point
├── package.json # Project metadata and scripts
└── vite.config.js # Vite configuration

---

License

This project is licensed under the MIT License.

---

Feel free to contribute, open issues, or suggest improvements! 🚀