Blazor Hero – Clean Architecture Template Quick Start Guide

Blazor Hero 2.0

In this article, we will learn about getting started with Blazor Hero – A Clean Architecture Template built for Blazor WebAssembly using MudBlazor Components. This project will make your Blazor Learning Process much easier than you anticipate. Blazor Hero is meant to be an Enterprise Level Boilerplate, which comes free of cost, completely open sourced. So, If you do like this Boilerplate, do consider supporting me with a coffee maybe? 😉 Let’s get started.

Blazor Hero v2.0 is now available with lots of awesome features!

Here is a complete video overview of BlazorHero! Do Like and Subscribe to my Youtube Channel!

Important Links

Here are a few of the quick links that will help you with the process of getting used to Blazor Hero.

Prerequisites

  • Make sure you are running on the latest .NET 5 SDK (SDK 5.0 and above only). Get the latest one here.
  • Visual Studio 2019 (v16.8+) ( You can check out my Installation Guide of Visual Studio 2019 Community which is completely Free to use.) Make sure that ASP.NET and web development workload is installed.
  • Install the latest DOTNET & EF CLI Tools by using this command – dotnet tool install –-global dotnet-ef 
  • I recommend that you read Onion Architecture In ASP.NET Core With CQRS – Detailed article to understand this implementation much better. This project is just an Advanced Version of the mentioned article.
  • Once you clear with Onion Architecture Implementation, you will also need to be aware of CQRS MediatR Pattern. I have written a step-by-step guide on how to implement CQRS using MediatR Library. Read it here.

Getting Started With Blazor Hero – Clean Architecture Template

Blazor Hero is available as a NuGet Package for you to install. Fire up Command Prompt and run the following command.

dotnet new --install BlazorHero.CleanArchitecture

This will install the entire Solution Template to your machine so that you can generate Awesome Blazor WebAssembly projects using this template and a line of CLI Command. Let’s see a walkthrough. Note that these steps are also demonstrated in the Video that I have mentioned in the Important Links Section on this Guide.

Important: If you were already using BlazorHero v1.x, run this command to upgrade to v2.0

dotnet new --install BlazorHero.CleanArchitecture::2.0.0

Once the package is installed, it will be available globally on your machine. Let’s open up the command prompt again and change the directory to your actual working directory. Mine is D:\Repositories\

cd /d D:\Repositories\

Now that we are at the Working Directory, let’s use a CLI command that would generate a Blazor Hero templated Solution with your own custom Namespace!

dotnet new BlazorHero.CleanArchitecture -n WarehouseManger
image Blazor Hero - Clean Architecture Template Quick Start Guide

You can see the success message which states your templated project has been created. Let’s check out the Repositories\WarehouseManager Folder.

image 1 Blazor Hero - Clean Architecture Template Quick Start Guide

This Solution follows an Onion Architecture for better maintainability and scalability of the associated project. You can see that all the Layers of the Solutions are created with your custom namespace. Cool, yeah? Let’s open up the solution file. Wait for Visual Studio to finish installing all the required packages. You can see the Folder Structure of the Project below.

image 2 Blazor Hero - Clean Architecture Template Quick Start Guide

Make sure that you set the YourNamespace.Server project as the startup project.

By default, the localdb instance of your SQLServer is used as the Data Source with your namespace as the DB Name. Feel free to change the connection strings which are located at the appsettings.json and appsettings.Development.json in the Server Project.

"ConnectionStrings": {
  "DefaultConnection": "Data Source=(localdb)\\mssqllocaldb;Initial Catalog=WarehouseManger;Integrated Security=True;MultipleActiveResultSets=True"
},

Once you have fixed up your connection string, the next step is to create the database and update it. For this, open up the package manager console and set the default project as the YouNamespace.Insfrastructure project. Make sure that the YourNamespace.Server is set as the startup project as well. This is because all the packages and DBContexts related to building / migrating EFCore SQL Server databases are installed in the Infrastructure project.

image 4 Blazor Hero - Clean Architecture Template Quick Start Guide

With that done, run the following command.

update-database

Note that I have already added the latest migrations of the database. You need not run the add-migration command again.

Important : With the release of v2.0, there are lots of schema changes to the application entity definition. Make sure that you are not using the database of Blazor Hero v1.x. Make sure you have a fresh database.

