Listen to this Post
The article discusses building a stock price dashboard using Cursor + .NET, with a backend that fetches initial stock prices from a free API and streams real-time updates using SignalR. The UI is built with HTML, JavaScript, and Tailwind CSS, including dark mode support.
Source Code & Resources:
You Should Know:
1. Setting Up SignalR in .NET
To implement real-time updates, SignalR is used. Here’s how to set it up:
Install SignalR in .NET:
dotnet add package Microsoft.AspNetCore.SignalR
Configure SignalR in `Startup.cs`:
services.AddSignalR();
app.UseEndpoints(endpoints =>
{
endpoints.MapHub<StockPriceHub>("/stockPriceHub");
});
Create a SignalR Hub:
public class StockPriceHub : Hub
{
public async Task SendPriceUpdate(string stockId, decimal price)
{
await Clients.All.SendAsync("ReceivePriceUpdate", stockId, price);
}
}
2. Fetching Stock Prices from an API
Use `HttpClient` to fetch initial stock prices:
public async Task<decimal> GetStockPrice(string stockId)
{
var client = new HttpClient();
var response = await client.GetAsync($"https://api.example.com/stocks/{stockId}");
var data = await response.Content.ReadAsStringAsync();
return JsonConvert.DeserializeObject<StockData>(data).Price;
}
3. Simulating Real-Time Updates with a Background Job
Use `IHostedService` to simulate price changes:
public class StockPriceSimulator : BackgroundService
{
private readonly IHubContext<StockPriceHub> _hubContext;
private readonly Random _random = new Random();
protected override async Task ExecuteAsync(CancellationToken stoppingToken)
{
while (!stoppingToken.IsCancellationRequested)
{
var newPrice = _random.Next(100, 200);
await _hubContext.Clients.All.SendAsync("ReceivePriceUpdate", "AAPL", newPrice);
await Task.Delay(1000, stoppingToken);
}
}
}
4. Frontend with JavaScript & Tailwind CSS
HTML Setup:
<div class="bg-white dark:bg-gray-800 p-4 rounded-lg"> <h1 class="text-xl dark:text-white">Stock Price Dashboard</h1> <div id="stockPrice" class="text-2xl font-bold dark:text-gray-200">Loading...</div> </div>
JavaScript SignalR Client:
const connection = new signalR.HubConnectionBuilder()
.withUrl("/stockPriceHub")
.build();
connection.on("ReceivePriceUpdate", (stockId, price) => {
document.getElementById("stockPrice").innerText = <code>${stockId}: $${price}</code>;
});
connection.start().catch(err => console.error(err));
What Undercode Say
SignalR is a powerful tool for real-time web applications, and integrating it with .NET provides seamless bidirectional communication. The use of Tailwind CSS simplifies UI styling, while Cursor AI accelerates development.
Bonus Linux/Windows Commands for Developers:
- Linux (Check HTTP Connections):
netstat -tuln | grep 80
- Windows (Test SignalR Connection):
Test-NetConnection -ComputerName localhost -Port 443
- Docker (Run .NET App):
docker build -t stockdashboard . && docker run -p 8080:80 stockdashboard
Expected Output: A fully functional real-time stock dashboard with SignalR, .NET, and Tailwind CSS.
References:
Reported By: Milan Jovanovic – Hackers Feeds
Extra Hub: Undercode MoN
Basic Verification: Pass ✅
