Build a React Weather PWA That'll Land You Interviews (OpenWeather API + Tailwind)
The React project that actually belongs on your resume — a fully installable Weather PWA built with React, Tailwind CSS, and the OpenWeather API. Recruiters care about projects that ship like real products, and this one does: offline support, installable on mobile and desktop, real API integration, and a clean responsive UI.
By the end of this tutorial you'll have a portfolio-ready project to add to your GitHub and link from your resume.
🔗 Source code: https://github.com/Ijazliaqat/Weather...
What you'll learn:
✅ React + Vite project setup from scratch
✅ Tailwind CSS configuration
✅ OpenWeather API integration with custom hooks
✅ Building reusable components (SearchBar, WeatherCard, Forecast)
✅ Converting a React app into an installable PWA
✅ Adding a custom install button
📌 Timestamps:
0:00 Introduction
1:41 React Project Setup (Vite)
4:14 Tailwind CSS Setup & Configuration
7:45 Getting OpenWeather API Key
9:55 Creating useWeather Custom Hook
15:57 Building SearchBar Component
21:39 Creating Weather Card UI
31:07 Building 5-Day Forecast Card
40:46 Connecting All Components
50:12 Converting App into PWA
59:00 Adding Install PWA Button
👇 What portfolio project should I build next? Drop your suggestions in the comments.
🔔 Subscribe for more resume-ready projects: / @resumereadyprojects
#reactjs #webdevelopment #portfolioproject #reactprojects #javascript #frontenddeveloper #pwa #reacttutorial