React Weather App

Scope

React Weather app is a responsive web app that uses OpenWeatherMap's API. This was the first project where I used axios. The reason why I used axios over fetch() was to narrow down the steps, and axios cuts the step of passing a request to a .json() method; returning only an object.

Technologies Used

React
Sass
OpenWeatherMap API

Development

In the following code snippet, I used the try and catch error handling for axios to fetch the OpenWeatherMap's API error


const fetchForecast = async ( query ) => {    

    const forecast = `https://cors-anywhere.herokuapp.com/http://api.openweathermap.org/data/2.5/forecast?q=${query}&APPID=${API_KEY}&units=metric`; 

    // Get the response once a call is being made to forecast with the API   
    try {
        const { data } =  await axios.get(forecast, {        
                params: {
                    q: query,
                    APPID: API_KEY,
                }                   
            })  
            return data; 
        }  
        catch(error) {
            let responseData = '';
            if(error) {         
                responseData = "Oops! Unable to find city, please try again!"; 
                setError(responseData);                 
            } else if (error.request) {    
                responseData = "Oops! Unable to find city, please try again!"; 
                setError(responseData); 
            } else {           
                responseData = "Oops! Unable to find city, please try again!"; 
                setError(responseData);
            }
            return error;  
        };  
    }

Next Project

Portfolio