Developed and uploaded in February 2022.
GitHub Repository - http://github.com/richard-coffey/BookStoreApp/Demo Hosted on Azure - https://bookstoreappblazor.azurewebsites.net
Type user@bookstore.com/P@ssword1 to login as a normal user and admin@bookstore.com/P@ssword1 to login as an admin.
Admin view of list of books with CRUD actions.
The use case for this website was that of a book store cataloguing their inventory online. The admin user when logged in has full CRUD controls over books and their respective authors (including being able to upload book cover images), while regular users can only browse books and authors.
The latest version of .NET (that being v6) as of early 2022 was selected for this project. I primarily wanted to gain some experience with building a Blazor Server app. To read more about Blazor in general, please read my blog post about it here.
Final solution files in Visual Studio.
Additional tooling for this project included Entity Framework Core (for ORM functions), Postman (for testing the API), Automapper (for mapping DTO’s), Seq (for real-time logging) and NSwag (for easily creating an OpenAPI specification).
What follows is a rough high level order of how I approached designing and then building out this little Blazor project:
Created a blank solution in Visual Studio 2022 and then decided to start with building the API and database first before doing the Blazor client. An API project was created in the solution and before building out the API, I decided to install Serilog an Seq nugget packages to the project, to provide better logging and real time statistics for the API.
The database schema was decided upon at this stage. For this simple app only two tables were needed, one for books and another for authors in a many to many relationship. This schema was created locally in SQL Server Management Studio (SSMS) before performing a database first migration using Entity Framework Core to scaffold the model classes necessary for the API. The DBContext class was also auto generated in order communicate between the database and the code.
The two main controllers for Books and Authors in the API were now created that contained the main CRUD actions for each. At this stage the Automaker nugget package was installed in the project in order to effectively map the data model classes to Data Transfer Object (DTO’s) classes I would now create. These DTO’s provide better separation of concerns between the API and how it will be consumed by any external client.
Now the Microsoft Identity Framework package was installed and commands were run to scaffold the necessary user and role tables int he database for authentication purposes. The controller methods were also decorated with Authorisation tags to lock down certain CRUD actions to Admin users only. Also during this stage, Postman was used to test the API methods.
With the API built, the Blazer Server project was created in the same solution. Swag was used at this stage to easily create an OpenAPI specification from the API endpoint URL, which then automatically generated a Service class to be consumed by the Blazor app. Anytime a change was made to the API’s controllers, NSwag could be rerun to geenrate a new interface file.
The login and register user pages were created and then wired up to the ServiceClient.cs file by way of their own DTO classes. Both client and server side validation techniques were utilised.
The pages for the Authors were created (Details, Create and Edit) and then wired up to the ServiceClient.cs file by way of their own DTO classes. Basic styling of page elements was done using the built in Bootstrap classes that come with any Blazor project.
Similar to the last step, the pages for the Authors were created (Details, Create and Edit) and then wired up to the ServiceClient.cs file by way of their own DTO classes. Additionally, books allows for the upload of a book cover image to be displayed. Local storage on the API project was used to store the images. If I were to refactor and improve upon this project in the future I would move the images to their own Blob Storage account in azure to be stored.
The final stage was to test everything locally before deploying the API and Blazor projects to two different Azure web apps and to transfer the local database to an Azure SQL instance using the built in transfer functionality in SSMS. The final thing was to change the localhost API URL in the Blazer app to use the new Azure hosted one.
Azure resources created for this project.