Blash: A Blazor Example Which Uses the Twitter API

Blash is a Twitter dashboard, written as a Blazor example to display real-time tweets from search queries of your choice.

It uses a number of Blazor components, using Razor to display the different components on the dashboard.

The Blazor WebAssembly application integrates with an ASP.NET Core Web API. The Blazor application does an API call to get all the relevant information needed for the dashboard.

The Web API communicates with the Twitter API to search a list of recent tweets for a particular query. It uses Entity Framework Core to store this information in a SQL Server database, and returns this information to the Blazor application.

One of the important things with Blazor is it's ability to keep in sync with the most recent tweets. In-order to do this, it establishes a SignalR connection with the Web API. This means that the tweets are updated in real time, and any user that is viewing the dashboard will have the correct information.

Blash is a Blazor written Twitter dashboard, that receives real-time tweets from the Twitter API.

How It Works

When the Web API starts up, it runs a series of jobs in the background. These include:

Importing the rules from the Twitter API and stores them as dashboards in the database.
Starts listening to real-time tweets from the Twitter API.
Gets a recent search for all the rules we are using from the Twitter API, and stores them as tweets in the database.

Only when these jobs are completed does the Web API start running.

With the Blazor WebAssembly application, it calls an endpoint to get all the dashboards and the tweets that it belongs to.

In-addition, it establishes a WebSocket connection with SignalR through the Web API. The purpose of this connection is for the Blazor WebAssembly application to know when:

A dashboard is created (as another user might create the dashboard).
A dashboard is deleted (as another user might delete the dashboard).
When a tweet is created, and the dashboards it belongs to.
When a tweet is deleted from a particular dashboard.
Resync of all the dashboards and their tweets.

This is so it can update the dashboard in real-time.

Software

This is the software that will need to be installed onto your machine.

Visual Studio 2019. Version 16.8.2 or above. It will work with the free community version.
SQL Server 2017, or above.
.NET 5.0 SDK, or above.

Get The Application Working

These are the steps to get the application working.

Fill out the Download the Source Code form. We will send you an email where you can download the source code.
Create a Twitter Developer account. You can follow our guide on how to set up a Twitter project to get a client ID and secret that you will need.
Inside the source code, there is a folder called Database. Within that folder, there is a file called RoundTheCode_Blash.bak. This needs to be imported as a database into your SQL Server.

From there, you will need to update some settings to get the application working. You will need to open up the Web/RoundTheCode.Blash.Api/appsettings.json file and change the following settings.

Check the database connection is correct in ConnectionStrings > BlashDbContext.
Set the client ID that you got from your Twitter project in Api > TwitterApi > ClientId.
Set the client secret that you got from your Twitter project in Api > TwitterApi > ClientSecret.

You are now ready to go.