React Weather App

a weather app created in React. Powered by OpenWeatherMap and Unsplash.

Description

This is a React-based weather application that leverages the OpenWeatherMap API for fetching weather data and Tailwind CSS for styling. Additionally, it utilizes Icons8 for weather icons and Unsplash for background images. The source code is later deployed, tested, and hosted on Netlify.

Visit http://weather.sagelga.com to see the app in action.

Prequisites

• Node.js version 16.20.0 or higher

Installation

If you wish to run the app locally, you can clone the repository and run the following commands:

npm install
npm start

but we deployed this project in Netlify. You will have to use the Netlify CLI to run the project locally.

npm install -g netlify-cli
netlify env:import .env
netlify dev

Components

graph LR
    App --> Announcement
    App --> Navbar
    Navbar --> DarkModeToggle
    Navbar --> MenuTab
    Navbar --> WeatherUnitToggle
    Navbar --> Searchbox
    App --> TemperatureBody
    App --> TemperatureForecast
    TemperatureForecast --> ForecastCard
    App --> Dashboard
    Dashboard --> BasicCard
    App --> Snackbar
    App --> Footer

Loading

APIs

Here's all we are going to use API for

Open Weather Map API

• Current Weather Data https://openweathermap.org/current
• 5 days Forecast Weather Data https://openweathermap.org/forecast5
• Geocoding API https://openweathermap.org/api/geocoding-api
• Weather Conditions Icon API https://openweathermap.org/weather-conditions

Unsplash API

• Unsplash Image API https://unsplash.com/documentation#search-photos

IP Info API

• IP Info address data https://ipinfo.io

Resources

• React https://react.dev/learn
• Open Weather Map API https://openweathermap.org/api
• Unsplash API https://unsplash.com/developers
• Icons8 https://icons8.com/
• Tailwind CSS https://tailwindcss.com/
• React Material UI https://mui.com/
• Netlify https://www.netlify.com/
• Netlify CLI https://docs.netlify.com/cli/get-started/
• BlurHash https://blurha.sh/
• BlurHash for ReactJS https://github.com/woltapp/react-blurhash
• Axios https://github.com/axios/axios

Tools

Here's all the tools I used to develop this project

• Netlify
• Postman
• Visual Studio Code
• GitHub
• Cloudflare