weather-app weather-forecast angular angular-material google-maps-api geolocation-api openweather-api pwa offline service-worker firebase firebase-hosting google-geocoding-api google-places-api

Angular Weather App

Angular Weather App is a Progressive Web Application (PWA) to get weather forecast.

Progressive Web Apps are web apps that use emerging web browser APIs and features along with traditional progressive enhancement strategy to bring a > native app-like user experience to cross-platform web applications.

Progressive Web Apps are built and enhanced with modern APIs to deliver enhanced capabilities, reliability, and installability while reaching anyone, anywhere, on any device with a single codebase.

Demo

Check out the live application -> https://angular-weather-pwa.web.app

Installation ⚙️

Android (Chrome)	iOS (Safari)

Computer (Chrome \| Microsoft Edge)

Features 🚀

Get weather forecast by user location.
Get the weather forecast by searching for a place.
Can be installed on your mobile phone, tablet and computer.
Displays the following information:
- Temperature
- Weather description
- Feels like temperature
- Humidity
- Wind speed
- Pollution
- UV index
- Hourly and weekly forecast
- Sunrise and sunset times
- Visibility
- Air quality
The temperature units can be switched between Celsius and Fahrenheit.
Notify Internet connection status.
Works offline after first use.
Notify when an app update is available.

Built with 🛠️

Angular - An Application Design Framework and Development Platform for creating efficient and sophisticated single-page apps.
Angular Material - Material Design components for Angular.
OpenWeather API - Fast and easy-to-work weather APIs.
Figma - Figma is the only platform that brings together powerful design features you already love and a more efficient workflow to boot.
Places API - Get detailed information about 100 million places.
Geocoding API - Convert between addresses and geographic coordinates.
Web APIs for Angular - High quality lightweight wrappers for native Web APIs for idiomatic use with Angular.
RxJS - A javascript library for reactive programming using Observables, to make it easier to compose asynchronous or callback-based code.
TypeScript - TypeScript is an open-source language which builds on JavaScript, one of the world’s most used tools, by adding static type definitions.
ng-connection-service - Detects whether browser has an active internet connection or not in Angular application.
PWACompat - A library for creating splash screens and icons for Mobile Safari, as well as supporting IE/Edge's Pinned Sites feature.

Getting started 🏁

To clone and run this application, you'll need Git and Node.js (which comes with npm) installed on your computer.

From your command line:

git clone https://github.com/sldiaz04us/angular-weather-app.git
cd angular-weather-app/
npm install to install all dependencies.

Before you run the application, you'll also need:

Create a Google API Key to use Google Maps Platform products.
Enable Places and Geocoding APIs.
Add in the index.html file the below script with your Google API Key.

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    ...
    <script defer src="https://maps.googleapis.com/maps/api/js?key={YOUR_API_KEY}&libraries=places"></script>
    ...
  </head>
  <body>
   ...
  </body>
</html>

Create an OpenWeather API Key.
Add your OpenWeather API Key to the environment.ts and environment.prod.ts files.

// environment.ts
export const environment = {
  production: true,
  openWeatherApiKey: '{YOUR_API_KEY}'
};

Run ng serve, this command runs the application.
Navigate to http://localhost:4200/

What's missing❓

Favorite locations

A location module where the users can add their favorite places and be able to see a detail of the weather forecast for each place on the same page.

Radar map

A map module where the users can see a snapshot of the radar map showing information such as rain, snow, storm, etc.

Settings

A settings module where the users can store their preferred location, temperature unit, etc.

Unit/Integration tests 🧪

I skipped writing test for this project.

Accessibility ♿

Not all components have properly defined aria attributes, visual focus indicators, etc.

Author: Sergio López Díaz ✍️

You can find out more about me and my projects on:

Support 🤝

Give a ⭐️ if you like this project!

Thanks a lot for stopping by and supporting me!

Credits

Design inspired by Diana Malewicz - Weather App UI illustrations

License 📝

Feel free to use my code on your project. Please put a reference to this repository.

This project is under the MIT license. See the LICENSE for more information.

About

A Progressive Web Application (PWA) to get the weather forecasts.