image 5 Blazor Hero - Clean Architecture Template Quick Start Guide

Once the database migration is done, you will be able to see the newly created database in the server explorer. Default Data like Roles and Users will be seeded into the database when you run the application for the first time.

image 7 Blazor Hero - Clean Architecture Template Quick Start Guide

Note that this screenshot is just a demonstration. You will actually have much more tables than this.

With the database migrations done, we are good to go. I personally recommend using the Kestrel Server instead of the IIS Server Variant. To switch to Kestrel, do the following.

image 9 Blazor Hero - Clean Architecture Template Quick Start Guide

Once you run the application with Kestrel, you can see the below terminal popup. Here you can note that some default data is seeded while the application is run for the first time. This includes default roles, users, and permissions.

image 10 Blazor Hero - Clean Architecture Template Quick Start Guide

Let’s have a quick overview/guide of getting along with Blazor Hero.

Login Page

Here is the login page that gave you the initial taste of Blazor Hero and MudBlazor Components! To get started quickly, I have added two buttons to fill in the credentials of the default Administrator and Basic Users.

image 11 Blazor Hero - Clean Architecture Template Quick Start Guide

Database Seeding

While the application starts for the first time, default data is seeded to the database.

Roles

  • Administrator – Has All the permissions to access each and every resource.
  • Basic

Users

Here are the default users registered to the system on startup. The below list follows the following format – email / password / role

  • mukesh@blazorhero.com / 123Pa$$word! / admin
  • john@blazorhero.com / 123Pa$$word! / basic

Overall UI

Once you are logged in, you will get to see the below screen.

  • Navigation Menu – Top
  • App Drawer – Sidebar
  • Body
image 12 Blazor Hero - Clean Architecture Template Quick Start Guide

Blazor Hero is completely built with MudBlazor Component Library. A huge shoutout to the entire team! 😀 Mudblazor actually makes your apps look stunning by making no compromises on the features as well.

Mailing

Currently, the mailing service is enabled for sending User Registration, Reset Password Emails. I have implemented SMTP Services for sending out emails. Feel free to make separate implementations for other mail services like SendGrid. You would just have to add the implementation in the Infrastructure.Shared Project and something like a SendGridMailService under the services folder. Make sure to implement it from the IMailService interface.

By default, all the mails are configured to bounce to an Ethereal mailbox that is meant for test purposes only. You can find the ethereal configuration under the appsettings.json. This means that whoever be the recipient of the mail, it actually ends up in ethereal mailbox only. Pretty cool to have this while testing.

"MailConfiguration": {
  "From": "info@codewithmukesh.com",
  "Host": "smtp.ethereal.email",
  "Port": 587,
  "UserName": "adaline.pfannerstill49@ethereal.email",
  "Password": "vAKmWQB8CyPUBg8rBQ",
  "DisplayName": "Mukesh Murugan"
},

Note that you can generate your own ethereal mailbox credentials by visiting here.

User Registration

If you are logged in as an Administrator, you get permissions to add new users to the system. Let’s add one!

Navigate to /identity/users by clicking on Users in the sidebar. Here you get to see all the registered users.

image 12 Blazor Hero - Clean Architecture Template Quick Start Guide

From here, click on the Register New User button.

image 13 Blazor Hero - Clean Architecture Template Quick Start Guide

IMPORTANT – Make sure that the username you enter is 6 characters or longer.

Click Register after filling in the details. You can notice the two checkboxes.

  • Activate User – This system has additional security that even after registration, the user should be approved by the administrator to access the resource. Unless the user is active, he/she will be locked out of the system. To skip this, check the Activate User box.
  • Auto-Confirm Email – To register a new account with the system, the user has to confirm his/her email. BlazorHero sends an activation mail to the registered Email Id. In our case, by default, the registration mail goes to the ethereal mailbox. Again, to skip the part where the email has to confirmed, just check the Auto-Confirm Email checkbox.

Once the user is registered, an Email gets scheduled as a Background Job via Hangfire which then sends it to the Ethereal Mailbox.

image 14 Blazor Hero - Clean Architecture Template Quick Start Guide

Apart from this, users can also anonymously register into the application by navigating to the /register page. This is a feature added with version 2.0.

image 13 Blazor Hero - Clean Architecture Template Quick Start Guide

Email Confirmation

Here is the email confirmation that got delivered to Ethereal Mailbox.

