Inspirational Quotes built in Blazor



I decided to build something a little different this time.  I came across a quote I really liked.  It made me stop and think for a minute.  Once I digested the thought, it made me smile.  This got me thinking about having a new quote each day.  I am sure there are apps already available, but I bet there are not any built with Blazor.

 Live Demo

Requirements

        1.       Source of the quotes must be free

        2.       The quote displayed must be random

        3.       There needs to be a background image

        4.       Background image needs to be random

        5.       Must be responsive

        6.       Must be free to host

        7.       Don’t have APIs calling API’s

APIs

I started with Client-side application.  The thinking was that I might want a PWA as well and this would give me a great start. 

Next step was to find a couple of free APis, quote and background image.  I referenced my post on “Holly freebies Batman” and I found free quote here Type Fit . What is interesting about this API, is they provide a “getAll” API.  This allowed me to get all the current quotes and keep them in a file within the application.  I create a json file and added an Id to each quote.  I needed up with a list of over 1600 quotes.  In addition, this allowed me to add some of my own, including the one that triggered the creation of this application.  This will allows us to change the quote dynamically in the PWA in an offline mode.

The background image API turned out to be a little more work.  I found several free ones, but most you had to register to get an API key.  Which is fair.   I did find once from Unsplash.  This one was free, no registration, but unlike the other APIs I looked at, it returned the actual image, not data about the image and then the URL to call.  This would save an additional call.  Downside is with out the attributes of the image, making sure the text of the quote did not bleed into the image would be a bit trickier.

UI

The UI I wanted was straight forward, full screen image, quote text on top of the image.  At the bottom, out of the view area, a little statement on the purpose of the application.

To implement this, I did the following:

        1.       In the MainLayout.Razor, I removed everything but @Body

            @inherits LayoutComponentBase
            @Body

        2.       Remove bootstrap CSS from index.html

        3.       Replace the app.CSS with the new CSS

a.       Note when you replace the app.css you must keep the styles for #blazor-error-ui and .dismiss.  if you don’t, the error with “Reload” consistently shows and it makes you think there was an error.  I wasted some time on that one.

b.       In the “container” of the indie razor page, you need to set the background image source to the Unsplash API

                                                               i.      background-image: url('https://source.unsplash.com/random');

To solve the quote text color issue, white and black both bleed into the background image, I had to find a color that could be seen with most background.  Since the backgrounds are random, this could have been challenging.  I thought about inspecting the image and select a contrasting color, but that was over kill for what I needed.  I ended up just reviewing several colors before selecting the copper/brown color.

This got us to the point of sowing the back ground image and the reason  for the application.

 

Implementation

 

First thing we needed was a Quote object to hold the quote.  This is a simple object: 

        public int Id { get; set; }

        public string Text { get; set; }

        public string Author { get; set; }

 

Since we wanted to get a new quote on each new page refresh, we used the HTTP client in the OnInitializedAsync method to get the collection of quotes from the server 

              quotes = await Http.GetFromJsonAsync<List<Quote>>("sample-data/quote2.json");

 

Next, we created a service to randomly select one of the quotes from the collection:

 public static async Task<Quote> Get(List<Quote> data)
        {
            Quote result = new Quote();

            if(data.Any())
            {
                Random r = new Random();
                int index = r.Next(1, data.Count);
                try
                {
                    var t = from a in data
                            where a.Id == index
                            select a;
                    if (t.Any())
                    {
                        result = t.FirstOrDefault();
                    }
                }
                catch
                {
                    result = data.ElementAt(0);
                }
                if (string.IsNullOrEmpty(result.Author))
                {
                    result.Author = "Unknown";
                }
            }
            await Task.CompletedTask;
            return result;
        }
    }

Since the first Id is 1, we set the random generator at 1 to the number in the quote collection.  We have some error checking just in case there is an exception when trying to get a quote.  Not all quotes have an author, in the last step we check that and set the author to unknown if the author is null.

 

Deployment

I deployed this to Azure as a static web site in a Data storage container.  See my post about Hosting Models for more information.

 

Let’s Make a Server-Side Version

