An overview of a Blazor Server app for registering volunteers for tasks to assist assit officials at a track meet.

This is a tale of synthesis rather than analysis. Of taking a basic software template and building it up by bolting on functionality. Of taking a working function in the app, generalising it and then reusing it within the project multiple times. Of starting with a simple one-dimensional requirement and adding more requirements in stages as each stage is complete. Of searching the internet or looking back at my previous projects and blog posts for code snippets that implement the additional functionality. Of suggesting new features to the end user, implementing the approved features and then testing them with the end user in a feedback loop; especially with UI features. Of starting with relaxed security but tightening that up as the system is released.

The Basic Requirement

I have previously developed Blazor apps for my Athletics club such as a QR Code Gate contact tracing app and a Gym Bookings app. The club is required to provide helpers, apart from officials for various supplementary duties on the days of interclub competition and for various state championship competitions. Previously this was handled with a paper list of tasks, email and SMS messages and a phone. A lot of work for one person. It was decided that it would be better to have a web site where members and others can volunteer coupled with as Y/N SMS confirmations mechanism much like medical and other appointments. Ok, so we are starting with a 2D requirement!


The end user’s requirement is only that it be online. As a developer, the decision was that the app was to be implemented using Blazor (C#), hosted as an Azure App Service and Azure SQL Database. Entity Framework Core is at the centre of all database functionality. These decisions were made given previous experience as well as having the required tools and an Azure subscription. SMS requirement pointed to using Twilio, which required a learning curve, but was mastered for sending, receiving and forwarding SMS, centred around web and database activities. A private GitHub repository is used for the project.

Initial App

The app was developed as a .NET 5 Blazor Server App with https enabled, an updated edition of Visual Studio 2019. The Server version (as opposed to a WASM) version was chosen so as to be very light weight on Helper’s devices as they will not use the facility very often. Indeed, we only have a need for club members to volunteer a couple of times per season so restricting the processing to the server makes sense. That is, the database activity will all be handled by the server which will do all rendering and respond to submitted forms. From a Blazor perspective, this means Blazor Services rather Blazor Controllers. No GETs or POSTs over http/s, at least initially (until the SMS functionality is incorporated).

For Entity Framework, there are Rounds of competition. Each Round of competition has a Date and Location with various Activities. Each activity has one Helper, a time period, an optional Sheet number and optional Pit number. So the main entities are Round, Activity and Helper.

The main pages for the initial version of the app are:

  • Welcome page
  • Login page
  • Registration Page
  • Logout page
  • A list of Rounds
  • Round page with list of activities for that round to which a helper can volunteer.

The latter page is only viewable by logged in Helpers. The Welcome page has a statement on Privacy and a Thank You.

When a Helper registers, they submit their name and mobile number which are both used for subsequent logins. No password or Pin required. We wanted to keep it simple for these occasional users. We could add a Pin at a later stage but people forget such information so an “I forgot My Pin” page would be required.

The app configuration is contained in an appsettings.json file for such things as Database connectivity. For development a local version of SQL Server Express was used and was hosted in IIS Express. Once in a workable form, both were deployed to Azure. After a while, the Azure SQL was used for deployment as well development.

User and Admin Accounts

The app was configured at setup with Individual User Authentication. Helpers would not though authenticate with this, only Admin level users. A separate table is maintained for Helpers with an “IsAdmin” property which is normally false. Certain users have this set to true manually in the database management tool, not in the app. Such users can then further register with an email address. Admin users have assess to certain extra pages such as adding Rounds and Activities as well as removing helpers. When logged in only as Helper, Admin users have access to some extra pages as well as special privileges on the Round Page such as assigning any helper apart from themselves to an activity.

Next: The following set of Blog Posts cover the implementation of these features as well as extesnions. (Coming)

<  Prev:    
 This Category Links 
Category:Blazor Index:Blazor
  Next: > Blazor Helpers App
<  Prev:   Blazor-IoT