Progressive Web Applications (PWA) are re-defining web user experience just like native applications, with offline, notification support etc.
Vue.JS is being one of the primary frameworks driving web experience into next level with PWA.
Been experimenting with it recently, and built a simple weather application from scratch.
People who are interested about PWA can check the following github repo to see how easy to build PWA with VueJS.
- Ability to view hourly and daily weather forecast for given city
- Ability to select city based on current location
- Ability to save favourite city (with offline capability)
- Offline ability to view UI and weather data
- Ability to show offline status
If you like or are using this project to learn or start your solution, please give it a star. Thanks!
- Vuetify - Material design component framework
- Veutify Material Dashboard - Boilerplate code for dashboard based on Vuetify
- Vue CLI PWA - PWA Plug-in.
- Axios - Promised based http client.
- Open Weather Web Api - Free web api providing weather forecast data in json format.
- Cors-anywhere - Global proxy to support CORS.
- HERE Maps API - Map api for reverse geo code look-up.
- Vue CLI - Standard tooling for Vue.js Development
- Yarn - Package management
- Visual Studio Code - IDE
- Chrome DevTools - Browser based developer tools.
- Firebase Database - Realtime database from google cloud enables syncing across devices.
- HTML5 Web Storage - Browser local storage to store offline data.
Clone the repository from the following location:
Open command prompt and navigate to the directory where the above source is cloned.
Run the following command to install required packages:
Check here to get started with yarn package management.
Run the following command to run the application in local development server
Open the application in browser: http://localhost:8080.
Run the following command to build production output to be deployed in production server
Will be writing articles providing details of the technologies and architecture. You can watch or mark star the repo for future updates.