After I deployed and show the application working, I decided to create a Sever Side version.  I did this mainly to track hosing cost.  Since the server version had to be deployed to an Azure app service, free tier would work at first, I and to compare any hidden cost.  I will create a post on my finding on this later.

 

Code differences between Client-Side and Server-Side.

For the UI, there was no difference than removing bootstrap from _Host.cshtml.  The main difference in the code was where and how I was getting the list of Quotes.  In the server side I did not need HTTP client, I could just read the file from the file system.  I did have to put the data file in the wwwroot folder under a data folder.  I had to read this file from the index.razor file to ensure I could access the data file.

Second change was to move the getting the quote to display from the OnInitializedAsync method to the OnAfterRenderAsync method.  This was do to the async calls to get the file and the background image loading.  In slower systems the quote would be display twice.  Once on the initial load and then it would change once the image was loaded.  Moving it to the OnAfterRender method, we now display the quote only after the background image it loaded.

 

To load the quote collection file:

    private string LoadTextFile()
    {
        string result = string.Empty;
        //make sure the file exists
        if (File.Exists("wwwroot/data/quote2.json"))
        {
                result = File.ReadAllText("wwwroot/data/quote2.json");
         }
        return result;
    }


Since we are returning a string of JSON from the file, we need to JsonSerializer it.  I was used to using NewtonSoft for this but it is include now:

    System.Text.Json.JsonSerializer.Deserialize<List<Quote>>(data);

Those were the changes needed.  It was a few more changes than I had thought would be needed, but looking at the changes, it makes sense.

Next Step

Next in mind for the application is to get a custom domain name for it and configure Azure to use it.  I will create a new post on how that goes.

Source Code
I have included both the Client-Side and Sever-Side code in the GitHub repro.


Comments

Post a Comment

Popular posts from this blog

Yes, Blazor Server can scale!

Image
From the very beginning of the release of Blazor Server naysayers have incorrectly stated that Blazor Server can not scale.  They usually state that the limit is 5,000 concurrent users. There are several misconceptions and wrong assumptions about their statement.  Let's break it down and get a better understanding of Blazor server-side scaling. What is the "limit" for users When Microsoft talks about the need to scale an application, what they are saying is that when a normal response for any concurrent user is taking longer than 200 ms, the system is not performant and needs to scale. We will accept that definition: If any normal user response is taking longer than 200 ms, the system needs to scale for concurrent users. By a normal response, we are referring to a page get, a post, etc.  Large database access requests would not be included in this measurement. What is scaling There are 2 common ways to scale, scale, out horizontally, and scale-up, up vertically. In our di
Read more

Blazor new and improved Search Box

 Back in March, I posted a new Blazor data grid with a search box ( see post ).  Since then I have found a new and improved search box that I wanted to implement.  The search part is implemented the same.  What I added was the ability for the user to narrow down the search by selecting which field they wanted to search on.  This will help the user find what they are looking for and in a large collection, the search will end up being faster. The goal of making the change was to make the search box a new component and have it handle the UI functionality part. Prep Work Here is the prep work I did before adding the search box: Started with the source code from the post listed above. Upgraded the project to .Net 5 Upgraded the Nuget packages that were out of date. Ensured every build and run. Change to a Component I wanted to create a component for the search box so I could use it in other applications.   1. Create a Folder under UIControls called "SearchBox" 2. Created a new raz
Read more

Blazor Wizard Step Component

Image
 I like using step wizards in my applications, sign-up forms, shopping cart checkout, and complex data entry, but I had not been able to find a wizard step indicator that I liked so I built this one. As it turned out, it was not as hard as I thought it would have been.  There are a couple of key parts you have to keep in mind when using a step wizard, such as: 1. What step am I on? 2. Should the "Prev" / "Next" buttons be enabled or disabled on this step? 3. What kind of visual clues do I show the user? I will walk you through how we answer these questions in this sample project.   HTML The main container has a div that holds the progress divs, one div for each "step" of your process.  Below that we have our "Prev" and "Next" buttons We will need to wire in the on-click events for the two buttons.  The buttons will need to be able to be disabled and enabled via CSS class settings.           <div class="container">       
Read more