First, we will create a Nest.js application that will connect to MongoDB and gather product information. Then, we will create an Angular app to consume the API and use Angular Material to present the products. We will have some basic functionality, such as the ability to add and remove products, and also have a modal cart to show a list of products that were added to the cart.

The following screenshot shows the screen where we display our products. Each product can be added to the cart. At the top, we have the count that tells us how many products have been added to the cart:

When you click on the cart in the top right-hand corner, a modal popup appears, as follows:

In the Cart menu, you can see the Sub Total and total for each product, as well as the total number of a certain product that has been added to the cart. We also have a drop-down that we can update which reflects whether the product list has been updated.

Once we are done with the application, we will check Lighthouse and measure how far we are away from being a full PWA app. We will add an Angular service worker to the application and make sure that we can add the app to the home screen of our device. Then, we will make sure that the user can find out about the network connectivity of the application. Finally, we will make sure that, if the app is updated, we show a notification to the user about the update, and then let them install the newest version of the application. In the next section, we will see how we can set up and configure Nest.js for our application.