Challenge: Inventory Management System with Theming

Problem statement

You are tasked with creating an inventory management system that allows users to efficiently manage products and dynamically switch between light and dark themes. The system should include the following features:

• Add products:

  • Users can add products with details such as name, quantity, and price.

  • The products are displayed in a dynamic list.

• Search products:

  • Users can search for specific products by name using a search bar.

• Calculate total inventory value:

  • The application should calculate the total value of all products (quantity * price) dynamically, optimized using React’s useMemo.

• Theme toggle:

  • Users can toggle between light and dark themes using a button. The current theme should apply across the application dynamically using useContext.

Expected output

A functional inventory system with:

• A theming toggle (light/dark).

• A form to add products.

• A search bar to filter products dynamically.

• A list of products showing their name, quantity, price, and total value.

• A total inventory value displayed at the bottom.