Weathr

Demo

View the site at weathr.ajsto.dev (opens in a new tab).

The front end

View the source for this project in my github (opens in a new tab)

• React (using Vite)
• Tailwind CSS + DaisyUI for Tailwind components
• Vercel (deployments)

Using 3rd party location and weather APIs I have created a simple weather dashboard SPA. The application was designed to use components. Most of the components being reusable. Example:

<div><Forecast day={today} title="Today"/></div>
<div><Forecast day={tomorrow} title="Tomorrow"/></div>
<div><Forecast day={nextday} title="Day after"/></div>

One issue I ran into was that data from the APIs was not transmitting as fast as the page was rendering thus React displayed errors in the web browser console regarding undefined variables in my components. To solve this I used option chaining operators. Example:

    let icon = props.day?.condition?.icon
    let altText = props.day?.condition?.text

    let forecastIcon = today?.condition?.icon
    let forecastAltText = today?.condition?.text

    let temp = props.day?.temp_c
    let high = today?.maxtemp_c
    let low = today?.mintemp_c

This allows me to use conditional rendering in the component. If the variable is not defined, display a Loading component.

<div className="flex justify-center">
    {icon && altText ? 
        <img alt={altText} src={icon} width="64"/> : 
        forecastIcon && forecastAltText ?
            <img alt={forecastAltText} src={forecastIcon} width="64"/> :
            <Loading/>
    }
</div>

The APIs

For location I used Geocode Maps (opens in a new tab) and for weather I used WeatherAPI (opens in a new tab).

Both services offer RESTful API interface that returns JSON. I used the Javascript fetch API (opens in a new tab) to interface with the above services.

Deployment

For deployment I used Vercel (opens in a new tab) as it offers the easiest intergration into Github. Once I push or merge code into the main branch, the code is automatically built and deployed to Vercel's servers. I have a CNAME DNS record (weathr) setup to point to the production servers.