Blazor: From Beginner To Pro (.NET 8)

Launch a Blazor WebAssembly standalone app with Visual Studio 2022, then modify the home page, explore routing and components, use hot reload, and commit changes to GitHub.

Explore the blazor project structure and component-first design, including ww root, index.html, layouts, and pages, and understand how components run client-side now and on the server later.

Explore Blazor's component-first architecture. Learn to build reusable UI blocks with app, router, layout, page, and UI components, and understand server-side and client-side execution along with routing and URL mapping.

Explore building reusable Blazor UI components, implement a palindrome checker with a dynamic message box, pass parameters, and conditionally render content using Razor syntax and bootstrap styling.

Explore how Blazor forms enable secure data entry using edit form, model binding, and client-side validation with data annotations. Use built-in input components and on valid submit to process data.

Build a Blazor tasker to-do list app by modeling a task item, binding a form, and validating input with data annotations. Leverage local storage to persist tasks across page refresh.

Explore Blazor JS interop to call JavaScript for local storage, using the JS runtime and invoke methods to set and get items with JSON.stringify.

Persist a task list in Blazor by saving to local storage with JSON serialization and JavaScript interop, and load it on page initialization while enabling add, delete, and update.

Discover how to build reusable Blazor components, including layout, nav, and footer, and create a starter template in Visual Studio, while learning the Blazor WebAssembly structure and single-page app behavior.

Create a Blazor WebAssembly standalone project as a reusable template, exploring layouts from a default sidebar to a top navigation, and upgrade Bootstrap to 5.3 with fonts and icons.

Blazor course module guides you to build a responsive top navigation bar with bootstrap in a razor component, including branding and links to home, counter, and weather.

Build a responsive three-column footer in a Blazor app using Bootstrap. Arrange left copyright and logo, middle app logo, and right social links with responsive ordering.

Learn to implement theme support in a Blazor app by defining CSS variables, wiring a theme explorer, and styling the top nav and footer with Code Magic and color variants.

Design a responsive home page in Blazor using Bootstrap and flexbox, with a logo, title, subtitle, call-to-action, and a tech-stack icon row.

Solve coding challenges in Blazor, from algorithm problems like fizzbuzz to business cases like a loan calculator and movie API integration, mastering problem solving, two way binding, and reusable components.

Build the fizzbuzz challenge in Blazor by printing numbers 1 through 100 and replacing multiples with fizz, buzz, or fizzbuzz, guided by the SRS and test cases.

Create and customize a Blazor Fizzbuzz project in Visual Studio using a branded template, set up the home page, branding, icons, and routing for a polished portfolio-ready app.

Explore building a Blazor user interface for a Fizzbuzz app by creating a model, binding inputs with two-way binding, and applying data annotations for validation within an edit form.

Apply the fizzbuzz algorithm by looping from 1 to a stop value, using modulus to test divisibility by two values, and building a string array of fizz, buzz, or numbers.

Learn to visualize fizzbuzz results in a Blazor UI by conditionally rendering a five-column grid with styled fizz, buzz, and fizzbuzz items using Razor syntax, components, and isolated CSS.

Learn cross-field validation in Blazor with a custom Fizzbuzz validator using an edit context, enforcing fizz < buzz and stop value at least the product of fizz and buzz.

Learn to build a Blazor mortgage calculator that computes an amortized loan schedule including monthly payment, principal, interest, and total cost, with input validation and a branded UI.

Set up a Blazor project in Visual Studio using a template, organize components and pages, and wire a loan shark calculator page for future UI work.

Learn to model a mortgage calculator in Blazor by building a loan class with data annotations for inputs (amount, rate, term) and a payment schedule with loan payments for amortization.

Blazor training builds a loan payment calculator by creating a static loan utils helper, converting annual rate to monthly, and binding the payment to the loan object.

Build an interactive payment schedule in a Blazor app by creating a reusable payment schedule component, wiring it to the calculated loan payments, and toggling visibility with a Bootstrap table.

Discover techniques to craft a standout Blazor landing page. Separate layout from the app, apply layered gradients and graphics, and customize call-to-action buttons for impact.

