In this screen, the top part will display the items added to the shopping list. Each item will be represented as a card with the name and an image. Tapping the card will remove the item from the list. At the bottom, there will be a TableView with a Search Bar that will allow users to browse a list of products they can add to their shopping list.
In this second screen/tab, there will be a TableView displaying the list of products. Each product will be represented with its name and an image. Additionally, a TextField and an 'Add' button will be included. When a new item is added, it will be updated in real-time on the table in the second screen and also on the table in screen/tab 1.
As an extra challenge, modify the application to automatically generate the product image using the first letter of its name. For example, if 'Lettuce' is added, the image should be the letter 'L'."