This weather app gets weather data from the WeatherStack API and displays current weather for a specific location. A frontend static site is built with Vite, React Typescript, CSS and TailwindCss.
- Vite, React Typescript, CSS, TailwindCSS
- Service Worker for caching data
- WeatherStack API for current weather data
- Visual Crossing API for historical and forecast data
- Displays Current, History and Forecast weather for location entered.
- Responsive design for mobile and desktop screens.
- Caches data for use offline - Stale While Revalidate caching
- System preference for dark/light mode & Toggle button
- Search Form - if user enters a country name, it will display a city in that country.
- Offline Notifier - if user is offline, it will display a message.
Live Demo located in "gh-pages" branch of this repository
-
Clone the repository and navigate to the Project Directory:
git clone https://github.com/yourusername/vants_weather_app.git cd weather-app -
Install dependencies:
npm install
-
Create .env file in the root directory and add your own weather API Keys:
VITE_WEATHERSTACK_API_KEY=<your-api-key> VITE_VISUALCROSSING_API_KEY=<your-api-key>
Replace "your-api-key" with your respective API key
-
Run the app:
npm run dev
- Navigate to your browser and follow the link provided at Installation step 4.
- Enter a city name to view current & history/forecast weather conditions.
Free tier is available for both APIs
- Head to the WeatherStack API site and sign up.
- Head to the Visual Crossing API site and sign up.
- Live Demo may not have renewed or valid API Key
- Background Image created in Adobe Express.
- Design and color/colours - inspiration from Tamz & Rob 🕊️. Favicon is personal design from scuba diving ...
- App is still being improved from time to time, please feel free to contribute and/share insights.
- some files are not being used, but kept for reference.
