Designing the e-commerce app components
Design is not only a key part of UX and UI work, but is also important for frontend developers. Based on the design, you can create reusable and maintainable components. Our example e-commerce app is a simple application that does not need much attention. You will create the following components in this application:
- Product listing component: A component that displays all the products and acts as a home page. Each product in the list will be displayed as a card with the product name, price, and two buttons—Buy now and Add to bag. The following screenshot displays the Product listing page, which shows the product information along with an image of each product:
Figure 7.3 – Product listing page (home page)
- Product detail component: This component displays the details of a product when clicked. It displays the product image, product name, product description, tags, and the Buy now and...