Weather App is a high-performance, offline-capable Progressive Web App (PWA) that provides real-time weather data for cities worldwide. Built with React, TypeScript, React Query, Vite, and Workbox, it offers a seamless user experience with fast loading times, offline support, and a modern design.
- ✅ Real-time Weather Data – Fetches up-to-date weather information for any city.
- ✅ Search & Autocomplete – Search for cities with a smooth and responsive autocomplete feature.
- ✅ Favorites & Notes – Save your favorite cities and add personal notes for each.
- ✅ Offline Support – View previously searched and favorited cities' weather data without an internet connection.
- ✅ Geolocation Support – Detects the user’s location to provide instant weather updates.
- ✅ Performance Optimized – Uses React app performance optimization techniques (
React.memo,useMemo,React.lazy, lazy-loading data using Intersetion Observer API, and more ), and Vite for blazing-fast performance. - ✅ PWA Ready – Installable on mobile and desktop powered by React Query cache persistence and Workbox service workers.
- ✅ Unit Tested – Thorough
Jest&@testing-library/reactunit tests to ensure reliability.
- Frontend: React + TypeScript + Vite
- State Management: React Hooks
- Networking: Fetch API +
@tanstack/react-query - Caching & Offline Mode: Workbox + LocalStorage
- Routing: React Router
- Styling: Tailwind CSS
- Testing: Jest + @testing-library/react
- Deployment: Netlify
Ensure you have the following installed on your system:
- Node.js
- npm
-
Extract the ZIP file:
- On Windows: Right-click the ZIP file and select Extract All…
- On macOS/Linux: Use the terminal:
unzip weather-app.zip -d weather-app
-
Open the extracted folder in a terminal:
cd weather-app
Run the following command to install all necessary dependencies:
npm install
Start the Development Server to launch the app in development mode:
npm run devThis starts a local Vite-powered development server. Open http://localhost:5173 in your browser.
To run the unit tests:
npm run test-unit
To generate an optimized production build:
npm run buildThis creates a dist/ folder containing minified, ready-to-deploy assets.- Preview Production Build -
npm run previewThis serves the built app at http://localhost:4173
You can access the web app by simply entering
🔗 prismatic-eclair-33cbd8.netlify.app in your browser.
However, if you wish to install it as a desktop or mobile app, follow the steps below:
1️⃣ Open Google Chrome and enter:
🔗 prismatic-eclair-33cbd8.netlify.app
2️⃣ Click the install icon 🏠 at the top-right of the address bar.
3️⃣ Click the "Install" button in the pop-up that appears.
1️⃣ Open Google Chrome and enter:
🔗 prismatic-eclair-33cbd8.netlify.app
2️⃣ Open the browser menu (⋮) in the top-right corner.
3️⃣ Click "Add to Home Screen" 📌.
4️⃣ Select "Install". The app is now on your home screen!
1️⃣ Open Safari and enter:
🔗 prismatic-eclair-33cbd8.netlify.app
2️⃣ Click the Share icon 📤 at the top-right of the browser.
3️⃣ Select "Add to Dock" 📌.
4️⃣ The app is now installed on your dock/home screen!
Once installed, you can access the app in the following ways:
1️⃣ Click on the Launchpad icon.
2️⃣ Locate and click the app to open it.
1️⃣ Type chrome://apps in the Chrome address bar and press Enter.
2️⃣ Locate the Weather App 🌤️ and click on it.
1️⃣ Type chrome://apps in the Chrome address bar and press Enter.
2️⃣ Locate the Weather App 🌤️ and right-click (Control-Click on Mac) to open the context menu.
3️⃣ Click "Uninstall" ❌.
1️⃣ Long-press the App Icon on your home screen.
2️⃣ Tap "Remove" ❌.
- Best practices is only less than 100% because the app requests location on page load.
