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'll cover the following

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:

Get hands-on with 1400+ tech skills courses.