Create three placeholder Razor pages for now playing, popular, and favorites, wire them to the navigation menu, and standardize page structure with a container, title, and icons.

Build a reusable Blazor Razor component, movie card, to display posters, titles, release dates, and actions using Bootstrap cards, grid, and responsive breakpoints, with mock data and hover effects.

Set up your TMDB account for a Blazor project, obtain a read access token, and begin testing movie data endpoints in the API docs.

Learn to securely store the TMDB access key for a Blazor app by adding a development json config file and ignoring it in GitHub.

Explore how web APIs enable a Blazor client to call endpoints, exchange JSON via get, post, put, patch, and delete, and handle responses with common status codes.

Create and refactor Blazor models for the now playing page by converting TMDB API results into a movie list response and a movie class, with nullable fields and empty arrays.

fetches now playing movies from the tmdb api endpoint using http, maps json to movie models, and builds full poster urls for display on the now playing page.

Learn to encapsulate api calls with a dedicated TMDB service in Blazor, using HttpClient injection and configuration to fetch now playing movies and format posters.

Build a Blazor popular movies page by using a shared service to call the TMDB API's popular endpoint, reusing the now playing page components to display results.

Learn to build a favorites feature in Blazor by storing favorites in local storage, enabling add, remove, and display across now playing, popular, and favorites pages.

Build a Blazor search feature by adding a nav search bound to a query, navigating to a search page, querying the TMDB API, and displaying results to add to favorites.

Build a Blazor movie details page by creating a razor component with a route parameter for the movie ID, wiring in a service, and wiring to TMDB API endpoints.

Build a movie details model from the API JSON in a Blazor app, converting to PascalCase with nullable strings and lists, then wire an endpoint to fetch details.

Learn to build a Blazor movie detail service that fetches movie details by id using a REST endpoint, handles poster and backdrop image URLs, and robust error handling.

Build a Blazor trailer service that consumes the TMDB API to fetch YouTube trailers, filter by trailer type and language, and return the first matching video for a movie.

Build a Blazor page that fetches a movie trailer by id, toggles a Bootstrap modal with a trailer button, and uses JavaScript interop to inject the YouTube iframe.

Build a Blazor app feature that loads a movie trailer into a Bootstrap modal via JavaScript interop and updates the title with the loaded movie name.

Blazor: from beginner to pro shows building a reusable top-billed cast swiper using the TMDB credits API, and creating credits, cast, and crew models with proper naming and interop.

Learn to build a reusable actor swiper in Blazor by creating two components, adding isolated CSS and JS, and wiring a swipeable, scrollable actor carousel into the movie details page.

Enable a Blazor actor swiper to fetch movie credits via the TMDB API, format cast and crew images, and pass the actors list to a reusable component for dynamic display.

Learn to build an actor slider in Blazor using JavaScript interop to navigate a swiper of actors from the TMDB API, with next/previous controls and mobile responsive behavior.

Move from client-side Blazor Wasm to server-side resources via a RESTful API, implement authentication tokens in cookies, and support multi-tenant access with JSON data and HTTP verbs.

Create an ASP.NET Core Web API in Visual Studio 2022, add authorization and a database, and test endpoints with Swagger. Set up a backend for future Blazor connections.

Delete unused sample files and configure the project by adding and updating NuGet packages, including Entity Framework Core, tools, Web Code Generation, and PostgreSQL support for database work.

Set up the application dbcontext to enable database communication by integrating identity tables, the Tasker Item entity, and a dbset, aligning with DTO mapping and a connection string.

Configure a Blazor app to connect to PostgreSQL by setting a local connection string in user secrets, wiring up the application db context, and using PostgreSQL in program.cs.

Create your first web api controller in a Blazor project, scaffold it with Entity Framework, use DTOs, and inject identity to map requests to the current user.

Explore securing Blazor endpoints with authorize, DTO-driven actions to prevent over posting, and user ID filtering to ensure items belong to the logged-in user.

Modify swagger to require login by adding bearer security, wire up identity endpoints for login and register, and map identity API for testing in the Blazor app.