image 15 Blazor Hero - Clean Architecture Template Quick Start Guide

On clicking the supplied link, the email id of the user gets confirmed with the system. As simple as that.

image 16 Blazor Hero - Clean Architecture Template Quick Start Guide

User Activation

Now that the new user’s mail id is confirmed, it’s time to activate his account. Note that only administrators can do this. Click on View Profile under the User’s Dropdown.

image 17 Blazor Hero - Clean Architecture Template Quick Start Guide

Here, check the Active checkbox and click Save Changes. That’s it! This is how an Administrator can activate/deactivate users.

image 18 Blazor Hero - Clean Architecture Template Quick Start Guide

Serilog

Here is the default provided configuration for Serilog. As of now, the logs are written to text files locally to the application. To add in Database logging with Serilog in ASP.NET Core, refer to this article.

"Serilog": {
  "MinimumLevel": {
    "Default": "Information",
    "Override": {
      "Microsoft": "Error",
      "Microsoft.Hosting.Lifetime": "Information",
      "System": "Information",
      "Hangfire": "Warning"
    }
  },
  "WriteTo": [
    {
      "Name": "Console",
      "Args": {
        "outputTemplate": "{Timestamp} [{Level}] {Message}{NewLine:1}"
      }
    },
    {
      "Name": "File",
      "Args": {
        "path": "Logs\\log.txt",
        "rollingInterval": "Day"
      }
    }
  ],
  "Enrich": [
    "FromLogContext",
    "WithMachineName",
    "WithProcessId",
    "WithThreadId"
  ],
  "Properties": {
    "Application": "WarehouseManger.Server"
  }
}

Feel free to support the project by buying me a couple of coffees maybe? 😉

Swagger

Every API Developer’s favourite tool, Swagger! Navigate to /swagger to access Swagger.

I have not yet added Swagger Documentation for the API. If anyone is willing to help me out in this part, do make the required contribution to the project’s repository.

image 24 Blazor Hero - Clean Architecture Template Quick Start Guide

CRUD Operations

Let’s see some CRUD now.

Open up the Brands Page. Here you get to see a Table for listing out all the Registered brands. Since it’s empty, let’s add a new one.

image 26 Blazor Hero - Clean Architecture Template Quick Start Guide
image 25 Blazor Hero - Clean Architecture Template Quick Start Guide

Once a couple of brands are entered. Let’s add in products. Navigate to the Product Page. Here is a more advanced ADD Modal with Select Componet and an Image component. Add in some dummy data and click Save.

image 28 Blazor Hero - Clean Architecture Template Quick Start Guide

There you go! Similarly, you can Edit and Delete Products/Brands by clicking on the Actions dropdown against each of the entities. Pretty Self Explanatory, yeah?

image 27 Blazor Hero - Clean Architecture Template Quick Start Guide

Dashboard

Here is a cool-looking dashboard with an intention to give quick insights into what’s actually happening within the application. From here you get to see the total count of products, brands, registered users, and roles.

image 29 Blazor Hero - Clean Architecture Template Quick Start Guide

Down the roadmap, I will be implementing SignalR to the dashboard so that any new entries/deletions of entities will be notified in real-time. Probably in BlazorHero 2.0. Feel free to contribute this to code if you like 😉

UPDATE
The above-mentioned feature is implemented in Blazor Hero v2.0. The below recording demonstrates the same. Thanks to SignalR!

source Blazor Hero - Clean Architecture Template Quick Start Guide

Realtime Chat with SignalR and Identity

Documentation for this section will added soon. This is an already available feature.

source Blazor Hero - Clean Architecture Template Quick Start Guide

Audit Trails

Documentation for this section will added soon. This is an already available feature.

image 14 Blazor Hero - Clean Architecture Template Quick Start Guide

Document Store

Documentation for this section will added soon. This is an already available feature.

image 15 Blazor Hero - Clean Architecture Template Quick Start Guide
image 16 Blazor Hero - Clean Architecture Template Quick Start Guide

Export to Excel

Documentation for this section will added soon. This is an already available feature.

image 17 Blazor Hero - Clean Architecture Template Quick Start Guide

Roles & Permissions

Roles & Permissions are the vital part of Application Security. In this project, let’s see how these features are implemented.

The Administrator by default gets to add, modify and delete Roles. Navigate to Roles.

