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.
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.
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.
Open the Project in Visual Studio
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...".
Select Multiple startup projects, and for
RoundTheCode.Blash.BlazorWasm, make sure that the action is set to
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
It's the Blazor WebAssembly application where you can view your Twitter Dashboard, so open up a browser and navigate to