Build a React JS Weather App with Vite, Axios, Tanstack Query, Custom Hooks, and Tailwind CSS
Learn how to build a Weather App from scratch using React JS with modern tools like Vite, Axios, TanStack Query (formerly React Query), Custom Hooks, Geolocation, and Tailwind CSS for styling. By the end of the video, you’ll also learn how to deploy the app to GitHub Pages so your project can be live on the web!
This step-by-step guide is perfect for developers of all levels who want to build a real-world project from the ground up using the latest tools and deploy it online for free with GitHub Pages.
Links:
Source code: https://github.com/DzmitryUr/weather-... (updated main branch)
Source code: https://github.com/DzmitryUr/weather-... (branch in the state when the video was created)
Deployed React App: https://dzmitryur.github.io/weather-a...
Link to the TailwindCSS doc: https://tailwindcss.com/docs/guides/vite
Readme Deploying Vite App: https://github.com/DzmitryUr/to-do-li...
OpenWeatherMap API: https://openweathermap.org/api
TanStack Query: https://tanstack.com/query/latest
⌚️Timestamps:
0:00 Design of the Weather Application
2:16 Set Up the React TailwindCSS Project with ViteJS
6:21 Code a custom hook 'useGeolocation' to retrieve user's coordinates
12:09 Use 'useGeolocation' custom hook in the functional Weather component
20:34 Overview of OpenWeatherMap, add React Query and Axios
23:24 Create `useFetchWeather` Custom Hook using '@tanstack/react-query'
25:55 Fetch data by coordinates from API with `axios.get()`
31:18 Use Custom Hook `useFetchWeather` in the Weather Project
38:51 Build search bar and provide data to React Query
43:48 Fetch data by city name from API with `axios.get()`
48:32 Expand functionality to fetch forecast data with `Promise.all()`
58:34 React Query to manage and cache the data
59:58 WeatherCard reusable functional component with props
1:04:11 Function to get current date in provided format
1:08:26 Images using OpenWeatherMap data and links
1:12:24 Displaying Weather Details data
1:16:47 Forecast Functional React Component in the Weather Project
1:28:20 Deploy React JS Weather App on GitHub Pages
🌟 If you found this project helpful, don’t forget to give it a star on GitHub!
🔔 Don’t forget to like and subscribe for more React tutorials and web development tips!
#ReactJS #Vite #Axios #TanStackQuery #TailwindCSS #WeatherApp #GitHubPages #Deployment #WebDevelopment #FrontendDevelopment #CustomHooks