.NET Fullstack: Web API, Blazor WebAssembly with MuBlazor

Learn to create a lean, multi-layer .NET solution with domain and application core, infrastructure, and web api, wired by clear project references and shared common models.

Design a bank domain model with account holders and transactions (deposits and withdrawals), enforcing a universal primary key via IEntity, a generic ID type, and a base entity.

Disable nullable warnings in the domain to simplify null handling, then model bank entities: person, account holder inheriting person, and account with account number, holder id, and account type enum.

Define bank entities: account holder with multiple accounts and accounts with transactions linked to an account, typed as deposits or withdrawals, using a base entity and navigation properties.

Define a write repository for a generic t class with add, update, and delete operations, asynchronously returning created object; implement a unit of work repository to access these through repository.

Define the unit of work interface by unifying read and write repositories, with generic constraints on the base entity and its key, plus an asynchronous commit with a cancellation token.

Install and configure Entity Framework Core packages for SQL Server, create the application DbContext with DbSets for account holders and transactions, and set up for entity type configuration.

Configure account entity mapping with entity type configuration, map to accounts table in bank schema, define index on account number, and convert account type enum to string.

Configure entity framework mappings for account holder and transaction in a banking schema, using table mappings, enum to string conversion, apply configuration from assembly, and manage decimal precision for migrations.

Implement the read repository for a generic EF context, wire the write repository and unit of work, then register the db context, migrations, and connection string in the DI container.

implement repository write operations for a generic entity in .NET by injecting application db context and performing add, delete, and update with the DbSet, updating via find and current values.

Implement a generic unit of work that coordinates read and write repositories using a shared application DB context, caching repositories in a hash table, and committing changes via Entity Framework.

Learn to implement dispose logic for a db context within a repository and unit of work, register interfaces in the dependency injection container, and prepare for migrations.

Create a startup class to register the infrastructure dependencies, including the database context, repositories, and unit of work, using the default connection string from configuration.

Set the web API as startup, run migrations via NuGet console, install EF Core design, add migration, and update database to create banking schema and account holders and accounts tables.

Create account holder request models in the common layer to enable back-end and front-end communication for Blazor WebAssembly, covering create and update with id, date of birth, email, and name.

Explains CQRS pattern and how to implement a create account holder command using the mediator pipeline, unit of work, and Map Star, returning the new ID with a success message.

Describe updating an account holder by locating the record with a read repository and id, applying updates via the domain model, and returning the updated id in a response wrapper.

Create the delete account holder command and handler using unit of work to fetch by id, delete, and commit. Return a success response with the id; handle not found appropriately.

Create account holder response DTO, map domain to DTO, and implement a get account holder by id query with mediator, unit of work, and repository, including null checks.

Create a mediator get account holders query returning a response wrapper of account holder responses, mapped from the database via unit of work and read repository.

Create a base api controller with a mediator sender for account holders, and add a post endpoint to create an account holder, returning ok or bad request based on isSuccessful.

Define and test account holder endpoints by updating, deleting, and retrieving account holders via HTTP put, delete, and get by id, handling 404 not found and 200 ok responses.

Register the mediator with the dependency injection container via an application-layer extension on IServiceCollection, using the executing assembly, configure in program.cs, and test the endpoint.

Test the get endpoint and create an account holder in .NET Web API, confirming 404 for no records and 200 after creation. Debug the update path’s casting error for fixes.

Diagnoses a unit-of-work error between read and write repositories, refactoring key generation to separate read and write, enabling correct casting and successful account updates.

Learn to implement the create account command in a .NET fullstack setup, generating account numbers, activating accounts, and wiring a mediator-driven CRUD workflow for accounts and account holders.

Generate a bank account number from the current date-time components using a static helper, map the request to an account, activate it, and persist via unit of work and repository.

Implement an api endpoint to add an account by posting a create account request, using a mediator to send a create account command and return a wrapper response.

Test the add account endpoint by creating a check account for account holder id 1 with a 200 balance, verify response, and note enums saved as strings in the database.

Configure json options to serialize enums as strings in Swagger, using a string enum converter in a .NET API. See account type default as 'check' and gain clearer Swagger documentation.