Note that you will not be able to delete the Standard Roles (Administrator & Basic) from the system, even with Administrator privileges.

image 30 Blazor Hero - Clean Architecture Template Quick Start Guide

Let’s create a new Manager Role!

image 31 Blazor Hero - Clean Architecture Template Quick Start Guide

I have designed the system so that Permissions are attached to User Roles, rather than Users or anything static. This gives a lot of flexibility and less complex code as well. You can Manage the Permissions of Roles by clicking the associated Actions Dropdown and selecting the Manage Permissions option.

image 32 Blazor Hero - Clean Architecture Template Quick Start Guide

Here you get to check the required permissions for the selected User Role. As simple as that 😉

image 33 Blazor Hero - Clean Architecture Template Quick Start Guide

Forgot/Reset Password

(Documentation Coming Soon)

In the Login Page, you get an option to reset the password if you forgot it by any change. Here is the flow of the Password Reset Process.

User clicks the Forgot Password Button on the Login Page. Gets redirected to the below page, where the user has to enter in his/her email address.

image 34 Blazor Hero - Clean Architecture Template Quick Start Guide

On Submission, an email with a link to reset the user password gets sent to the email id of the registered user. In our case, it will drop into the Ethereal Mailbox. Here is how the email would look like.

image 35 Blazor Hero - Clean Architecture Template Quick Start Guide

Upon Link Click, the user would have to re-enter the actual email id and set a new password for his/her account. This will immediately update the user’s password.

image 36 Blazor Hero - Clean Architecture Template Quick Start Guide

Password Reset Succeeded!

image 37 Blazor Hero - Clean Architecture Template Quick Start Guide

Profile Picture

A standard feature of the project – To upload User Profile Picture. The uploaded images will be stored as Data URLs in the database. I am planning to shift to a more file-system-based image upload mode. Any thoughts on this?

Furthermore, you can also update profile details as well as change the user password in the Security Tab of the Accounts Page.

image 23 Blazor Hero - Clean Architecture Template Quick Start Guide

Dark Mode

image 21 Blazor Hero - Clean Architecture Template Quick Start Guide
image 22 Blazor Hero - Clean Architecture Template Quick Start Guide

Localization

Blazor Hero, as of now supports French, English, Khmer, German and Spanish. Although few of the translations are missing, it’s growing on a regular basis, Thanks to the contributors! Feel free to add in some missing translations as well!

image 20 Blazor Hero - Clean Architecture Template Quick Start Guide

Hangfire

To access the Hangfire dashboard, navigate to /jobs. As of now, this dashboard does not need permissions. It will be added in the upcoming versions of the project.

image 19 Blazor Hero - Clean Architecture Template Quick Start Guide

