OpenWeatherMap API in React App with TanStack Query, Custom Hook, Axios & Tailwind CSS
Learn how to use OpenWeatherMap API in React Project with TanStack Query (FKA React Query), a custom hook, Axios for API requests, and Tailwind CSS for styling.
Source code: https://github.com/DzmitryUr/react-ap...
OpenWeatherMap API:https://openweathermap.org/api
TanStack Query: https://tanstack.com/query/latest
What you’ll learn:
How to use Axios for making API requests to the OpenWeatherMap API
Leveraging TanStack Query (formerly React Query) to handle data fetching, caching, and synchronization
Creating a custom React hook to encapsulate the weather fetching logic
Handling loading states, errors, and working with dynamic API data
⌚️Timestamps:
0:00 Design of the Wheather API Project
1:45 Overview of OpenWeatherMap
3:15 Adding React Query and Axios to the React Project
5:05 Creating `useFetchWeather` Custom Hook using '@tanstack/react-query'
7:35 Fetch data by coordinates from API with `axios.get()`
12:55 Using Custom Hook `useFetchWeather` in the functional component
20:39 Build search bar and provide data to React Query
25:31 Fetch data by city name from API with `axios.get()`
30:15 Expand functionality to fetch forecast data with `Promise.all()`
33:50 JSX for forecast data
40:15 React Query to manage and cache the data
41:27 Final Testing of the Wheather API Application
#ReactJS #OpenWeatherMapAPI #TanStackQuery #Axios #TailwindCSS #WebDevelopment #FrontendDevelopment #CustomHooks