Test a Blazor API with swagger by registering and logging in to set a cookie, then create, retrieve, and delete task items via post, get, and delete.

Learn to build a dynamic Postgres connection string by pulling from user secrets or environment variables, integrate a data utility in program.cs, and host Blazor apps on Railway or Heroku.

Turn a web API project into a reusable template with built-in auth, configuring template.json, dot template dot config, and an icon, then install it with dotnet new install.

Learn to build reusable full-stack templates for Blazor apps by setting up a starter project with authentication, branding, and per-page components for server and client projects.

Create a secure auth menu in a Blazor app. Configure Postgres with EF Core Identity to enable login, registration, roles, and claims in a ready template.

Extend identity in Blazor by adding first name and last name to registration, update the application user model, and migrate the database to support the new fields.

Extend the profile page in a Blazor server app by adding first name, last name, and phone number, binding to an input model and updating the ASP.NET Identity user.

Create an image upload model and a profile picture navigation property on the identity user, then migrate the database and expose a controller endpoint to serve images.

Build an image upload helper in a Blazor app, handling IFormFile uploads with memory streams and byte-array storage in a database, featuring a default profile image and image retrieval.

Extend the Blazor register page to accept an optional profile image using an IFormFile and multi-part form data, with client-side preview and server-side saving via a database-linked image table.

Learn to create a dynamic uploads controller in Blazor that converts a database byte array into an image URL and serves it via a get endpoint for image tags.

learn how to map a Blazor profile page to an uploads controller, enable image upload with multipart form data and caching, and update the user's profile picture in Entity Framework.

Create a reusable Blazor template with branding and extended identity, automate project setup with a dot template config and template.json, integrate a logo, and test in Visual Studio Code.

Learn to replace local storage with a centralized Postgres database in a Blazor full-stack Tasker app, featuring login protection, per-user data, and server-side versus client-side architecture.

Create a new Tasker DB page in a Blazor WebAssembly app, wire it into navigation, and secure it with authorization to require login for access.

Explore moving a Wasm Tasker app from local storage to a centralized Postgres relational database, implementing primary keys and foreign keys, referential integrity, and multi-tenant user task ownership.

build a blazor get endpoint that returns all Tasker items for the logged-in user, using EF Core to query by user id and bind the JSON results to the UI.

Implement a Blazor put endpoint to replace a task item by id using a body DTO, validate route id and user ownership, and save changes.

Implement a delete endpoint in a Blazor full-stack app, using HTTP delete to remove a server-side Tasker item from Postgres after verifying the user.

Design a relational database for a Blazor app using Postgres, with ASP.NET Identity users, contacts, categories, and a join table, and master primary keys, foreign keys, and indexes.

Learn to set up a Blazor app in Visual Studio 2022, configure a Postgres database with migrations, and tailor the home page and navigation with branding assets.

Explore building the server-side data layer for contact management in Blazor, defining a contact model with validation, computed fields, enums, and Entity Framework migrations to create categories and contacts tables.

Generate demo data for a Blazor contact app using Bogus, seed a demo user at startup, migrate the database, and verify via configuration and user manager.

Seed demo contacts for a Blazor app using Bogus to generate fake data, attach random demo images, create demo categories, and save via the data context.

Explore what claims are in C# and .NET, how they support authentication and authorization with key-value pairs, and how to add a profile picture claim displayed in the navbar.

Learn to extend identity by adding a profile picture claim, update server and client side providers, and render first name, last name, and picture in the ui.

Explore how data transfer objects (dtos) transform server data for the client, improving performance and security. See how ids, created dates, and image ids become a profile image url.

Create category and contact DTOs for the client app, map server entities to DTOs, handle profile image URLs, remove internal IDs, and prevent circular references during transformation.

Learn the Blazor data access pattern (BDAP) to build reusable components with a repository, DTO service, and API layer, enabling server and Wasm rendering via dependency injection.

Implement server-side category creation in a Blazor app by building a repository and DTO services, persisting new categories to Postgres via a context factory.

Implement a get categories feature in a Blazor app by updating the repository interface, wiring the DTO service, and rendering user-specific categories in the UI.

