●
LIVE DEMO
Generated using
Instruct UI - An AI for Blazor UI Generation
## What's implemented
- Hero landing with CTA buttons, stats and branded header.
- Seeker and Provider signup flows implemented with EditForm and DataAnnotations validation.
- SeekerDashboard: search bar, category tiles, featured professionals and filtered results.
- ProfessionalCard component with contact (WhatsApp) and request actions.
- ProviderDashboard with availability switch, statistics and request list with accept/decline actions.
- ServiceRequestModal with multi-state UI: form, searching spinner/progress, and accepted state.
- Toast notification component and modal backdrop handling.
## Key components
- EditForm, DataAnnotationsValidator, ValidationSummary, ValidationMessage
- InputText, InputTextArea, @bind-Value, EventCallback, NavigationManager
- SeekerSignUp, ProviderSignUp, SeekerDashboard, ProviderDashboard
- ProfessionalCard, ServiceRequestModal, ServiceRequestModel, ProfessionalModel
- Bootstrap classes (container, row, btn, form-control) and FontAwesome icons
## How it works
- Forms use EditForm with model instances and OnValidSubmit to invoke parent callbacks; DataAnnotations enforce basic validation.
- Two-way binding via @bind-Value is used across inputs; ValidationMessage shows field errors.
- Filtering is client-side: FilteredProfessionals is a computed property that matches query against ServiceType and Name.
- Events bubble using EventCallback (OnRequestStart, OnCompleted, OnUpdateRequest). NavigationManager opens external WhatsApp links.
- Modal flow toggles isSearching and acceptedByProvider and simulates async matching with Task.Delay before marking a provider as accepted.
## Styling
- Uses Bootstrap layout and utility classes (container, row, col-*, btn, form-control) plus a custom app.css for gradients, shadows, and responsive tweaks.
- FontAwesome icons are used for visual affordances; CSS provides hover transitions and card scaling.
- No Tailwind or MudBlazor detected; responsive breakpoints are handled via Bootstrap grid and media queries in app.css.
## Reuse steps
1. Add the provided models (DataModels.cs) and app.css to the Blazor project; ensure Bootstrap and FontAwesome are referenced.
2. Place the components (.razor files) in a Pages or Components folder and add appropriate routes in App.razor/Router.
3. Register HttpClient and any backend services in Program.cs to replace sample data.
4. Replace Data.SampleProfessionals/SampleRequests with API calls or injected services; consider SignalR for real-time notifications.
5. Add AuthenticationStateProvider and server-side validation/persistence before storing sensitive data (passwords, IDs).
## Limitations & next steps
- This is a single-page demo generated by Instruct UI and uses in-memory sample data; backend, persistence, and authentication are not implemented.
- Address suggestions are local and should be replaced by a geocoding/address API for production use.
- Provider matching in ServiceRequestModal is simulated; integrate real matching, notification delivery, and consent flows.
- Add secure password handling, server-side validation, and API error handling when wiring to a backend.