Family calendar on MudBlazor with authorization and deployment on Ubuntu
Introduction:
MudBlazor is an ambitious library of components for Blazor, based on the Material design and with an emphasis on ease of use and clear structure. It is ideal for .NET developers who want to quickly create web applications without having to deal with the hassles of CSS and JavaScript. MudBlazor is written entirely in C#, allowing you to easily adapt, modify, or extend the framework. https://mudblazor.com/
The task was to develop a useful application for our family, called “Family Calendar”, which combines functionality from Google, Yandex and Mail for conveniently maintaining a family schedule. I wanted to create an app that would allow us to easily plan and track events, tasks, and important dates in our family.
Installing and configuring MudBlazor:
MudBlazor installation follows the standard procedure, as described in the documentation.
https://mudblazor.com/getting-started/installation#manual-install-add-components
However, there may be some nuances that I encountered when using interactive components.
To update and render interactive components, I had to add the following code:
@if (RenderModeForPage is not null)
{
<HeadOutlet @rendermode="@RenderModeForPage"/>
}
else
{
<HeadOutlet/>
}
</head>
<body>
@if (RenderModeForPage is not null)
{
<Routes @rendermode="@RenderModeForPage"/>
}
else
{
<Routes/>
}
In my calendar rendering application, I decided to use the Heron.MudCalendar library. Although it is not fully functional and has some limitations, it still helped create beautiful component renderings.
https://github.com/danheron/Heron.MudCalendar
Heron.MudCalendar provides convenient tools for working with calendar components such as days, weeks and months. It has flexible settings that allow you to customize the appearance and behavior of components in accordance with the requirements of the project.
Although the library is not completely complete, I was able to use its capabilities to create a beautiful and intuitive calendar interface. It provided me with the tools I needed to display dates, highlight the current date, and navigate through different time periods.
In addition, Heron.MudCalendar also provides the ability to handle events related to date selection or period changes. This allowed me to implement functionality such as date selection, adding events, and schedule management.
Despite some limitations and shortcomings, using the Heron.MudCalendar library significantly simplified the development process and made it possible to create an aesthetically attractive calendar component. Thanks to it, users can enjoy a convenient and pleasant interface when working with the calendar in the application.
Creating Data Models:
In the calendar application, I used a data model based on the Heron.MudCalendar library and added a few additional fields necessary for my purposes.
public class Event : CalendarItem
{
private string _idKey;
public Event()
{
_idKey = Id;
}
public string Master { get; set; } = String.Empty;
public string Title { get; set; } = String.Empty;
public string Location { get; set; } = String.Empty;
public Color Color { get; set; } = Color.Primary;
[Key]
public string IdKey
{
get => _idKey;
set => _idKey = value;
}
}
Define data models for the family calendar, including events, participants, and other required attributes.
Deployment on Ubuntu:
Installing the necessary dependencies on Ubuntu.
In the MudBlazor application, the database runs on SQLite, but this is inconvenient to run in a container. Therefore, I decided to transfer the database to PostgreSQL. This will allow for more flexible database management and provide better compatibility with application containerization.
version: '3.8'
services:
postgres:
ports:
- '5455:5432'
image: postgres:12.3-alpine
restart: always
environment:
- POSTGRES_USER=postgres
- POSTGRES_PASSWORD=example
volumes:
- postgres:/var/lib/postgresql/data
pgadmin-compose:
image: dpage/pgadmin4
environment:
PGADMIN_DEFAULT_EMAIL: "postgres@domain.com"
PGADMIN_DEFAULT_PASSWORD: "password"
ports:
- "16543:80"
depends_on:
- postgres
blazor_calendar:
image: blazor.family.calendar.v.01
restart: always
build:
context: .
dockerfile: ./blazor.famely.calendar/Dockerfile
ports:
- "8080:8080"
- "8081:8081"
depends_on:
- postgres
portainer:
image: portainer/portainer-ce:latest
ports:
- 9443:9443
volumes:
- data:/data
- /var/run/docker.sock:/var/run/docker.sock
restart: unless-stopped
volumes:
postgres:
data:
There was a moment when I did not understand that when deploying an application, it is necessary to update not only the containers, but also the images after fixing the code. This was not so familiar to me, because on Windows in Rider the update occurs automatically.
In conclusion, working with the application was an interesting experience, but there were also some nuances both in the operation of the application itself and in its deployment. For example, I was faced with the fact that when updating the code, the application images also had to be updated, which is different from the automatic updating that I am used to seeing in Rider on Windows. This required some adaptation and care when deploying the application.
Also, while working with the application, some nuances arose that required additional study and solutions. However, through these challenges, I gained valuable experience and learned how to effectively solve problems associated with application development and deployment.
Overall, working with the application was fun and allowed me to expand my knowledge and skills in application development and deployment.
https://github.com/ShadowGreg/blazor.famely.calendar
