Shopster

Overview

Shopster is a shopping cart interface developed as a part of my front-end internship at Foothill Technology Solutions. The application allows users to browse a variety of products, add them to a shopping cart, view cart details, remove items, and proceed to checkout. This project showcases my ability to manage state using React Contexts, Reducers, and Providers.

Features

• Product Grid: Displays products in a grid format with name, image, and price.
• Add to Cart: Allows users to add products to the shopping cart.
• Cart Details: Lists all items added to the cart.
• Item Removal: Provides an option to delete individual items from the cart.
• Total Amount: Displays the cumulative price of the items in the cart.
• Checkout: Includes a form for users to input their name and email for order submission.
• Search Feature: Enables users to search for products by name.

Demo

Live Demo

How to Clone and Run Locally

1. Clone the Repository

   git clone https://github.com/Jamal-SaadEddin/Shopster.git

2. Navigate to the Project Directory

   cd Shopster

3. Install Dependencies

   npm install

4. Start the Application

   npm start

   The application will run on http://localhost:3000

Technologies Used

• React: JavaScript library for building user interfaces
• Material-UI (MUI): React components for faster and easier web development
• React Router: Library for routing in React applications

Developer

• @Jamal-SaadEddin

Acknowledgements

• This task is part of the Foothill Technology Solutions Internship Cycle.
• Big thanks to my trainer @Huthaifa

---

Thank you for visiting my project! Feel free to star or contribute to the repository if you find it useful.