Confirm?

Are you sure you want to proceed?
M
Michael Kaufman

Printful Products API Integration

Clone & Customize via AI

Bootstrap Products Page shows a responsive product catalog built with Bootstrap grid and cards inside a Blazor component. Includes image thumbnails and a loading spinner during data fetch.

● LIVE DEMO
Generated using Instruct UI - An AI for Blazor UI Generation
## What's implemented - Responsive product catalog rendered as a card grid (Bootstrap row/cols). - Image thumbnails per product with title and variant count. - Loading state using a Bootstrap spinner and a no-results alert. - Mock data population on component initialization. ## Key components - Blazor page/component: @page - Lifecycle: OnInitializedAsync and @code block - View model: ProductViewModel - Template rendering: @foreach over products - Markup: img, card, card-body, card-footer, anchor (Bootstrap card layout) - UI states: isLoading boolean, empty-state alert ## How it works - OnInitializedAsync simulates an API call (Task.Delay) and fills a List<ProductViewModel>. - isLoading toggles the spinner until data is assigned, then the grid renders via @foreach. - Each card uses product.ImageUrl, product.Name, and product.VariantsCount. - Actions are placeholder links (View Details) that require navigation/event wiring. ## Styling - Uses Bootstrap utility and component classes (container, row, col, card, btn, spinner-border, alert). - Grid uses responsive classes (row-cols-*) for small-to-large breakpoints. - No custom CSS file shown; responsiveness relies on Bootstrap. ## Reuse steps 1. Add a Blazor page (.razor) and include ProductViewModel or adapt an existing model. 2. Ensure Bootstrap CSS is available (project layout, CDN, or static file). 3. Replace mock data in OnInitializedAsync with an API call (HttpClient) or service. 4. Wire navigation or event handlers for detail links and add pagination/filtering as needed. 5. Add image lazy-loading, accessibility attributes, and server-side caching where required. ## Limitations & next steps - This is a single page generated by Instruct UI and uses mock data; a backend API or service registration is required to fetch real products (e.g., Printful API integration). - No routing or authentication logic for product details is implemented; navigation and authorization must be added. - No client-side filtering, sorting, pagination, or lazy loading for images; add components or state management for large catalogs. - Consider adding error handling for API calls, unit tests for the view model, and ARIA improvements for the spinner and cards.