Blazor - Rapid and Practical Course

Install Visual Studio and Node.js to set up your Blazor development environment, choosing development options and using Google Chrome as browser, then verify the setup by running a PowerShell command.

Set up the backend locally by running npm install and npm start. It exposes rest apis for user management, login, orders, categories, and product listings.

Create a Blazor web assembly project in Visual Studio, select .NET version 5.0, add the assets folder with the logo, and run with the green play button to see navigation.

Explore how templates define the elements that are always visible, presenting a layout with a left navigation bar and a right content area where the body renders individual pages.

Explore how a Blazor component in the pages and shared folders renders the Hereward page, merging C# with markup, exposing a title parameter, and enabling reusable Razor blocks.

Explore change detection and see how a simple counter updates the page automatically as the current count variable changes, illustrating how modern web frameworks handle user interface updates.

Prepare a Blazor project by cleaning files, deleting unused Razor files in pages and shared folders, removing navigation icons, updating directives, and opening the index. Then run to verify changes.

Learn to consume endpoints in Blazor by injecting services, calling an endpoint from a page component, and asynchronously loading a products array for display.

Render dynamic homepage products in Blazor using conditional blocks and foreach, displaying a responsive Bootstrap grid of product cards with image, name, and price, including a loading state.

Learn how Blazor components reduce code redundancy and simplify maintenance by turning the product card into a reusable component in the shared folder, with parameters.

Convert a bootstrap signup form into a Blazor form by creating a SignUpModel class, replacing markup with Blazor inputs, and binding properties to capture user data.

Define data constraints on the Blazor sign-up form using data annotations. Enforce required fields, email format, age range between 12 and 18, and password confirmation with compare validation.

Implement login and sign-up components in a Blazor app, switching forms with a mode string and using a do logging function. Run the project to verify credentials in the console.

Blazor course teaches signing up to create a user in the database via post, returning id and balance, storing data in a user entity, and navigating to home after signup.

Learn how to inject services in Blazor to share data across pages using a singleton, with the right now service as a global data source for sign up and checkout.

Persist login by storing user credentials in browser cookies, leverage JavaScript interop with Blazor to write and read cookies at startup for automatic credential loading.

Implement and display http error messages in a Blazor app by creating an error message string and rendering server messages with child content render fragment inside a reusable error component.

Learn to implement a shopping cart in a Blazor app by adding cart items, updating quantities, removing items, and clearing the cart with index-based checks.

Adjust product quantity with arrows, starting at one, and add to cart with a red button. The lesson covers increment and decrement functions, cart updates, item quantity, and total price.

Compute and display shopping cart totals in a Blazor app, using change detection and events to update all product cards when quantities change.

Render the shopping cart items in a Blazor app with dynamic data bindings, show a cart item card when items exist, and display calculated totals and user balance for checkout.

Extend the Blazor shopping cart by adding remove functionality, quantity updates, and a clear cart action, using change events and JavaScript interoperability to keep totals in sync.

Explore the Blazor component lifecycle, including on parameters set and sync, first render, after render, and disposal, and see how parameter changes trigger API calls and UI updates.

Explore how Blazor service classes—singleton, transient, and scoped—govern dependency injection in WebAssembly and server contexts, showing persistent versus fresh values across navigation.