UISampleSpark

Live Site: ui.makeboldspark.com

A .NET 10 (ASP.NET Core) application exploring multiple front-end technologies for building modern web user interfaces. This repository is an educational reference that compares UI patterns — MVC, Razor Pages, React, Vue, htmx, Blazor, and vanilla JavaScript SPA — using a common Employee/Department domain, with theming, containerization, and deployment examples.

---

About

UISampleSpark demonstrates how the same Employee/Department CRUD domain can be implemented across seven distinct front-end UI patterns — MVC, Razor Pages, jQuery AJAX, React, Vue, htmx, and Blazor — within a single ASP.NET Core application. It covers theming, containerization, REST APIs, and CI/CD.

Live site: ui.makeboldspark.com

Built by Mark Hazleton — Technical Solutions Architect Part of the MakeBoldSpark portfolio of technical demonstrations.

---

Project History

• 2019 – Launched the repository with the first MVC walkthrough using AJAX partials, and set the contributor/code-of-conduct foundation.
• 2020 – Experimented with React and Blazor front ends, standardized REST/SOAP client abstractions, and stood up Azure Pipelines plus App Service deployments.
• 2021 – Completed the .NET 5→6 modernization, layered in Bootstrap 5 theming, hardened CI/CD (GitHub Actions + Azure Pipelines), and increased automated tests.
• 2022-2023 – Adopted .NET 7 then .NET 8, added TreeView/PivotTable demos, refined guard clauses and validation, and expanded Docker/Azure Linux automation.
• 2024-2025 – Introduced the minimal API sample, Aspire experiments, Bootswatch theme switching, extensive workflow tuning, and the .NET 9 then .NET 10 migrations.
• Tagging – Milestones in the CHANGELOG include suggested tags (e.g., net10-ga, ui-bootswatch-switcher) you can apply in git for quick navigation.

See the CHANGELOG for the full milestone timeline, and open reports/git-spark-report.html to explore commit velocity visualized by Mark Hazleton's git-spark npm package.

---

Live Deployments

• Live Site: https://ui.makeboldspark.com
• Docker Hub Image: https://hub.docker.com/r/markhazleton/uisamplespark

---

Goals

• Compare multiple front-end UI technologies side-by-side
• Showcase clean architecture, DI, and unit testing
• Provide examples of theming and UX enhancements
• Show Azure deployment and containerization approaches

---

Features & Architecture

• UI Patterns:
  • MVC Controllers & Views — traditional multi-view pattern (/MvcEmployee)
  • jQuery AJAX + Partial Views — modal-based UI without full page reloads (/Employee)
  • Razor Pages — page-centric model (/EmployeeRazor)
  • Single Page Application (SPA) — JavaScript/AJAX with DataTables and REST API (/EmployeeSinglePage)
  • React SPA — component-based UI with React 18, hooks, and Fetch API (/EmployeeReact)
  • Vue SPA — reactive UI with Vue 3 Composition API (/EmployeeVue)
  • htmx — server-driven hypermedia with HTML-over-the-wire (/EmployeeHtmx)
  • Blazor Server — real-time C# components via SignalR (/EmployeeBlazor)
  • Pivot Table reporting — data analysis with PivotTable.js (/EmployeePivot)
• API Endpoints:
  • REST endpoints for Employees & Departments (Swagger/OpenAPI enabled)
• Theming & UX:
  • Make Bold Spark brand theme (Make Bold Solutions design system) with a light (Cream) / dark (Ink) toggle
  • Bootstrap 5 + Lucide outline icons (self-hosted CSS masks generated by npm run build into wwwroot/css/icons.css)
  • Modal-based forms
• Data Layer:
  • In-memory EF Core database (EmployeeContext)
  • Repository/service pattern via IEmployeeService & EmployeeDatabaseService
• Observability & Health:
  • Application Insights telemetry
  • Health checks at /health
• DevOps & CI/CD:
  • GitHub Actions: build, test, Docker image push
  • Dockerfile for container builds
• Testing:
  • Domain & Repository unit test projects

---

Technology Stack

• .NET 10 / C#
• ASP.NET Core MVC & Razor Pages
• React 18 (CDN + Babel standalone for in-browser JSX)
• Entity Framework Core (InMemory & SqlServer packages referenced for future use)
• Swashbuckle (Swagger/OpenAPI)
• Make Bold Spark theme (wwwroot/css/makebold.css) on Bootstrap 5.3; Be Vietnam Pro + Inter Tight self-hosted
• WebSpark.HttpClientUtility
• Markdown rendering (Westwind.AspNetCore.Markdown)

---

HttpClient Usage

HttpClient is utilized via WebSpark.HttpClientUtility package which provides IHttpRequestResultService for making HTTP requests. The base AddHttpClient() factory registration is also available for future external API integrations.

---

Getting Started

Prerequisites

• .NET 10 SDK
• (Optional) Docker

Run Locally

git clone https://github.com/markhazleton/UISampleSpark.git
cd UISampleSpark
 dotnet restore
 cd UISampleSpark.UI
 dotnet run

Visit https://localhost:5001

Run with Docker

docker build -t uisamplespark ./UISampleSpark.UI
docker run -p 8080:80 uisamplespark

---

Project Structure

UISampleSpark.UI/              Web application (MVC, Razor Pages, React, Vue, htmx, Blazor)
UISampleSpark.Core/           Domain models (Employee/Department DTOs, responses)
UISampleSpark.Data/       EF Core context, service implementations, mock generator
UISampleSpark.Core.Tests/     Unit tests for domain logic
UISampleSpark.Data.Tests/ Unit tests for repository/service layer
UISampleSpark.CLI/          Console app seeding & demonstration (SQLite EF example)

(There is no HttpClientFactory sample project; previous reference removed.)

---

Data Model

Employees belong to Departments. Each UI pattern implements the same operations — create, read, update, delete — demonstrating validation, paging (PagingParameterModel), and simple relationships.

---

Swagger/OpenAPI

Interactive API docs available at /swagger when running locally or deployed.

---

API Access Keys

API endpoints are protected by a lightweight API key check.

• Contact Mark Hazleton if you would like an API key for access.
• Send the key using header X-API-Key.
• Configuration supports multiple keys via ApiSecurity:ApiKeys.
• The repository starts with 10 configured key slots (ApiKeys[0] through ApiKeys[9]).

Example request:

curl -H "X-API-Key: <your-key>" https://localhost:5001/api/employee

---

Theme Switching

The site uses the Make Bold Solutions design system: rust #982407, ember #C6620C, ink #1E1E1E and cream #F8F6F2, with Be Vietnam Pro headlines and Inter Tight body text. wwwroot/css/makebold.css maps these brand tokens onto Bootstrap 5.3 variables, so every demo restyles without markup changes. The header toggle switches data-bs-theme between light (Cream) and dark (Ink); the choice is stored in localStorage and defaults to the visitor's system preference. Shared chrome lives in Views/Shared/_SiteHead.cshtml, _SiteHeader.cshtml and _Footer.cshtml.

---

Health & Status

• /health returns liveness status
• /status provides application metadata

---

Repo Story

An evidence-based narrative of this repository's development history, contributor patterns, and architecture: Repo Story (2026-06-21)

---

Contributing

Contributions welcome. Submit issues or PRs.

---

License

MIT License © 2018-2025 Mark Hazleton See LICENSE for details.