Getting prepared for component powered Weather App

HW-Weather-App-preps.md

Component Powered Weather App - Getting Prepared

After intro to MVC and other design patterns (video, slides) we need to get prepared for the next iteration.

What needs to be done

By next workshop every student is expected to:

read MVC based weather app code and forget it

1. install required tools:

   1.1. yarn package manager

   1.2. parcel app bundler yarn global add parcel-bundler. You may need to patch your IDE settings in order to have Parcel HMR working properly.

   1.3. app publisher yarn global add push-dir

2. initialize project repo weather-app and have following files in it:

   2.1. .gitignore (feel free borrowing this)

3. have app view designed:

   3.1. index.html and style.css, all placed under src/ in your repo.

   Your design should not be final or complete. Having well structured HTML is more important than pretty styling. Take the tech requirements below into consideration. Consider using normalize.css.

4. on OpenWeatherMap:

   4.1. get registered and gain an API access key

   4.2. investigate and play around with Current weather data and 5 day / 3 hour forecast APIs

   Please feel free using a different weather service, but mind CORS issues

There are 7 mandatory sub-items above to complete.

When you finish any item post a message in the course channel:

Weather App Preps - #done x of 7 where x is a number of complete sub-items.

Technical requirements

NB! You do not need to code the requirements below yet. Just keep in mind this future app functionality when designing the app View.

The app will:

• have a search bar
• query data by either
  • city name
  • geo coordinates
• show location details:
  • current location
  • location geo coordinates (optional)
  • if location is among favourites
• show current weather for a selected location:
  • temperature
  • current conditions general description
  • wind speed and direction
  • pressure
  • humidity
  • date (as per server response)
• show 5-7 days weather forecast for a selected location where each entry contains:
  • date & time (opt to have forecast for every 6 or 12 hours)
  • temperature
  • conditions general description
• suggest search history
• suggest favourites - add, remove, browse
• update URL and browsing history
• enable switching between metric and imperial units

Weather conditions should be dubbed with a relevant icon (either image or font). Icons font example: https://erikflowers.github.io/weather-icons/

You may download the font or icon images and place them somewhere in a dedicated subdirectory under src/ in your repo.

Sources of inspiration

• https://xandzia.github.io/kottans_frontend/task_10/
• https://letushev.github.io/weather-app/
• https://val-fom.github.io/weather-app/dist/
• https://juliamokh.github.io/weather-app/
• OleksiyRudenko@github: MVC style, components
• andrew-omelchenko@github: weather-app, weather-bit-app, weather-app-components

We care

Many of your apps will be published on Kottans Twitter channel