●
LIVE DEMO
Generated using
Instruct UI - An AI for Blazor UI Generation
## What's implemented
- Landing page layout with a hero, feature panels, and a summary card.
- Recommendations table (Bootstrap table) showing symbol, confidence (progress bars), quality badges, and action buttons.
- Subscription form built with EditForm, DataAnnotations validation, ValidationSummary, and ValidationMessage components.
- Client-side mock data for recommendations and a today summary populated in OnInitialized.
## Key components
- EditForm, DataAnnotationsValidator, ValidationSummary
- InputText, InputSelect, InputCheckbox, ValidationMessage
- HTML table (table, thead, tbody), Bootstrap progress bars and badge classes
- @bind-Value for two-way binding, OnValidSubmit handler (HandleSubscription)
- Component code-behind pattern using @code with OnInitialized, StateHasChanged, and helper GetQualityBadgeClass
## How it works
- Mock data is created in OnInitialized to populate recommendations and todaySummary; the UI reads these properties directly.
- EditForm uses DataAnnotations on SubscriptionModel for client-side validation; InputText/InputSelect/InputCheckbox bind to subscription properties via @bind-Value.
- Form submission triggers HandleSubscription via OnValidSubmit, which sets subscriptionSuccess and calls StateHasChanged to show the success alert.
- Table rows iterate recommendations with foreach; the confidence bar width is calculated from rec.Confidence and quality maps to CSS badges via GetQualityBadgeClass.
## Styling
- Uses Bootstrap utility and component classes (container, row, col-*, btn, form-control, form-select, table, progress, badge).
- Font Awesome icon classes are referenced for illustrative icons (requires including Font Awesome in host page).
- Layout is responsive via Bootstrap grid (col-12, col-md-4, col-lg-7/5) and responsive utility classes.
## Reuse steps
1. Copy TradingBotLanding.razor and TradingBotModels.cs into a Blazor Pages or Components folder.
2. Ensure _Imports.razor or the page includes the models' namespace and System.ComponentModel.DataAnnotations.
3. Add Bootstrap CSS and Font Awesome in index.html (_Host.cshtml for server-side) if not already present.
4. Keep DataAnnotations on SubscriptionModel; no extra NuGet is required for validation—EditForm + DataAnnotationsValidator suffice.
5. Replace the mock OnInitialized data with a service call; implement a service (e.g., IRecommendationService) and inject it via Program.cs.
## Limitations & next steps
- This is a single, client-side preview with mock data; backend integration is required for persistent subscriptions, email sending, and streaming recommendations.
- No authentication, rate limiting, or server-side validation is implemented—add server-side checks before accepting subscriptions.
- Market data and signal generation are out of scope; integrate a secure data source and caching layer for production.
- Accessibility review and unit/feature tests for form validation, table rendering, and interaction states are recommended.