●
LIVE DEMO
Generated using
Instruct UI - An AI for Blazor UI Generation
## What's implemented
- Product listing as Bootstrap cards with image, title, description and price.
- Client-side shopping cart panel with list-group items, quantity controls, remove action and total price.
- Login / Register form using EditForm, DataAnnotationsValidator and ValidationMessage components.
- Add-to-cart, update quantity, remove item and a mock Checkout flow with a success alert.
- Simple auth state with conditional UI (login vs. welcome) and form-based validation.
## Key components
- EditForm, DataAnnotationsValidator, ValidationMessage
- InputText, InputCheckbox with @bind-Value
- Razor markup using Bootstrap classes: container, row, col-lg-*, card, list-group, btn, form-control
- Event handlers via @onclick and computed TotalPrice property
## How it works
- Products are an in-memory List<ProductModel> iterated with foreach to render cards.
- Cart state is a List<CartItemModel> modified by AddToCart, UpdateQuantity and RemoveFromCart methods.
- Authentication uses an AuthModel validated by DataAnnotations; OnValidSubmit triggers OnAuthSubmit which contains mock logic.
- UI updates use normal Blazor binding (@bind-Value, property getters) and event callbacks (@onclick).
## Styling
- Bootstrap utility and layout classes control spacing and responsiveness (container, row, col-lg-7/5, card, btn).
- FontAwesome icons are used for visual affordances (cart, user, checkout). Images use object-fit for consistent card previews.
- Layout targets desktop and medium breakpoints via Bootstrap grid; cards use a responsive row-cols configuration.
## Reuse steps
1. Add the Razor component and include the ProductModel, CartItemModel and AuthModel classes in the project.
2. Ensure Bootstrap CSS and FontAwesome are referenced in index.html/_Host.cshtml (no extra NuGet required for this UI).
3. Import namespaces if placing component in a folder and adjust image URLs or model fields as needed.
4. Replace mock auth logic with a real authentication service and persist cart state (localStorage or server-side API).
5. Wire checkout to a payment or order API and add server-side validation for production.
## Limitations & next steps
- Single-page demo with in-memory data; no persistence or server APIs are implemented.
- Authentication is mocked; replace with real auth, authorization and secure session handling.
- No payment integration or order history; add server endpoints and error handling for checkout.
- Accessibility, localization and unit tests are not covered and should be added for production readiness.