Blazor - Real World Developer Portfolio (WASM + Web API)

Install and set up prerequisites for Blazor by configuring Visual Studio 2022 Preview, GitHub and Azure accounts, and building a walking skeleton with a web API and wasm front end.

Create a Blazor WebAssembly solution with server, client, and shared library projects, then enable Git source control, create a private GitHub repository, and push the initial commits.

Delete boilerplate and set up CSS in a Blazor wasm portfolio project by refactoring the client and shared folders, integrating bootstrap, font awesome, and custom styles.

Create the home page for the public site using Bootstrap's grid and utility classes. Center content, add a heading, paragraph, and call-to-action buttons, and run dotnet watch to see updates.

Learn how to set up a Blazor project structure, create a shared navbar component with css isolation, and apply styles for nav-link, no-light, and active states.

Implement the navbar C# logic in a Blazor app using the navigation manager and dependency injection, and determine the active page by parsing the URL.

Create the navbar HTML in a Blazor project, add the Nerf Ball brand, and implement a responsive hamburger menu with active state for home, blog, and block page links.

Create a reusable footer component for the Blazor portfolio, integrate it into public pages, implement HTML with social icons and links that open in a new tab, and commit changes.

Expand the blog page by organizing blog posts into a grid of category cards; clicking a card opens a category page that displays the posts as a grid.

Create a category card component in a Blazor WASM app, refactor blog page to use it, and enable dynamic loading from a .NET Web API with EF Core and SQLite.

Explore Entity Framework Core as a lightweight, cross-platform object-relational mapper for .NET, and see how SQLite supports data access in a real-world portfolio app.

Create a category model in a dotnet project using a C# class that represents domain data and business logic, with properties mapped by entity framework as a code-first object-relational mapper.

Create and configure the ABP DB context in the server project, define a categories DbSet, seed initial category data in OnModelCreating, and prepare the API to use the database.

net six minimal hosting, register db context with sqlite via dependency injection, configure services and http pipeline, and update connection strings in app settings to enable sqlite database operations.

Apply a code-first approach using the Entity Framework Core command line tools to generate a database with an initial migration, review the data migrations, and understand up and down methods.

Generate the database with a code-first migration, using dotnet ef and the connection string in app settings. Inspect the db, commit changes, and prepare to expose data via web APIs.

Create a RESTful web API using ASP.NET Core by building a categories controller, injecting a database context, and implementing an asynchronous GET endpoint at api/categories with Swagger/OpenAPI integration.

Consume the API from the client, cache categories in an in-memory database cache using a singleton HttpClient and dependency injection, and notify components when data changes.

learn to consume the api from the client by creating a centralized api endpoints class, configuring debug and production urls, and enabling a thread-safe in-memory cache for categories.

Make the blog page dynamic by wiring an in-memory database cache to components, subscribing to data changed events, and disposing to prevent leaks, with CORS policy setup and server-client testing.

Finish making the blog page dynamic by passing a category object to a Blazor component, loading description and thumbnail from the server API, and prepare for Azure deployment.

Create and deploy the server deployment pipeline for a Blazor portfolio to Azure, using a pay as you go subscription and GitHub Actions for continuous integration and deployment.

Finish the server deployment pipeline by updating the GitHub actions workflow to build and deploy the Blazor WASM and Web API project to Azure.

Publish the client to Azure and configure a GitHub Actions CI/CD pipeline, updating production API endpoints in Visual Studio, then commit, push, and deploy via Azure Static Web Apps.

Finish the client deployment pipeline for a Blazor wasm app by updating the auto-generated workflow, enabling ahead-of-time compilation, and securing API tokens in Azure CI/CD.

Implement a bootstrap-driven pretty loader shown during app load, update index.html, and replace PWA icons with a web globe; adjust the title/SEO and commit changes.

Explore agile software development as a mindset aligned with the Agile Manifesto values and principles, and learn scrum framework with product owner, scrum master, backlogs, and sprints to deliver value.

Finish the public nav bar and scaffold the landing page, skills page, portfolio page, blog page, about page, and contact page using the HTML from the requirements document.

Scaffold the public pages in the blazor wasm app by creating razor components for skills, portfolio, about, and contact with proper routes, then test navigation across devices.

Develop the Boulder public website's skills page by updating the client-side UI, adding a skills icons folder, and composing content cards with Bootstrap styling, then commit changes.

Expand the portfolio page by building a grid of project cards that open a modal with more information, preparing for a Blazor WASM portfolio.

Expand the portfolio page by building a reusable bootstrap modal component that displays project details, a carousel with navigation, and links to live demos and the repo.

Finish the modal window component in a Blazor WASM portfolio, wiring delegates, public events, and show/hide logic with a backdrop and accessibility attributes for project modals.

Expand the about page in a Blazor wasm portfolio by building the front-end structure, adding a headline and bio, and enabling a resume pdf download.

Expand the contact page by scaffolding a main container, adding a mailto contact link, and noting production email options like SendGrid, then prepare CMS admin backend work.

Expand the post model in the Blazor portfolio to include title, excerpt, content, publish date, and published status, and map a one-to-many category to post relationship with a foreign key.

Seed the posts table using Entity Framework. Add a posts DbSet, relate posts to categories via a foreign key, and generate six seeded posts with titles and excerpts.

Generate a new migration to update the database schema, create post and category tables with their relationship, and apply the changes, then commit for the next api expansion.

Expand the categories controller in the web api by adding non-action utilities and get endpoints for categories with and without posts, organizing regions and API routes.

Finish the categories controller by adding post, put, and delete actions for create, update, and delete operations, with validation, error handling, and database persistence.