Contribution Needed

  •  Need someone to add in the API Documentation for Swagger.
  •  Need someone to implement localization throughout every Razor Component of the solution under the WASM(Client) Project. You can take the Pages/Authentication/Login.razor as the point of reference. It is as simple as adding @inject Microsoft.Extensions.Localization.IStringLocalizer<Login> localizer to every page, changing the texts to @localizer["Text Here"] and finally adding resx files to the Resources Folder as per the folder structure.
  •  Need few contributors to add in various language translations as per the implemented Location. I got time to only add a few translations for French as of now.
  •  Need a UI contributor to look at the UX/UI of the entire project
  •  Need someone to buildup a cool Material Logo for BlazorHero (BH) 😀 Do contact me on LinkedIn (https://www.linkedin.com/in/iammukeshm/).
  •  And finally, Stars from everyone! 😀

Version History

Version 2.0.0NuGet | Github Release – 13 April 2021

  •  Play Notification Tone when a new Chat Message is received.
  •  Auto-Scroll to the Last Message when a new Chat Message is received.
  •  Registration Page for Unauthorized User (Currently only Admins can register new users)
  •  Realtime Notifications – Dashboard Updates Realtime
  •  Logout Users / Regenerate Token from Multiple Client Browsers when Permission Changes
  •  FIX: Token Issue Fixed from v1.0.1
  •  User Images in Chat Component
  •  Chat – Integrated with Identity to support Private Chats (Will require re-migrating the DB schemas)
  •  Notifications System using SignalR
  •  Document Management
  •  Export to Excel
  •  Audit Trails

Version 1.0.1NuGet | Github Release – 19 March 2021

  • Added Forgot / Reset Password
  • HTTP Interceptor
  • Code Cleanup
  • Refresh Tokens
  • Auto-Logout if Refresh Tokens Fail

Version 1.0.0NuGet | Github Release – 19 March 2021

  • Initial Release
  • Mudblazor Component Library
  •  .NET 5.0+
  •  Blazor Web-Assembly: ASP.NET Core Hosted
  •  Onion Architecture
  •  Persistent Dark Mode (Local Storage)
  •  Service-Based Approach
  •  MediatR at API Level
  •  AutoMapper
  •  API Versioning
  •  JWT Authentication
  •  Serilog – Server-Side Only*
  •  Complete User Management
  •  Profile Picture
  •  Clean Fluid UI
  •  CRUD Functionalities
  •  Custom Error Pages
  •  Localization
  •  Role Management
  •  User-Role Management
  •  Swagger
  •  Middlewares
  •  Favicon
  •  Default User & Role Seeding
  •  Dynamic Service Registration (WASM)
  •  Auto DB Migrations
  •  Paginated API Responses
  •  Polly – Retry Pattern for HttpClient
  •  Shared Email Service
  •  Hangfire Implementation
  •  Custom API Response for 500,401,403
  •  Specification Pattern
  •  Permission-Based UI Rendering

Did you Love Blazor Hero?

Consider supporting me by buying me a coffee.

Thank you for visiting. You can now buy me a coffee by clicking the button below. Cheers!

Similar Posts

Leave a Reply

Your email address will not be published. Required fields are marked *

29 Comments

  1. Hi Mukesh
    I am wanting to use Blazorhero in a SAAS application. Users need to be able to register ON THEIR OWN, not through the administrator.
    Should there not be a menu item at top right allowing this as is common in .net core apps ?
    I would be grateful if you would shed some light on this?
    Many thanks
    Luke

  2. Hi!
    I am trying to follow your steps but update-database command does not work and shows this error:
    PM> update-database
    Build started…
    Build succeeded.
    The specified deps.json [C:\Users\saqib.khan.SDD\source\repos\BlazorHero.CleanArchitecture1\BlazorHero.CleanArchitecture1\BlazorHero.CleanArchitecture1\Client\bin\Debug\net5.0\BlazorHero.CleanArchitecture1.Client.deps.json] does not exist

    Please help.

      1. Saqib Khan ha
        I’ll answer you. If you generate your project using the command line everything is fine, if instead you use the VisualStudio wizard obviously some references are lost and the migrations no longer work correctly

    1. Saqib Khan ha
      I’ll answer you. If you generate your project using the command line everything is fine, if instead you use the VisualStudio wizard obviously some references are lost and the migrations no longer work correctly

  3. You put a lot of work into this, nice job; very high quality. I know this is brand new off the presses and you’re still finishing things up, but maybe someday a GraphQL version of this would be great, maybe with Hot Chocolate. If your thinking of your next project that is and needed an idea. In the meantime, I’ll check this out. Thanks again.

  4. Hi Mukesh,

    I would like to ask to project structure. Im not sure if i understand it correctly.Client project is dependent on Web project and its not designed to run it separetly like Blazor webassembly or Blazor server?

    Or if you can write few words about this section i would be very happy.

    Thank you very much.

    1. Hi Radim, This is a very usual WebAssembly implementation with ASP.NET Core Hosting Model. The project dependencies are what you get normally out of the box with Blazor WASM. You will have to set the Server as the startup project to fire up the entire application.

      Regards.

  5. Awesome piece of knowledge, specially for someone new to dotnet – like me.
    For any others who want to run this code on mac, You have to change few things.

    – install docker + mssql in it ( standard docker installer for mac )
    than from terminal:
    docker run -e ‘ACCEPT_EULA=Y’ -e ‘MSSQL_SA_PASSWORD=YourSTRONG!Passw0rd’ -p 1401:1433 -d microsoft/mssql-server-linux:2017-latest
    – generate new sln like in this article and change like follow:
    in files appsettings.Development.json appsettings.json change db configure string into: “Data Source=192.168.0.110,1401;Initial Catalog=WarehouseDb;Persist Security Info=True;User ID=SA;Password=YourSTRONG!Passw0rd;Pooling=False”
    – restore solution nuget packages, set run to Warehouse.server
    – go to terminal into: /WarehouseManager.Insfrastructure & launch:
    dotnet tool install -g dotnet-ef
    dotnet-ef database update -s ../WarehouseManager/Server

    than you can successfuly run this project

    for testing and education purpose you may consider changing mssql into sqlite – much simpler to work with ‘core’ dotnet in mac / linux / mobile
    there is a lot of useful packages you use – according to your other excellent article (onion..) writing separate article how to embed every used tool maybe good idea ; yes – i know this is a lot of work
    once again – great article, every small project should have scalable architecture from the begining

    1. Hi Luke , Thanks for the feedback. Do you have any suggestions or feedback regarding the project.

      Thanks for the instructions regarding Mac as well. Will post this to the blog shortly.

      Regards

  6. Hello!

    Thanks for the excellent work! Could you maybe explain a bit more about all the different projects you use ini the solution and the reasoning behind it?

    Thanks!

    1. Hi Mike, Thanks for the feedback. As far as the Project structuring is concerned, I am using an Onion/Hexagonal Architecture with Separation Of Concerns. This is the architectural design I use in most of the production applications as well. As mentioned in the Important Links section of this article, please go through this guide to understand the reasons behind each and every projects – https://codewithmukesh.com/blog/onion-architecture-in-aspnet-core/

      Regards

      1. Hello!
        Thanks, I did read through this article but the BlazorHero template seems to be an extension of this approach with additional bits. Could you maybe explain the separation of concern for the different projects in summary? e.g. Infrastructure vs InfrastructureShared vs Shared and also which project should reference them?
        Thanks for your help!

  7. This looks really great. I’ll have a play with it in the next week or so and give some feedback.

    Thanks heaps!
    Sandy

  8. Hi Mukesh,
    congratulations, great job, a perfect starting point for admin type projects, but I would ask you for a system to generate the Blazor Client project with PWA support (like –pwa option)

    Thanks!

  9. Hi Mukesh,
    Really, it is great article. However, I am unable to populate all the tables in the database, it is showing only 10 tables related to users. You did not mentioned how to add migration just added update-database.
    Can you please advise.

    1. Hi, Thanks!
      Since all the required migrations are already added to the application, I have not mentioned them. However, it’s the same method as you would do for any other application.
      Here is what I would recommend, if you want to re-add the migrations.
      1. Delete the migrations folder from the BlazorHero.CleanArchitecture.Infrastructure project.
      2. run `drop-database` command to cleanup the existing database.
      3. run `add-migration initial` command
      4. and finally, `update-database`. This should create almost 11 new tables on to the database.

      Every time you add a custom entity in code, add it to the ApplicationDbContext and re-run steps 3-4.

      Regards

  10. Hi there, one suggestion is to use in routes.Endpoints instead of passing parameter by parameter(currently with page size and page number) , pass the object itself.
    IT´s better if we would like to filter with more properties and we do the filter query in server side instead of client side.
    Possible suggestion for Products -> GetAll:
    –ProductsEndpoint
    public static string GetAllPaged(GetAllPagedProductsRequest request)
    {
    var url = $”api/v1/products?{GetQueryString(request)}”;

    return url;
    }

    public static string GetQueryString(object obj)
    {
    var properties = from p in obj.GetType().GetProperties()
    where p.GetValue(obj, null) != null
    select p.Name + “=” + HttpUtility.UrlEncode(p.GetValue(obj, null).ToString());

    return String.Join(“&”, properties.ToArray());
    }
    The “GetQueryString” would be a extension .
    Products Controller:
    public async Task GetAll([FromQuery] GetAllPagedProductsRequest request)
    {
    var products = await _mediator.Send(new GetAllProductsQuery(request.PageNumber, request.PageSize, request.SearchString));
    return Ok(products);
    }
    Just a seggestion.Thanks, Excelent Work

  11. Hi Mukesh,
    I’m really impressed with your projects,
    Just I want to mention that after refreshing the page the hubconnection take time to connect and affect the UI, normally it runs in the background but when and if I hit refresh again an exception is raised on MainLayout.razor.cs in the line 45 => await hubConnection.StartAsync(); and it reloads normally again
    I’m using BalzorHero V2.0, is there any thing I should do to fix it or it is by design?
    Thank you and keep up the good work