Blash: Twitter Dashboard using Blazor

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.
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.

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.

Open the Project in Visual Studio

Open up RoundTheCode.Blash.sln in Visual Studio.

You will need to check that both the Blash API and the Blazor WebAssembly application are set up to run on startup.

Right-click on the solution and select "Set Startup Projects...".

How to Setup Startup Projects in Visual Studio 2019
How to Setup Startup Projects in the Blash Visual Studio project.

Select Multiple startup projects, and for RoundTheCode.Blash.Api and RoundTheCode.Blash.BlazorWasm, make sure that the action is set to Start.

Make sure that the API and Blazor WebAssembly are started up.

Press OK to confirm the changes. Then start the project in Visual Studio.

You should find that the Web API runs on https://localhost:5001, and the Blazor WebAssembly runs on https://localhost:5002.

It's the Blazor WebAssembly application where you can view your Twitter Dashboard, so open up a browser and navigate to https://localhost:5002.

Join our Discord server

  • Can't get your ASP.NET Core application to work? Ask for help here!
  • Discussions with other ASP.NET Core developers.
  • General chat with the community.
Join Discord