Skip to content

anshad/open-weather

Repository files navigation

OpenWeather

A web app for displaying 5 days weatherforecast for a city (Bangalore, India).

This project was generated with Angular CLI version 1.4.5.

Angular CLI need to be installed globally for building the project (for ES6 to ES5 coversion, packaging and all).

Demo

Deployed to firebase using firebase-cli.

Open Weather

Documentation

Detailed Code Documentation

Development server

Run ng serve -o for a dev server. App will open in the browser at http://localhost:4200/. The app will automatically reload if you change any of the source files.

Build

  • Make sure to have the angular cli installed globally using sudo npm install -g @angular/cli
  • Clone the repo and cd to the folder
  • Install npm dependencies using npm install
  • Run ng build --prod to build the project. The build artifacts will be stored in the dist/ directory.

Other tools and commands

  • Documentation deployment to GitHub pages using https://www.npmjs.com/package/angular-cli-ghpages. Command - sudo ngh --dir "documentation" --no-silent
  • App deployment to firebase using https://www.npmjs.com/package/firebase-tools. Command - firebase deploy
  • Generate or update documentation using https://github.com/compodoc/compodoc. Command - compodoc -p src/tsconfig.app.json

Technology stack

HTML5, CSS3, Angular 4, Bootstrap 4, SASS, ES6, Webpack, NPM

Features

  • Display 5 days weatherforecast using openweathermap api https://api.openweathermap.org
  • Documentation using https://github.com/compodoc/compodoc
  • Coded with Angular CLI and VS Code in love with Mac
  • Unit tests with jasmine and karma
  • Demo deployed to firebase using firebase cli tools
  • editorconfig and code lints

Todo

  • Improve data extraction method
  • Documentation
  • Update UI with some colors, highlights for current day, etc.
  • Option to get weather list with a city name
  • Implement routing for deatiled page on each date (for full description on weather)
  • Unit tests
  • CI & CD using Travis CI
  • Responsive design and fixes.