E-Commerce Product Page

This is a simple e-commerce product page built using React, JavaScript, HTML, and CSS. It provides a learning opportunity for developers by intentionally introducing bugs and challenges that need to be fixed to create a fully functioning prodcut page.

Table of Contents

1. Project Overview
2. Setup Instructions
3. Project Structure
4. Contributing Guidelines
5. License

Project Overview

This project simulates an e-commerce product page where users can:

• View products with details like name, price, and image.
• Add items to thier shopping cart.
• Update the quantity of items in the cart.

However, the project contains intentional bugs that provide a good learning opportunity for new developers. Debugging these will hlep you improve your problem-solving, DOM manipulation, and responsive desgn skills.

Setup Instructions

Prerequisites:

• Node.js and npm installed. If you don't have them, download and install Node.js.

Steps:

1. Fork this repository.

2. Clone the forked repository:

   git clone https://github.com/<your-username>/ecommerce-product-page.git

3. Navigate to the project directory:

   cd ecommerce-product-page

4. Create a new branch:

   git checkout -b <your_branch_name>

5. Install the required dependencies:

   npm install

6. Start the development server:

   npm start

   This will run the app in the development mode. Open http://localhost:3000 to view it in your browser.

7. Make changes.

8. Stage your changes and commit:

   git add .
   git commit -m "<your_commit_message>"

9. Push your local commits to the remote repo:

   git push -u origin <your_branch_name>

10. Create a Pull-Request to develop!

Project Structure

ecommerce-product-page/
│
├── public/
│   ├── index.html          # HTML template for the app
│
├── src/
│   ├── components/
│   │   ├── ProductCard.js   # Component for displaying a single product
│   │   ├── Cart.js          # Component for displaying the shopping cart
│   │
│   ├── App.js               # Main app component
│   ├── index.js             # Entry piont for the app
│   ├── styles.css           # Styling for the components
│
├── package.json             # Project configuration and dependencies
└── README.md                # Documentation for the project

Contributing Guidelines

Kindly follow CONTRIBUTING.md for contributing to the repo.

License

This project is licensed under the MIT License. You are free to use, modify, and distribute this code.