Implement get account by id query with mediator; return a response wrapper containing an account response with account holder, mapped from domain via a unit of work and read repository.

Implement a mediator query to retrieve an account by account number, wiring a unit of work, read repository access, and mapping to an account response.

Demonstrates building a get accounts query with asynchronous handling, mapping database accounts to account responses via a unit of work, repository, and a response wrapper.

Implement account get endpoints: http get by id and by account number, bind the id, send a GetAccountByIdQuery via mediator, and return 200 OK or not found; test the API.

Test account get endpoints to verify payload details such as account number, timestamp, id, and active status, note missing account holder data, and outline upcoming transaction and front-end work.

separate the balance check from the transaction flow and validate withdrawal amounts against the account balance on the server; create and commit a transaction object for withdrawals and deposits.

Implement a post endpoint named transaction in the account controller to process transaction payloads and return a success or failure response. Expose the account balance in the response for testing.

Test the transact endpoint by depositing to account id one and making withdrawals, validating balance updates and error handling, and plan eager loading to include account holder, accounts, and transactions.

Implement a get account transactions query returning transaction responses for a given account, with IDs and account data via eager loading, using a unit of work and repository pattern.

Implement and test a transact endpoint in the accounts controller, fetching account transactions by id via GetAccountTransactionsQuery and mediator, and prepare for Blazor UI with MuBlazor.

Create a Blazor WebAssembly front end with the standalone template in .NET 8, set up bang UI under UI, enable a progressive web app, and review the weather forecast sample.

Explore the Blazor WebAssembly app structure, including app.razor routing, found and not found content, and the main layout, plus underscore imports and program.css managing dependencies.

Explore how MudBlazor's main layout uses the app bar, nav bar, and render body to structure a Blazor app. Override default razor pages with txt files to preview components quickly.

Learn to define account holder endpoints and build a front-end interface by creating a static endpoints class with add, update, delete, get by id, and get all routes.

Design and implement accounts endpoints (get all, get by id, get by account id, get by account number) and transaction endpoints, then use http client in a Blazor WebAssembly app.

Create a response extension method to asynchronously deserialize HTTP response messages into a generic response wrapper, centralizing JSON deserialization with case-insensitive properties and reference handling.

Implement an account holder service using an injected HTTP client to call the account holders API, performing create, get by id, get all, update, and delete operations with JSON payloads.

Register the IAccountHolderService as a scoped dependency in Program.cs, and register its implementation AccountHolderService, while configuring the Blazor WebAssembly HttpClient base URL via appsettings.json using configuration, avoiding hard-coded endpoints.

Define a cors policy in the web API to allow the Blazor WebAssembly front end to access resources, naming bank UI and permitting any origin, header, and method, via UseCors.

Create the first Blazor component by separating markup from behavior, and display an account holder list using a mud blazer table and a css file.

Explore the Blazor component lifecycle with OnInitializedAsync, inject services, and fetch account holders from an API. Bind data to a table and show errors via a snack bar.

Test the account holder list by launching the web api and Blazor wasm together, verify data retrieval from the api, and explore responsive design with data labels in Blazor.

set up the account holder grid with a toolbar and a plus icon button to create, update, and delete; wire onClick to an add function and open a dialog form.

Create and bind a MudDialog for adding an account holder in a Blazor app, using a CreateAccountHolderRequest model and a cascading parameter with a dialog service to save and close.

Explore adding an account holder dialog in Blazor with MudBlazor, converting records to classes for two-way binding, handling nullable date time, and showing snackbar feedback.

Explain changing account holder models from records to classes to enable binding. Add nullable date of birth for mud date picker and invoke add account holder dialogue with result handling.

Investigate a null reference in the account holder dialog and instantiate the create account holder object to render the form, then save to the API and show a success snackbar.

Learn to reload the account holder grid when a dialog completes, handling cancel vs close, and create a reusable load account holders function for initialization and dialog events.

Add an actions column to the account holder grid with a dropdown menu offering update and delete, and implement a dialog-based update flow to support CRUD on account holders.

Trigger onClick updates account holder by opening a dedicated update account holder dialogue, passing the ID, invoking update async, and showing a success snackbar.