build an inline edit UI in Blazor for category items using a status enum to toggle between viewing and editing, with a form bound to a category model.

Learn how to implement a full edit workflow for categories in a Blazor app: create backend update logic, repository methods, DTO service updates, and bidirectional UI callbacks to persist changes.

Create a delete category user interface in Blazor, wiring up an accordion-based view with yes/no confirmation, status toggling, and parameter passing to enable safe delete actions.

Explore Blazor render modes—interactive server, WebAssembly, and SSR—and learn how auto mode combines their benefits, from enhanced navigation to efficient DOM patching.

Demonstrate converting a blazor: from beginner to pro (.NET 8) category page to webassembly for interactive wasm, covering prerendering, client-side service registration, and http calls to fetch categories.

Implement a wasm based category creation flow in Blazor by adding a post API endpoint in the categories controller and returning the created category.

Implement an update category flow in a Blazor app by adding an http put endpoint with a route id, accepting a category dto, and updating via the wasm service.

Learn to build the Blazor contacts UI with a Bootstrap two-column create form, using a reusable contact form component bound to a contact DTO, and load categories via a service.

Learn to build an image helper in blazor that uploads a file, converts it to a base64 data URL, and displays a live preview with a default image and validation.

Save a new contact to the database with core fields such as name, email, phone, address, and birthday. Handle categories and image storage through a repository and a DTO service.

Learn to save a contact with an embedded image in a Blazor app, converting a data URL to a database image upload and linking via EF to Postgres.

Learn to implement a one-to-many relationship by adding multiple categories to a contact using a repository pattern and a DTO service, in a two-step save and requery workflow.

Explore building a reusable contact card component in Blazor that shows a contact's image, name, address, phone, and email, with edit, delete actions, and category badges styled via Bootstrap.

Build an edit contact UI in Blazor: a routed Razor component loads by id via a DTO service and reuses the contact form to update and navigate back.

Implement a Blazor delete confirmation in the contact card, then use an on delete callback to invoke a service that removes the contact and refreshes the list.

Learn to implement a case-insensitive search for contacts in a Blazor app, filtering by first name, last name, and category via a repository pattern and DTO, with query string binding.

Learn to filter contacts by category in a Blazor app, update the URL query string, bind the category selector, and display category-specific contacts with edit links.

Set up SendGrid for your Blazor app by creating a free account, configuring a sender identity, and generating an API key to send emails to individuals or categories at scale.

In this Blazor (.NET 8) lecture, build an email contact UI by creating a Razor component and a reusable email form, with a client-side email data model and validation.

Build an email category UI in Blazor to send messages to all contacts in a category. Initialize email data from category contacts, handle authentication, and wire routes for category emails.

Implement a SendGrid email service by wiring the IEmailSender interface, configuring the SendGrid key, from address, and from name in program.cs and user secrets, and test account and category emails.

Learn how to clean up a Blazor project by addressing warnings and nullable reference issues. Update interfaces, use collection expressions, and validate with a rebuild and tests.

Implement a delete endpoint in Blazor WebAssembly by wiring an API controller route for deleting a contact by id and the client-side WASM service call to perform the HTTP delete.

Implement a create contact endpoint in Blazor WebAssembly, post a contact DTO to the server, and return the new contact with a retrieval link and error handling.

Explore building and testing a Blazor app in WebAssembly by implementing email category APIs, wiring client and server sides, and converting pages to auto mode for interactive WebAssembly.

Polishes the profile and personal data UI by removing the two-factor option, rearranging controls, and stacking download and delete actions side by side for a cleaner demo experience.

Learn to publish a Blazor app to Railway by building a data utility that selects a local or Railway database connection string from config or a database URL for Postgres.

Move demo logins to user secrets and consolidate configurations for deployment readiness. Add a dockerfile and adjust its location so the app runs in a self-contained environment on railway.

Configure the csproj to copy data demo images from the data folder to the output directory and make them available for the demo contacts during railway deployment.

Publish your Blazor project by deploying Postgres and a GitHub repository to Railway, configure the database URL, enable ASP.Net core forward headers, set variables, and test with a demo user.