yaqix / shoppingwebapp

E-Commerce Clothing

Welcome to our e-commerce project! This project is a simple online store Module IIwhere users can browse products, select category, check new season product, view product details, add products to their cart, and edit the cart.

Table of Contents

• Features
• Getting Started
• Usage
• Project Structure
• Technologies Used
• Contributing
• License

Features

• Homepage: The homepage provides an overview of featured products and a brief introduction to the store.

• Products Page: Users can explore a variety of products organized by categories. They can filter products by category and view product details.

• Product Detail Page: Detailed information about each product is available on this page, including product images, price, availability, and description.

• Cart Management: Users can add products to their cart, view the contents of the cart, update the quantity of products, and remove items from the cart.

Getting Started

To get started with this project, follow these steps:

1. Clone the repository to your local machine:

   git clone https://github.com/yaqiX/ShoppingWebApp.git

2. Navigate to the project directory:

   cd client

3. Install project dependencies:

   npm install

4. Start the development server:

   npm start

5. Open your web browser and access the project at http://localhost:5173.

Usage

• Browse the homepage to see featured products and store information.
• Visit the Products page to explore products by category.
• Click on a product to view its details on the Product Detail page.
• Add products to your cart and manage the cart's contents.

Project Structure

The project is organized as follows:

• src/: Contains the source code for the React application.
  • components/: Reusable UI components.
  • pages/: React components for different pages (e.g., homepage, products, product details, cart).
  • api/my-project: API services for fetching product data.
  • styles/: CSS and SCSS files for styling.
• public/: Contains static assets (e.g., images).
• package.json: Defines project dependencies and scripts.

Technologies Used

• React: JavaScript library for building user interfaces.
• Axios: HTTP client for making API requests.
• React Router: Library for handling client-side routing.
• CSS/SCSS: Styling the user interface.