Invoke the update account holder dialog by building parameters from the selected grid item, passing a prepared update holder object, and reloading the table on success.

Learn to build a reusable delete confirmation dialog in Blazor, invoked on delete clicks, with a shared component, message parameter, confirm and cancel actions, and API integration.

Create a custom fluent validation for the create account holder form. Enforce non-empty names, a 16-year-or-older birth date, digit-only contact numbers via regex, and a valid email address.

Implement an asynchronous account holder validation workflow in a Blazor app by building a helper validator, invoking fluent validation, and validating the create account holder request model with included properties.

You will learn to align the create account holder form validation with a nullable date of birth, validate fields in the dialog, and test validations, including disabling submit when invalid.

Add validations to the update account holder dialog for first name, last name, contact number, and email address, following the add account holder validator pattern and available for discussion.

Apply card-based styling to the account holder list with elevated cards, avatars, icons, a header, and a dense, compact table with smaller buttons.

Style the add account holder dialog with MudBlazor grid, using breakpoints (xs, sm, md) to arrange fields like first name, date of birth, and email in a compact, responsive layout.

Learn to build a reusable header component in a Blazor app for managing account holders and their bank accounts, with title and description parameters passed through routes.

Explore building a routable Blazor component to manage an account holder's accounts, pass an account holder id via routes, and navigate between tabs showing accounts and transactions.

Test the manage accounts feature by navigating to banking/manage accounts/{id}, observe route parameters, and preview the header and bank accounts table in the Blazor WebAssembly app.

Define a header parameter on close as an event callback and bind the close button to invoke it, then listen on each page to navigate back to the previous page.

Add a collapsible account holder details section in the manage component, fetch the account holder by ID, and display read-only first and last name with a loading indicator.

Test the account holder details section by expanding the panel, noting the loading spinner, and verifying John Doe in the details and the bank accounts grid.

Implement the IAccountService interface for bank accounts, including CRUD and transaction actions, converting to classes for binding, and wiring endpoints for create, get by id, get all, and get transactions.

Build the account list component, wire the account service for global use, and fetch accounts by account holder ID to display bank accounts in the UI.

Implement a mediator-based query to fetch accounts by account holder ID, map to an account response, and expose a get accounts by account holder ID API endpoint for frontend integration.

Implement an async flow to fetch accounts by account holder ID via http client, bind the accounts list to the UI, and display it in a table with loading.

Create a new account list component with a from-scratch table inside a material card, reuse the header, display account number, balance, is active, and account type, and add account action.

Explore how to use and test the account list component by passing account holder id, loading the grid via API, and debugging enum conversion errors during UI rendering.

Fix account list component by resolving enum string binding across API and front end, restore enum types, and enhance the UI with a read-only checkbox and currency formatting.

Demonstrate currency formatting and alignment in a Blazor app by configuring culture info, using globalization for correct currency symbols, and aligning controls to the right.

Invoke the add account dialog from the account list by passing parameters (account holder id) and awaiting the result, then reload the accounts grid.

Test the add account component in a Blazor WebAssembly app by debugging two-way binding with bindvalue for account type, verify form bindings, create account flow, and outline future transactions.

Learn to style a Blazor WebAssembly app by adding a currency symbol to the balance field, applying colors, and implementing transact and transaction history features for accounts.

Develop a transact dialog component for deposits and withdrawals that binds a transaction request, validates form, shows balance read-only, and calls account service API with account id, amount, and type.

Invoke the transact component to open a transaction dialog, passing the account id and balance as parameters. Validate the withdrawal flow, error handling, and balance refresh after the transaction.

Implement front-end validations for transactions, ensuring deposits are greater than zero and withdrawals do not exceed the current balance, using a transaction validator bound to the transaction request.

Validate deposits greater than zero and withdrawals greater than zero, enforce withdrawals not exceed the current balance with error messages, and display a transaction history table for a bank statement.

Create a transaction history component that fetches account details and its transactions via two API calls, displaying account number, balance, and type above a table showing type, amount, and date.

Test the transaction history component by validating label fixes, exploring navigation from the account list back to the account history, and routing with account holder id to load transactions.