Building a Product List with Detailed Descriptions
Learn how to build a React application that displays a list of products with detailed descriptions and specifications.
We will build a React application that:
- Shows us a list of products.
- Shows a full-screen dialog on any one of the products that will slide in from the right, with a detailed description of the product and some product specifications.
- Will include a form that will allow us to specify how many products we would like to order in the detail view dialogue.
Application overview
The starting screen for our application will be the product list, which shows a short-form version of each product, which includes the name of the product, the switch type, and an image, as shown in the following screenshot:
Here, we can see a summary view of all the products that are available for sale. Each product is rendered in its own area, with the product name and switch type shown, along with a thumbnail image of the product itself. Clicking on any one of these products will slide a panel in from the right and show details about the product, as shown in the following screenshot:
Here, we can see the details screen for one of the products. On the top left, we have a “close” button that will return us to the main product screen. The product details panel shows a larger image of the product, as well as a product description and some product specifications. On the bottom right of the product screen is a form that allows us to specify how many units of the product we wish to purchase, along with an “ADD TO CART” button.
Mechanical keyboard switches
For those readers who are not aware of what these products are, they are different types of mechanical keyboard switches. Computer keyboards are either standard, off-the-shelf membrane keyboards or handmade using mechanical switches.
Membrane keyboards are cheap and easy to manufacture and use a rubber membrane that has a small inverted “dome” under each switch. When a key is pressed, this dome collapses, which then presses two thin layers of plastic together to register a current on the switch.
Mechanical keyboards, however, use a mechanical switch mechanism to ...
Get hands-on with 1400+ tech skills courses.