Welcome to Hardware Handler — A product management application#

What is Hardware Handler, what can it do & what is outside the scope of this application (and course)#

Before diving into how Hardware Handler is built, let's take a quick tour through the application itself.

This application is a sample React application built to help product managers within retail companies manage their product assortments, which are sent to retail stores to sell to customers.

The home page#

When Hardware Handler is running, the first page a user will see is the home page, which links to all the other pages of the app and displays any items already present in the checkout.

These pages are where a product manager will actually go about the business of reviewing products, adding new products to the ones they manage, and reviewing the list of products they intend to ship to stores.

The My Products page#

Clicking the link for "My Products" on the homepage of the app or in the navigation bar, will bring the user to their products page.

Here, users can view products they already manage, filter products displayed by department or by brand, and add those items to the checkout.

Unlike a typical e-commerce site, though, where a customer could purchase multiples of a single product, these products can only be added to the checkout once.

The reasoning behind that decision is this:

Typically more than one connected system, which is outside the scope of this course, would be responsible for coordinating all the details to get products shipped to stores. Another application, further downstream in the deliver-to-store process, would give the product manager the ability to decide how much product to send to stores and exactly when to send them.

The Add Products page#

The "Add New Products" page is a form where product managers can add new products to the list of products they manage.

They can select from a pre-determined list of departments and add a product name, brand, description, and retail price.

Once all the required fields are filled in, the "Submit" button at the bottom of the form is enabled and the product can be added. After being added, the product will then show up on the "My Products" page and be selectable for checkout in the future.

The Checkout page#

"Checkout" is what it sounds like. It's a summary of all the products the product manager has added to their checkout. It displays all the relevant product information, the suggested retail price of an individual product, and the ability to remove that product from the checkout.

In a real world scenario, a product manager would send this summary of products to another system further downstream in the ordering / product-replenishment process.

Within that system, a product manager might determine exactly how many units of each product to deliver to retail stores, as well as assign exact dates to ship to the stores.

But as I mentioned above, all that is outside the scope of this course, so the checkout page and summary is where this application's functionality concludes.

Toasts#

In addition to the main pages and their functionality, there are also disappearing messages known as "toasts" present throughout the application. These messages alert the product manager when actions they try to perform, like adding new products to the system or removing items from the checkout, are successful or not.