{"id":23534178,"url":"https://github.com/phmatray/blazormvvmapp","last_synced_at":"2026-04-16T14:01:45.469Z","repository":{"id":269069004,"uuid":"906327443","full_name":"phmatray/BlazorMvvmApp","owner":"phmatray","description":"Blazor MVVM Todo App demonstrating the Model-View-ViewModel pattern with CommunityToolkit.Mvvm","archived":false,"fork":false,"pushed_at":"2026-03-09T12:23:16.000Z","size":39,"stargazers_count":1,"open_issues_count":1,"forks_count":0,"subscribers_count":1,"default_branch":"dev","last_synced_at":"2026-03-09T14:59:36.182Z","etag":null,"topics":["aspnet-core","blazor","blazor-components","communitytoolkit","component-based","csharp","design-patterns","dotnet","dotnet-mvvm","frontend","mvvm","razor","todo-app","web-development"],"latest_commit_sha":null,"homepage":"","language":"C#","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/phmatray.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","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":"2024-12-20T16:45:15.000Z","updated_at":"2026-03-09T11:11:35.000Z","dependencies_parsed_at":"2025-08-18T05:34:22.428Z","dependency_job_id":"4c64e2ee-7b85-4caf-8b83-15f4f50c04b9","html_url":"https://github.com/phmatray/BlazorMvvmApp","commit_stats":null,"previous_names":["phmatray/blazormvvmapp"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/phmatray/BlazorMvvmApp","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/phmatray%2FBlazorMvvmApp","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/phmatray%2FBlazorMvvmApp/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/phmatray%2FBlazorMvvmApp/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/phmatray%2FBlazorMvvmApp/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/phmatray","download_url":"https://codeload.github.com/phmatray/BlazorMvvmApp/tar.gz/refs/heads/dev","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/phmatray%2FBlazorMvvmApp/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31888935,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-16T11:36:10.202Z","status":"ssl_error","status_checked_at":"2026-04-16T11:36:09.652Z","response_time":69,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"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":["aspnet-core","blazor","blazor-components","communitytoolkit","component-based","csharp","design-patterns","dotnet","dotnet-mvvm","frontend","mvvm","razor","todo-app","web-development"],"created_at":"2024-12-26T00:15:32.277Z","updated_at":"2026-04-16T14:01:45.423Z","avatar_url":"https://github.com/phmatray.png","language":"C#","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Blazor MVVM Todo App\n\nWelcome to the **Blazor MVVM Todo App**, a modern, scalable, and maintainable web application built using the [Blazor](https://dotnet.microsoft.com/apps/aspnet/web-apps/blazor) framework and adhering to the [Model-View-ViewModel (MVVM)](https://en.wikipedia.org/wiki/Model–view–viewmodel) architectural pattern. This application leverages the [CommunityToolkit.Mvvm](https://github.com/CommunityToolkit/dotnet/tree/main/src/CommunityToolkit.Mvvm) package to streamline MVVM implementations, reducing boilerplate code and enhancing developer productivity.\n\n## 📋 Table of Contents\n\n\u003c!-- TOC --\u003e\n* [Blazor MVVM Todo App](#blazor-mvvm-todo-app)\n  * [📋 Table of Contents](#-table-of-contents)\n  * [🌟 Features](#-features)\n  * [🛠 Technologies Used](#-technologies-used)\n  * [🗂 Project Structure](#-project-structure)\n    * [📄 File Descriptions](#-file-descriptions)\n  * [🚀 Getting Started](#-getting-started)\n    * [📝 Prerequisites](#-prerequisites)\n    * [📥 Installation](#-installation)\n    * [▶️ Running the Application](#-running-the-application)\n  * [🎮 Usage](#-usage)\n    * [**Todo Page (`/todos` or `/`)**](#todo-page-todos-or-)\n    * [**Stats Page (`/stats`)**](#stats-page-stats)\n  * [🏛 Architecture Overview](#-architecture-overview)\n    * [**Models**](#models)\n    * [**ViewModels**](#viewmodels)\n    * [**Services**](#services)\n    * [**Components**](#components)\n  * [🤝 Contributing](#-contributing)\n    * [📌 Guidelines](#-guidelines)\n  * [📄 License](#-license)\n  * [📞 Contact](#-contact)\n\u003c!-- TOC --\u003e\n\n## 🌟 Features\n\n- **Todo Management:**\n    - **Add Todos:** Easily add new todo items with a title.\n    - **Toggle Completion:** Mark todos as complete or incomplete.\n    - **Load Todos:** Asynchronously load additional todos.\n\n- **Statistics:**\n    - **Total Todos:** View the total count of todos, including initial and loaded items.\n\n- **MVVM Architecture:**\n    - **Decoupled ViewModels:** `TodoViewModel` and `StatsViewModel` operate independently, interacting through a shared data service.\n    - **Observable Properties:** Automatic property change notifications ensure seamless UI updates.\n\n- **CommunityToolkit.Mvvm Integration:**\n    - **Simplified Commands:** Utilize `[RelayCommand]` and `[ObservableProperty]` attributes to reduce boilerplate.\n    - **Shared Data Service:** A centralized `TodoService` manages todo items, promoting a single source of truth.\n\n## 🛠 Technologies Used\n\n- **Frameworks \u0026 Libraries:**\n    - [**Blazor**](https://dotnet.microsoft.com/apps/aspnet/web-apps/blazor): A framework for building interactive client-side web UI with .NET.\n    - [**CommunityToolkit.Mvvm**](https://github.com/CommunityToolkit/dotnet/tree/main/src/CommunityToolkit.Mvvm): Provides utilities and components to implement the MVVM pattern effectively.\n\n- **Languages:**\n    - **C#**: Primary programming language.\n    - **Razor**: Markup syntax for building Blazor components.\n\n- **Tools:**\n    - **.NET SDK**: For building and running the application.\n    - **Visual Studio / Visual Studio Code**: Recommended IDEs for development.\n\n## 🗂 Project Structure\n\n```\nBlazorMvvmApp/\n├── Components/\n│   │   App.razor\n│   └── ViewModelComponentBase.cs\n├── Features/\n│   ├── Stats/\n│   │   ├── StatsViewModel.cs\n│   │   └── Stats.razor\n│   └── Todos/\n│       ├── TodoItem.cs\n│       ├── TodoViewModel.cs\n│       └── Todos.razor\n├── Services/\n│   ├── ITodoService.cs\n│   └── TodoService.cs\n├── DependencyInjections.cs\n└── Program.cs\n```\n\n### 📄 File Descriptions\n\n- **Components/App.razor:**\n    - Root component of the Blazor application, configuring routing.\n\n- **Components/ViewModelComponentBase.cs:**\n    - A base Blazor component that handles `PropertyChanged` events from ViewModels to trigger UI updates.\n\n- **Features/Stats/StatsViewModel.cs:**\n    - ViewModel responsible for tracking and updating the total count of todos.\n\n- **Features/Stats/Stats.razor:**\n    - Blazor component that displays statistics, specifically the total number of todos.\n\n- **Features/Todos/TodoItem.cs:**\n    - Model representing a single todo item with properties like `Title` and `IsComplete`.\n\n- **Features/Todos/TodoViewModel.cs:**\n    - ViewModel managing todo items, including adding new todos and loading additional ones asynchronously.\n\n- **Features/Todos/Todos.razor:**\n    - Blazor component for displaying and interacting with the todo list.\n\n- **Services/ITodoService.cs \u0026 Services/TodoService.cs:**\n    - Shared data service managing the collection of todos, ensuring a single source of truth across ViewModels.\n\n- **DependencyInjections.cs:**\n    - Extension methods for registering services and ViewModels with the Dependency Injection (DI) container.\n\n- **Program.cs:**\n    - Entry point of the Blazor application, configuring services and building the host.\n\n## 🚀 Getting Started\n\nFollow these instructions to set up and run the project locally.\n\n### 📝 Prerequisites\n\n- **.NET SDK 9.0 or later:**  \n  Ensure you have the [.NET SDK](https://dotnet.microsoft.com/download) installed.\n\n- **IDE:**\n    - [Visual Studio 2022](https://visualstudio.microsoft.com/vs/) or later with the ASP.NET and web development workload.\n    - Alternatively, [Visual Studio Code](https://code.visualstudio.com/) with the C# extension.\n    - Or even better, [JetBrains Rider](https://www.jetbrains.com/rider/).\n\n### 📥 Installation\n\n1. **Clone the Repository:**\n\n   ```bash\n   git clone https://github.com/phmatray/BlazorMvvmApp.git\n   ```\n\n2. **Navigate to the Project Directory:**\n\n   ```bash\n   cd BlazorMvvmApp\n   ```\n\n3. **Restore Dependencies:**\n\n   ```bash\n   dotnet restore\n   ```\n\n4. **Install CommunityToolkit.Mvvm Package:**\n\n   The `CommunityToolkit.Mvvm` package is already referenced in the project. If not, install it via the CLI:\n\n   ```bash\n   dotnet add package CommunityToolkit.Mvvm\n   ```\n\n### ▶️ Running the Application\n\n1. **Build the Project:**\n\n   ```bash\n   dotnet build\n   ```\n\n2. **Run the Application:**\n\n   ```bash\n   dotnet run\n   ```\n\n3. **Access the Application:**\n\n   Open your browser and navigate to `https://localhost:5001` or the URL specified in the terminal output.\n\n## 🎮 Usage\n\n### **Todo Page (`/todos` or `/`)**\n\n- **Add a Todo:**\n    1. Enter a title in the input field.\n    2. Click the \"Add\" button.\n    3. The new todo appears in the list.\n\n- **Toggle Completion:**\n    - Click the checkbox next to a todo to mark it as complete or incomplete.\n\n- **Load More Todos:**\n    - Click the \"Load Todos\" button to asynchronously load additional todos.\n\n### **Stats Page (`/stats`)**\n\n- **View Total Todos:**\n    - Displays the total count of todos, including both initial and loaded items.\n\n## 🏛 Architecture Overview\n\nThe application follows the MVVM pattern, separating concerns into Models, ViewModels, and Views (Blazor components).\n\n### **Models**\n\n- **TodoItem:**\n    - Represents the data structure for a todo item.\n\n### **ViewModels**\n\n- **TodoViewModel:**\n    - Manages the collection of todos, handles adding new todos, and loading additional todos asynchronously.\n\n- **StatsViewModel:**\n    - Monitors the total count of todos by subscribing to changes in the `ITodoService`.\n\n### **Services**\n\n- **ITodoService \u0026 TodoService:**\n    - A shared service that manages the `ObservableCollection\u003cTodoItem\u003e`. Acts as a single source of truth for the todo items, allowing ViewModels to interact with it without direct dependencies on each other.\n\n### **Components**\n\n- **ViewModelComponentBase:**\n    - A base component that subscribes to `PropertyChanged` events from ViewModels to trigger UI updates (`StateHasChanged`).\n\n- **Todos.razor:**\n    - UI component for displaying and interacting with the todo list.\n\n- **Stats.razor:**\n    - UI component for displaying statistics related to todos.\n\n## 🤝 Contributing\n\nContributions are welcome! Follow these steps to contribute to the project:\n\n1. **Fork the Repository:**\n\n   Click the \"Fork\" button at the top-right corner of the repository page.\n\n2. **Clone Your Fork:**\n\n   ```bash\n   git clone https://github.com/phmatray/BlazorMvvmApp.git\n   cd BlazorMvvmApp\n   ```\n\n3. **Create a Feature Branch:**\n\n   ```bash\n   git checkout -b feature/YourFeatureName\n   ```\n\n4. **Commit Your Changes:**\n\n   ```bash\n   git commit -m \"Add your detailed description of changes\"\n   ```\n\n5. **Push to Your Fork:**\n\n   ```bash\n   git push origin feature/YourFeatureName\n   ```\n\n6. **Create a Pull Request:**\n\n   Navigate to your fork on GitHub and click the \"Compare \u0026 pull request\" button.\n\n### 📌 Guidelines\n\n- **Code Quality:**  \n  Ensure your code follows best practices and is well-documented.\n\n- **Testing:**  \n  Include unit tests for new features or significant changes.\n\n- **Commit Messages:**  \n  Write clear and descriptive commit messages.\n\n## 📄 License\n\nThis project is licensed under the [MIT License](LICENSE).  \nSee the [LICENSE](LICENSE) file for details.\n\n---\n\n## 📞 Contact\n\nFor any questions, suggestions, or support, please open an issue in the [GitHub repository](https://github.com/phmatray/BlazorMvvmApp/issues).\n\n---\n\nThank you for checking out the **Blazor MVVM Todo App**! We hope it serves as a solid foundation for your Blazor projects using the MVVM pattern.","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fphmatray%2Fblazormvvmapp","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fphmatray%2Fblazormvvmapp","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fphmatray%2Fblazormvvmapp/lists"}