fix the object reference cycle by changing the architecture or enabling reference loop handling in json serialization, using the newton solve kit package and updates to api and data flow.

Update the client and server projects to .NET 6 preview 7, disabling implicit namespace imports and updating the GitHub workflow.

Clone and refactor the categories controller into a posts controller, add an include for the post category, and implement create, update, and delete operations with publish date handling.

Implement data transfer objects and AutoMapper to fix posts controller, map between post and post DTOs, configure dependency injection, and adjust create and update methods before testing and committing changes.

Test the fixed posts controller with full crud via api calls, using Visual Studio and PowerShell to create, read, update, and delete posts before proceeding to cms features.

Build the admin area front end to manage blog posts and categories, including create, read, update, delete, publish, and category assignment, with authentication and authorization to restrict access.

Create the admin navigational sidebar as a Blazor component with responsive CSS and media queries, using the navigation manager to highlight the active categories and posts pages.

Create and refine the admin navigational sidebar in the Blazor app, adding a styled sidebar component with home, categories, and posts links, and verify behavior with hot reload.

Display existing categories in a table on the categories index page, reusing the admin root index code and implementing an in memory cache with proper disposal to prevent memory leaks.

Expand the categories index page to display all categories from an in-memory cache in a bootstrapped table, with create, refresh data, update, and delete actions in the admin view.

Create the categories create page in a Blazor app, post new categories to the API via an http client, and update the in-memory cache with the created category.

Expand the category create page by building a Blazor form bound to the category model, using ASP.NET data annotations for validation and submitting via HTTP to the server.

Learn to debug Blazor apps in Visual Studio with breakpoints and step over to inspect variables. Debug both client and server projects, including Web API calls and WebAssembly quirks.

Add an uploaded image model and image upload controller to store images on the file system from base64 content and return the relative path.

learn to implement image uploading in a blazor wasm web api app, including client-side validation for jpeg and png, base64 encoding, and server-side upload handling for categories.

Create reusable loading and toast components in a Blazor wasm app, integrate them into shared components, and wire them into category pages to handle loading states and operation results.

Expand the categories index page in a Blazor WASM app by implementing the delete operation using reusable components, http client calls, and API endpoints, with post-count checks and error handling.

Extend the categories index in the Blazor wasm and web api course by implementing deletion with an on click handler, a loading indicator, reusable components, and success or failure toasts.

Create the category update page in a Blazor WASM web API app by reusing the create page, wiring a category id route, and implementing update with in-memory cache and toasts.

Test category CRUD operations in the client admin area, finish app.css styling, add a table of contents and extra styles, and demonstrate creating, updating, and deleting categories with image uploads.

Finish the in-memory database cache by adding category and post caching, enabling get by id and by name, with posts, mapping to DTO, updating API endpoints, and data-change notifications.

Fix deployment bugs by applying self-contained publishing, updating the runtime and libraries in the YAML, and enabling implicit namespace imports to ensure a clean build in Visual Studio.

Create the posts index page by leveraging the in-memory database cache, updating category and post components, and displaying post details such as title, category, thumbnail, and publish status.

Create the post create page in the Blazor portfolio by reusing the category create flow, adding category, excerpt, content, image, published, and author fields, while loading categories via in-memory cache.

Set up a rich text editor in a Blazor WASM app using the Grilled Cheese JavaScript library, with Blazor-JS interop, to render and manage Quill content for blog posts.

Learn how to integrate the Quill rich text editor into the Blazor posts create page. Configure JS interop and toolbar, and bind editor content to post creation.

Reuse the create page to build the posts update page in a Blazor WASM app, adding post id handling, update logic, quill content, toasts, and async server calls.

Implement quick publish and unpublish toggles on the post index page, update post status via API, refresh the in-memory cache, and show toast feedback on the public site.

Implement custom model validations for category names and post titles, enforcing no periods and no three or more consecutive spaces, via extended data annotations in shared models.

Conclude the atman area by reviewing the completed blog post management workflow with grid operations and category assignment, and outline remaining CMS data work.

Expand the blog page to display a responsive grid of category cards, restructure client pages, and implement in-memory cache logic to handle loading, no categories, and three-per-row layouts.

Build the Blazor categories index page to display a grid of blog post cards for a selected category using a category name parameter and in-memory cache.

Finish the categories index page by implementing the display logic, breadcrumbs, and a grid of blog post cards with loading states. Prepare to show category content in the next lecture.

Build and display blog post content in the public blog area by wiring category and post title parameters, loading content, and rendering breadcrumbs and a quill editor.

Implement ASP.NET identity to secure the admin area, configure JWT authentication and identity services with EF stores in SQLite, and wire up authentication and authorization in the server.

Seed the database with ASP.NET Identity by adding an administrator role and user, hashing the password, and linking the user to the role, then apply the migration.

Create a sign in controller in a Blazor wasm + web api project that issues a jwt on sign-in using identity managers, with a username and password model.

Secure the server api with authorization filters and administrator-only access. Allow anonymous access to specific get endpoints and validate with jwt tokens.

Set up security for the blazor wasm client by wiring authentication services and local storage. Implement an app authentication state provider to read JWT tokens and manage sign-in and sign-out.

Create a sign-in component in a Blazor wasm app to authenticate admins, manage tokens via local storage, update authentication state, and guard the admin area with the administrator role.

Secure the admin area by auto sign-in via local storage token, add sign-out in the navigation, and apply authorization across all admin pages.

Finish client security by adding an authorized admin bar that appears when signed in, reuse the admin sidebar code, implement sign out, test, and commit changes.

Publish your developer portfolio to boost credibility with employers, then join the Discord community and read the free architecture e-book from Microsoft on .NET best practices.