ASP.NET Hosting

Project for a Weather API Dashboard

Suzan Kara

Users may keep an eye on current weather conditions, forecasts, and climatic data for various areas with weather dashboard applications. These dashboards use interactive interfaces to display data that is gathered from weather services. To display real-time weather data, many contemporary applications make use of APIs from providers like WeatherAPI and OpenWeather.

This article describes how to use a dynamic frontend interface and a backend service to create a Weather API Dashboard. The project shows how to obtain meteorological data, process it using a backend API, and present it in a polished dashboard user interface.

Overview of a Weather Dashboard

A weather dashboard shows information such as:

  • Current temperature
  • Weather conditions
  • Humidity and wind speed
  • City-based forecasts
  • Weather icons and descriptions

The dashboard fetches live weather data from an external API and updates it dynamically.

Example weather information displayed on the dashboard

City

Temperature

Condition

Humidity

Wind

London

13°C

Clear Sky

94%

10 km/h

London

18°C

Cloudy

72%

15 km/h

System Architecture

The weather dashboard consists of three main layers.

Frontend Layer

Displays the weather dashboard interface.

Backend Layer

Handles API calls and processes weather data.

External Weather API

Provides real-time weather data.

Data Flow

User opens the dashboard page
↓
Frontend sends request to backend API
↓
Backend calls weather service API
↓
Weather API returns JSON data
↓
Backend returns processed data
↓
Frontend updates the weather dashboard

Weather API Endpoint Example

A common weather API request looks like this:

https://api.openweathermap.org/data/2.5/weather?q=Chennai&units=metric&appid=YOUR_API_KEY

Example JSON Response

{
 "name": "London",
 "main": {
   "temp": 13,
   "humidity": 94
 },
 "weather": [
   {
     "description": "clear sky"
   }
 ],
 "wind": {
   "speed": 10
 }
}

This response includes temperature, humidity, wind speed, and weather description.

Backend Implementation (ASP.NET Web API)

Create a controller that retrieves weather data from the API.

WeatherController.cs

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

namespace WeatherDashboard.Controllers
{
    public class WeatherController : ApiController
    {
        [HttpGet]
        [Route("api/weather")]
        public async Task<IHttpActionResult> GetWeather(string city)
        {
            string apiKey = "YOUR_API_KEY";
            string url = "https://api.openweathermap.org/data/2.5/weather?q=" + city + "&units=metric&appid=" + apiKey;

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

                if (!response.IsSuccessStatusCode)
                    return BadRequest("Weather data not available");

                var result = await response.Content.ReadAsStringAsync();

                return Ok(result);
            }
        }
    }
}

Backend Logic

The backend API performs three main tasks:

  • Receives the city name from the frontend
  • Requests weather data from the weather API
  • Returns the JSON response to the client

This middleware architecture allows developers to add security, caching, or logging features.

Frontend Weather Dashboard UI

index.html

<!DOCTYPE html>
<html>
<head>

<title>Weather 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;
}

.weather{
margin-top:20px;
font-size:18px;
}

input{
padding:10px;
width:250px;
}

button{
padding:10px 15px;
cursor:pointer;
}

</style>

</head>

<body>

<div class="container">

<h1>Weather Dashboard</h1>

<input type="text" id="city" placeholder="Enter city name">

<button onclick="getWeather()">Search</button>

<div id="weatherResult" class="weather"></div>

</div>

<script>

function getWeather()
{
let city = document.getElementById("city").value;

fetch("/api/weather?city=" + city)
.then(res => res.json())
.then(data => {

let result = JSON.parse(data);

let html = `
City: ${result.name} <br>
Temperature: ${result.main.temp} °C <br>
Condition: ${result.weather[0].description} <br>
Humidity: ${result.main.humidity}% <br>
Wind Speed: ${result.wind.speed} km/h
`;

document.getElementById("weatherResult").innerHTML = html;

});

}

</script>

</body>
</html>

How the Dashboard Works

When a user enters a city name and clicks the search button:

  • JavaScript sends a request to /api/weather
  • The backend calls the weather API
  • Weather data is returned as JSON
  • The frontend displays temperature, humidity, and weather conditions

Possible Dashboard Features

A professional weather dashboard may include additional features such as:

  • 5-day weather forecast
  • Weather icons and animations
  • Location auto-detection using GPS
  • Temperature charts and graphs
  • Hourly weather prediction
  • Dark mode UI

SEO Optimization for Weather Dashboard

To improve search engine visibility, include SEO elements such as:

  • Descriptive page titles
  • Meta description tags
  • City-based dynamic content
  • Fast loading pages
  • Mobile responsive layout

Example SEO Meta Tags

<meta name="description" content="Live weather dashboard showing temperature, humidity, and forecasts for cities worldwide.">
<meta name="keywords" content="weather dashboard, live weather, temperature forecast, weather API">

Use Cases

  • Weather monitoring dashboards
  • Travel planning applications
  • Agricultural weather analysis tools
  • Smart home climate systems
  • Mobile weather apps

Conclusion

Weather API dashboards demonstrate how external data services can be integrated into modern applications. By combining backend APIs with dynamic frontend interfaces, developers can build powerful dashboards that display real-time weather conditions and forecasts. With additional features like charts, forecasts, and location detection, a simple weather dashboard can evolve into a fully featured weather analytics platform.

ASP.NET Core 10.0 Hosting Recommendation

HostForLIFE.eu
HostForLIFE.eu is a popular recommendation that offers various hosting choices. Starting from shared hosting to dedicated servers, you will find options fit for beginners and popular websites. It offers various hosting choices if you want to scale up. Also, you get flexible billing plans where you can choose to purchase a subscription even for one or six months.