Simple Todo App with Blazor Server and Material Blazor

In order to make my journey in C# more interesting, I insert small projects where I can learn new things. The new target is now Blazor Server, a very interesting Web Technology from Microsoft.

I am trying to find small things to learn and add them to a bigger project later this year, perhaps.
My main tutors on the net were Tim Corey, and maybe Nick Chapsas. You can search them on youtube, they have great content.

The new application I have created is a regular todo app which uses:
- blazor server
- material design https://www.matblazor.com/
- a simple list (no database)

Prerequisites:
- asp.net core 3.1 installed on your machine
- intermediate C# and html

Code is under:
https://github.com/zoltanhalasz/TodoList_BlazorServer.git

The application is live: https://todolist-blazorserver.zoltanhalasz.net/todos

You can add material design to a blazor server project:
1.Install-Package MatBlazor
2.Add @using MatBlazor in main _Imports.razor
3.add to _Host.cshtml (head section)
<script src="_content/MatBlazor/dist/matBlazor.js"></script>
<link href="_content/MatBlazor/dist/matBlazor.css" rel="stylesheet" />

The toaster is added to the todo page: see instructions at: https://www.matblazor.com/Toast

I will explain some of the code and application below.

A. The main model class for the todos:

public class TodoModel
{
public int Id { get; set; }

public string Todo { get; set; }

public DateTime Deadline { get; set; }

public bool IsCompleted { get; set; }

}

B. The layout:
Please read the below examples
https://www.matblazor.com/TextField
https://www.matblazor.com/Checkbox
https://www.matblazor.com/DatePicker
https://www.matblazor.com/Button
See list of icons available:
https://www.matblazor.com/Icon
Toast, see tutorial example:
https://www.matblazor.com/Toast

C. The code-behind:

D. Final result:

My Journey with Blazor Server

In my study of C# alongside Javascript, and working on my projects (asp.net core and WPF), I came across this technology called Blazor.

This attempts to make C# valid across back-end and front-end, possibly avoiding the use of Javascript on the front-end. Blazor, as a part of Asp.Net Core 3.0 and 3.1, has two flavors, Blazor Webassembly and Blazor Server-Side.

My preoccupation is the latter, as it is production ready. The result is, some asp.net applications that are very fast and responsive, and there are lots of free and beautiful components that can add nice design to the web apps.

The tutorials I checked and can recommend, are the following:
Tim Corey's material about Blazor Server:
- introduction : https://youtu.be/8DNgdphLvag
- components: https://youtu.be/JE0tQ4tx0Nc
- free resources: https://youtu.be/i1Kric5tqYk
A tutorial series on youtube from Nick Chapsas:
Checking the free resources I want to highlight now two of them:
1. Material Design Components: https://www.matblazor.com/
My small sample app is here, live.

2. Radzen Blazor Components: https://blazor.radzen.com/
 My small sample app is here, live:  

And I found another beautiful tutorial, which I did not yet check in detail:

https://www.syncfusion.com/ebooks/blazor-succinctly

Overall, I find Blazor Server-Side a very interesting idea, worth exploring further.