Angular  

Advanced version with multiple coins (BTC, ETH, SOL)

Below is an advanced implementation that shows multiple cryptocurrency prices (BTC, ETH, SOL) in real-time using the free CoinGecko API. The solution includes a complete ASP.NET backend API and frontend dashboard that automatically refreshes prices.

API Endpoint Used

https://api.coingecko.com/api/v3/simple/price?ids=bitcoin,ethereum,solana&vs_currencies=usd

Example JSON Response

{
 "bitcoin": {"usd": 68421},
 "ethereum": {"usd": 3800},
 "solana": {"usd": 150}
}

This means the prices of Bitcoin, Ethereum, and Solana are returned in USD.

Backend – ASP.NET Web API

Create a controller that calls the CoinGecko API and returns the result to the frontend.

CryptoController.cs

using System.Net.Http;
using System.Threading.Tasks;
using System.Web.Http;

namespace CryptoAPI.Controllers
{
    public class CryptoController : ApiController
    {
        [HttpGet]
        [Route("api/crypto/prices")]
        public async Task<IHttpActionResult> GetCryptoPrices()
        {
            string url = "https://api.coingecko.com/api/v3/simple/price?ids=bitcoin,ethereum,solana&vs_currencies=usd";

            using (HttpClient client = new HttpClient())
            {
                var response = await client.GetAsync(url);

                if (!response.IsSuccessStatusCode)
                    return BadRequest("Failed to fetch crypto data");

                var result = await response.Content.ReadAsStringAsync();
                return Ok(result);
            }
        }
    }
}

How the Backend Works

  • The controller receives a request from the webpage.

  • It sends a request to the CoinGecko API.

  • The JSON response is received.

  • The backend sends the data to the frontend.

This architecture helps control external API calls and allows you to add caching, logging, or security later.

Frontend – Live Crypto Dashboard

Create a webpage that displays the prices.

index.html

<!DOCTYPE html>
<html>
<head>

<title>Live Crypto Dashboard</title>

<style>

body{
font-family:Arial;
background:#f4f6f9;
text-align:center;
}

.container{
width:500px;
margin:auto;
margin-top:80px;
background:white;
padding:30px;
border-radius:10px;
box-shadow:0 0 10px #ccc;
}

h1{
margin-bottom:30px;
}

.coin{
display:flex;
justify-content:space-between;
padding:12px;
border-bottom:1px solid #eee;
font-size:18px;
}

.price{
color:green;
font-weight:bold;
}

button{
margin-top:20px;
padding:10px 20px;
font-size:16px;
cursor:pointer;
}

</style>

</head>

<body>

<div class="container">

<h1>Crypto Live Prices</h1>

<div class="coin">
<span>Bitcoin (BTC)</span>
<span id="btc" class="price">Loading...</span>
</div>

<div class="coin">
<span>Ethereum (ETH)</span>
<span id="eth" class="price">Loading...</span>
</div>

<div class="coin">
<span>Solana (SOL)</span>
<span id="sol" class="price">Loading...</span>
</div>

<button onclick="loadPrices()">Refresh</button>

</div>

<script>

function loadPrices()
{
fetch("/api/crypto/prices")
.then(response => response.json())
.then(data => {

let obj = JSON.parse(data);

document.getElementById("btc").innerHTML = "$ " + obj.bitcoin.usd;
document.getElementById("eth").innerHTML = "$ " + obj.ethereum.usd;
document.getElementById("sol").innerHTML = "$ " + obj.solana.usd;

})
.catch(error => {
console.log(error);
});
}

loadPrices();

setInterval(loadPrices,5000);

</script>

</body>
</html>

How the System Works

User opens the webpage
↓
JavaScript sends request to /api/crypto/prices
↓
ASP.NET Web API calls the CoinGecko API
↓
CoinGecko returns JSON price data
↓
Backend sends it to frontend
↓
Frontend updates BTC, ETH, SOL prices

The page refreshes prices every 5 seconds automatically.

Features of This Advanced Version

  • Multiple cryptocurrencies supported

  • Live price auto refresh

  • Clean dashboard UI

  • No API key required

  • Easy to extend with more coins

To add more coins, modify the API URL:

ids=bitcoin,ethereum,solana,dogecoin,cardano

Membership not found