Product Catalog

Relevant source files

The following files were used as context for generating this wiki page:

• marketplace-frontend/src/app/models/product/product.model.ts
• marketplace-frontend/src/app/models/product/price.model.ts
• marketplace-frontend/src/app/modules/market-home/market-home.module.ts
• marketplace-frontend/src/app/components/product-card/product-card.component.html
• marketplace-frontend/src/app/components/product-card/product-card.module.ts
• marketplace-frontend/src/app/models/base.model.ts

The Product Catalog system manages and displays item data within the marketplace. It defines the structure of product entities, including pricing and metadata, and provides specialized UI components for rendering these items to the end-user.

This module relies on the core MarketHomeModule for layout and the ProductCardModule for individual item representation.

Data Architecture

The catalog uses a structured hierarchy of TypeScript interfaces to ensure type safety across the frontend. Every product inherits from a base model and includes detailed attributes for branding, imagery, and pricing.

Product Data Model

The Product interface extends Base and serves as the primary data structure for catalog items.

Field	Type	Description
brand	string	The manufacturer or brand name of the product.
imageSrc	string	The URL or path to the product image.
rating	number	The numerical user rating of the product.
price	Price	A nested object containing currency and value details.
description	string	A text description of the product.
imageAlt	string (Optional)	Alternative text for the product image.
isSelected	boolean (Optional)	Flag indicating if the product is currently selected in the UI.

Sources: marketplace-frontend/src/app/models/product/product.model.ts:4-12, marketplace-frontend/src/app/models/base.model.ts

Class Relationship Diagram

The following diagram illustrates the relationship between the base entity, the product, and its pricing model.

This diagram shows that Product inherits metadata from Base and composes a Price object to handle financial data.
Sources: marketplace-frontend/src/app/models/product/product.model.ts:1-12, marketplace-frontend/src/app/models/product/price.model.ts

UI Components

The catalog displays products through a modular component architecture. The MarketHomeComponent acts as a container that utilizes the ProductCardComponent for each catalog entry.

Product Card

The ProductCardComponent renders individual product details. It provides visual elements for the image, brand name, and description.

• Image Rendering: Displays the product image using imageSrc and imageAlt bindings.
• Text Details: Combines product.name and product.brand for the title and displays the description field.
• Interactions: Includes buttons for adding the item to a cart and marking it as a favorite.

Sources: marketplace-frontend/src/app/components/product-card/product-card.component.html:1-32

Component Integration Flow

The following flowchart describes how the catalog modules are structured to render the final view.

This diagram demonstrates that MarketHomeModule imports ProductCardModule to allow the MarketHomeComponent to render list items.
Sources: marketplace-frontend/src/app/modules/market-home/market-home.module.ts:7-13, marketplace-frontend/src/app/components/product-card/product-card.module.ts:7-15

Implementation Details

Module Configuration

The ProductCardModule exports the ProductCardComponent so it can be used in other modules like the MarketHomeModule. It also imports MatIconModule to support the shopping cart and favorite icons.

@NgModule({
    imports: [
        CommonModule,
        MatIconModule,
    ],
    declarations: [
        ProductCardComponent,
    ],
    exports: [
        ProductCardComponent,
    ],
})
export class ProductCardModule {
}

Sources: marketplace-frontend/src/app/components/product-card/product-card.module.ts:7-20

View Logic

The component template uses Angular property binding to map the Product model to the DOM.

<div class="product-image-container">
    <img [src]="product.imageSrc" [alt]="product.imageAlt">
</div>
<b>{{product.name + ' ' + product.brand}}</b>
<p>{{product.description}}</p>

Sources: marketplace-frontend/src/app/components/product-card/product-card.component.html:2-15

Summary

The Product Catalog provides a type-safe foundation for item management using TypeScript interfaces. It leverages Angular's modularity by separating the data models from the UI components, allowing the ProductCardComponent to be reused across different views like the main market home page.