{"id":51061841,"url":"https://github.com/kardelruveyda/github-copilot-modernization-microsoft-fluentui-blazor","last_synced_at":"2026-06-23T03:01:12.523Z","repository":{"id":357896966,"uuid":"1238972856","full_name":"KardelRuveyda/github-copilot-modernization-microsoft-fluentui-blazor","owner":"KardelRuveyda","description":".NET 10 Blazor Server demo showcasing Microsoft FluentUI Blazor with a Minimal API backend. Azure Portal-style UI: data grid, charts, dialogs, wizard, theming, EN/TR localization. Deployable to Azure App Service via azd + Bicep, or run instantly in GitHub Codespaces.","archived":false,"fork":false,"pushed_at":"2026-05-14T18:39:34.000Z","size":804,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-05-14T19:39:38.712Z","etag":null,"topics":["azd","azure","bicep","blazor","blazor-server","copilot-modernization","dotnet","fluentui","fluentui-blazor","minimal-api","net10"],"latest_commit_sha":null,"homepage":"https://app-fluentdemo-web-ygi6c27opusmo.azurewebsites.net/","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/KardelRuveyda.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2026-05-14T16:25:48.000Z","updated_at":"2026-05-14T18:39:39.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/KardelRuveyda/github-copilot-modernization-microsoft-fluentui-blazor","commit_stats":null,"previous_names":["kardelruveyda/github-copilot-modernization-microsoft-fluentui-blazor"],"tags_count":null,"template":false,"template_full_name":null,"purl":"pkg:github/KardelRuveyda/github-copilot-modernization-microsoft-fluentui-blazor","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KardelRuveyda%2Fgithub-copilot-modernization-microsoft-fluentui-blazor","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KardelRuveyda%2Fgithub-copilot-modernization-microsoft-fluentui-blazor/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KardelRuveyda%2Fgithub-copilot-modernization-microsoft-fluentui-blazor/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KardelRuveyda%2Fgithub-copilot-modernization-microsoft-fluentui-blazor/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/KardelRuveyda","download_url":"https://codeload.github.com/KardelRuveyda/github-copilot-modernization-microsoft-fluentui-blazor/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KardelRuveyda%2Fgithub-copilot-modernization-microsoft-fluentui-blazor/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":34673437,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-06-23T02:00:07.161Z","response_time":65,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["azd","azure","bicep","blazor","blazor-server","copilot-modernization","dotnet","fluentui","fluentui-blazor","minimal-api","net10"],"created_at":"2026-06-23T03:01:10.766Z","updated_at":"2026-06-23T03:01:12.517Z","avatar_url":"https://github.com/KardelRuveyda.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# FluentUI Blazor Demo\n\n[![Live Demo](https://img.shields.io/badge/Live%20Demo-Azure%20App%20Service-0078D4?logo=microsoftazure\u0026logoColor=white)](https://app-fluentdemo-web-ygi6c27opusmo.azurewebsites.net/)\n[![Open in GitHub Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/KardelRuveyda/github-copilot-modernization-microsoft-fluentui-blazor?quickstart=1)\n\n🌐 **Live demo:** \u003chttps://app-fluentdemo-web-ygi6c27opusmo.azurewebsites.net/\u003e\nSign in with username `admin` and any non-empty password.\n\nA showcase application built with **.NET 10**, **Blazor Server** and **Microsoft FluentUI Blazor**.\nThe goal of this repository is to demonstrate how the FluentUI Blazor component library can be\nused to build a rich, Azure Portal-style web application — including data grids, charts,\ndialogs, navigation, theming and localization — on top of the latest .NET stack.\n\n\u003e No real backend, no real authentication. Everything runs in-memory so the demo can be\n\u003e cloned and started in a few seconds.\n\n---\n\n## ✨ What this demo shows\n\nThis is a small, opinionated tour of the FluentUI Blazor component library. The pages in\nthis app are intentionally varied so that each one focuses on a different set of components\nand patterns.\n\n| Area | FluentUI components / patterns used |\n| --- | --- |\n| **App shell**         | Custom native HTML shell with `FluentPopover`, `FluentButton`, `FluentIcon`, `FluentSearch`, `FluentDesignTheme`, `FluentToastProvider`, `FluentDialogProvider`, `FluentMenuProvider`, `FluentMessageBarProvider`, `FluentTooltipProvider` |\n| **Navigation**        | `FluentNavMenu`, `FluentNavLink`, `FluentNavGroup`, custom collapsed rail, command-palette style search dropdown |\n| **Login**             | Custom themed login screen, native inputs, `FluentMessageBar`, `FluentButton` with `Loading` state |\n| **Dashboard / Home**  | KPI cards, command bar, service tiles, activity timeline (CSS grid + FluentUI icons) |\n| **Incentives list**   | `FluentDataGrid` with `PropertyColumn`, `TemplateColumn`, sorting, filter chips, three-dot row menu, pagination, status badges |\n| **Create wizard**     | Multi-step form with `FluentSelect`, `FluentTextArea`, `FluentRadioGroup`, `FluentSwitch`, `FluentNumberField`, `FluentDatePicker` |\n| **Reports \u0026 analytics** | KPI cards, **SVG pie / donut / area / line / gauge charts**, **activity heatmap**, leaderboard data grid, Excel export |\n| **Users CRUD**        | Toolbar, `FluentDataGrid` with pagination, `FluentDialog` for create/edit, `FluentSelect`, `FluentSwitch`, `IToastService` |\n| **Resources**         | Split panel with `FluentTreeView` and a detail pane |\n| **Activity log**      | Filterable `FluentDataGrid` with level badges, `FluentPersona`, pagination, Excel export |\n| **Settings**          | `FluentTabs` with five tabs, theme + accent color pickers, security list, system info |\n| **Chat assistant**    | Floating FAB built from FluentUI primitives, button-driven (no AI), keyword routing |\n| **Theming**           | `FluentDesignTheme` with light / dark / system modes and customizable primary color |\n| **Localization**      | Custom `LocalizationService` with EN / TR strings, live switching via the language popover |\n| **Excel export**      | `ExcelExportService` powered by `ClosedXML` + a small `download.js` interop helper |\n\n---\n\n## 🧱 Stack\n\n- **.NET 10** (SDK 10.0.x)\n- **Blazor Server** with `@rendermode InteractiveServer`\n- **Microsoft.FluentUI.AspNetCore.Components** (FluentUI Blazor)\n- **ASP.NET Core Minimal API** (in-memory data store)\n- **ClosedXML** for Excel export\n\n---\n\n## 🗂️ Project structure\n\n```\nsrc/\n├── FluentDemo.Shared   →  DTOs / records shared between API and Web\n├── FluentDemo.Api      →  ASP.NET Core Minimal API with in-memory data\n└── FluentDemo.Web      →  Blazor Server UI (this is where the FluentUI demo lives)\n```\n\nInside `FluentDemo.Web`:\n\n```\nComponents/\n├── App.razor                    → Root document\n├── Routes.razor                 → Router\n├── AuthGuard.razor              → Demo route guard\n├── ChatBot.razor                → Floating assistant UI\n├── Layout/\n│   ├── MainLayout.razor         → Top bar, search palette, rail nav, popovers\n│   ├── NavMenu.razor            → FluentNavMenu / NavGroup / NavLink\n│   ├── EmptyLayout.razor        → Layout used by /login\n│   ├── Breadcrumbs.razor        → FluentBreadcrumb wired to NavigationManager\n│   └── NotifItem.razor          → Reusable notification row\n└── Pages/\n    ├── Login.razor\n    ├── Home.razor               → Dashboard\n    ├── Incentives.razor\n    ├── CreateIncentive.razor    → Wizard\n    ├── Reports.razor            → Charts + heatmap\n    ├── Users.razor\n    ├── UserEditDialog.razor\n    ├── Resources.razor\n    ├── ActivityLog.razor\n    └── Settings.razor\n\nServices/\n├── AuthState.cs                 → Singleton fake auth state\n├── LocalizationService.cs       → EN / TR strings\n├── ThemeService.cs              → Mode + primary color\n├── ExcelExportService.cs        → ClosedXML wrapper + JS interop\n└── ChatBotService.cs            → Button-driven responses\n```\n\n---\n\n## ▶️ Running locally\n\nRequires **.NET 10 SDK**.\n\nOpen two terminals:\n\n**Terminal 1 — API**\n\n```powershell\ndotnet run --project src/FluentDemo.Api\n```\n\n**Terminal 2 — Web**\n\n```powershell\ndotnet run --project src/FluentDemo.Web\n```\n\nThen open the URL printed by the Web project (default: \u003chttp://localhost:5159\u003e).\n\n### Demo credentials\n\n| Field    | Value |\n|----------|-------|\n| Username | `admin` |\n| Password | `123`   |\n\nThe Web app posts to `/api/auth/login` and the API just compares strings —\n**no real authentication, no token, no cookie**. The signed-in state lives in\nthe singleton `AuthState` service inside the Blazor app only.\n\n---\n\n## 🎨 Using FluentUI Blazor — quick reference from this project\n\nA few patterns that come back over and over again in the codebase:\n\n### 1. Registering FluentUI\n\n```csharp\n// Program.cs\nbuilder.Services.AddRazorComponents()\n       .AddInteractiveServerComponents();\n\nbuilder.Services.AddFluentUIComponents();\n\n// Required at the root of the layout:\n// \u003cFluentToastProvider /\u003e\n// \u003cFluentDialogProvider /\u003e\n// \u003cFluentTooltipProvider /\u003e\n// \u003cFluentMessageBarProvider /\u003e\n// \u003cFluentMenuProvider /\u003e\n```\n\n### 2. Theming\n\n```razor\n\u003cFluentDesignTheme @bind-Mode=\"_themeMode\"\n                   CustomColor=\"@Theme.PrimaryColor\"\n                   StorageName=\"fluentui-demo-theme\" /\u003e\n```\n\n### 3. Data grid with template + property columns\n\n```razor\n\u003cFluentDataGrid Items=\"@_rows.AsQueryable()\" ShowHover=\"true\"\n                GridTemplateColumns=\"2fr 1fr 1.2fr 1fr\"\u003e\n    \u003cPropertyColumn Property=\"@(x =\u003e x.FullName)\" Title=\"Name\" Sortable=\"true\" /\u003e\n    \u003cPropertyColumn Property=\"@(x =\u003e x.Amount)\"   Title=\"Amount\" Format=\"N2\" Align=\"Align.End\" /\u003e\n    \u003cTemplateColumn Title=\"Status\"\u003e\n        \u003cFluentBadge Appearance=\"Appearance.Neutral\"\n                     BackgroundColor=\"@StatusBg(context.Status)\"\n                     Color=\"@StatusFg(context.Status)\"\u003e\n            @context.Status\n        \u003c/FluentBadge\u003e\n    \u003c/TemplateColumn\u003e\n\u003c/FluentDataGrid\u003e\n```\n\n### 4. Popovers anchored to native buttons\n\n```razor\n\u003cbutton id=\"btnNotif\" class=\"topbar-iconbtn\"\n        @onclick=\"@(() =\u003e _open = !_open)\"\u003e\n    \u003cFluentIcon Value=\"@(new Icons.Regular.Size20.Alert())\" /\u003e\n\u003c/button\u003e\n\n\u003cFluentPopover AnchorId=\"btnNotif\" @bind-Open=\"_open\"\n               HorizontalPosition=\"HorizontalPosition.Start\"\u003e\n    ...\n\u003c/FluentPopover\u003e\n```\n\n### 5. Toast + dialog services\n\n```csharp\n@inject IToastService Toast\n@inject IDialogService Dialog\n\nToast.ShowSuccess(\"Saved\");\n\nvar dlg = await Dialog.ShowDialogAsync\u003cUserEditDialog\u003e(\n    model,\n    new DialogParameters { Title = \"Edit user\" });\n```\n\n### 6. Excel export with ClosedXML\n\n```csharp\nawait Excel.ExportAsync(\n    $\"users_{DateTime.Now:yyyyMMdd_HHmm}.xlsx\",\n    \"Users\",\n    _filtered,\n    (\"Username\",  x =\u003e x.Username),\n    (\"Full name\", x =\u003e x.FullName),\n    (\"Email\",     x =\u003e x.Email),\n    (\"Role\",      x =\u003e x.Role));\n```\n\n### 7. Charts without an extra library\n\nThe Reports page draws **pie, donut, area, line and gauge** charts using plain SVG\nhelpers (`PiePath`, `DonutPath`, `AreaPath`, `LinePath`) computed in C# and rendered\ninside `FluentCard`s. This keeps the dependency list minimal while still showing\nthat FluentUI plays nicely with custom visualizations.\n\n---\n\n## 🧪 Notes \u0026 limitations\n\n- This is a **demo**. There is no persistence, no auth, no validation hardening.\n- The API and Web ports may differ — check the console output.\n- Some pages (Resources, Activity Log, Settings) use mocked client-side data only.\n- The chat assistant is rule-based; there is no AI involved.\n\n---\n\n## 📜 License\n\nMIT — feel free to fork, copy, and use as a starting point for your own\nFluentUI Blazor experiments.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkardelruveyda%2Fgithub-copilot-modernization-microsoft-fluentui-blazor","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkardelruveyda%2Fgithub-copilot-modernization-microsoft-fluentui-blazor","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkardelruveyda%2Fgithub-copilot-modernization-microsoft-fluentui-blazor/lists"}