This project is to build a weather app where users can get weather information in real-time.
- website meet PWA criteria
- Register a service worker and provide offline access to cached weather searches.
- Web app have manifest in order for it to be installed on the user’s device.
- Web app meet the web accessibility guidelines
- user-friendly interface
- Responsive on all screens
- Local Storage in order to make the weather results persist on the page when a user reloads
- Fetched weather from openweathermap API.
- Built a autocomplete for places from Algolia Places API.
- Using an error handling messages to improve the user experience.
1- download zip folder or clone project > https://github.com/sarah27h/get-weather.git
git clone https://github.com/sarah27h/get-weather.git <add-your-project-name>
2- Open Github and create new repo.
3- Remane the old repo upstream & change the local repo 'origin' that points to new repo.
git remote rename origin upstream
git remote add origin http://github.com/YOU/YOUR_NEW_REPO
4- To get changes from upstream git fetch upstream
.
5- Install all project dependencies npm install
.
6- cd to your project directory.
- For develoment mode `gulp`.
- For production `gulp build --production`.
Note: In sw.js file change files paths in const assets = [] according to the enviroment to avoid getting Uncaught (in promise) TypeError: Request failed
error
- for dev css, js files are '/css/mainStyle.css', '/js/all.js'
- for production css, js files are '/css/mainStyle.min.css',
1- Create account on firebase.
2- create new project from firebase console.
3- Click on hositing in left menu and follow instructions.
- Open command prompt and cd to your project.
npm install -g firebase-tools
firebase login
note: If you log in you have to log out to get your new project add to projects list and log in again.
4- initalize new project firebase init
- yes
- hositing using (down arrow, space, enter)
- choose your project.
- choose production directory in my case dist
- no
5- firebase deploy
note: if you make changes after deploy and want to update the depolyed project use firebase deploy
.
- Weather data from openweathermap API
- autocomplete search box for places by Algolia Places API.
- https://developer.mozilla.org/en-US/
- Net Ninja youtube channel.
- wW3schools.com
- Quicksand font from Google Fonts.
- generate the icons for manifest file
This project is licensed under the terms of the MIT license.