kottans / kottans/weather-app

Add course module plan

Open
#1 2 comments 0 reactions 0 assignees View on GitHub
Dominant language
JavaScript
Stars
0
Forks
3
PR merge metrics
No merged PRs in 30d

Description

This module expands on a topic from previous module **Modern Web App & Web Frameworks** focusing on componental SPA architecture.

1. Introduction
1. General course module overview, connection with next module
- Weather app examples from past frontend course:
* 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: [componental](https://oleksiyrudenko.github.io/weather-webapp/), [reactjs](https://oleksiyrudenko.github.io/reactive-weather/)
* andrew-omelchenko@github: [weather-app](https://andrew-omelchenko.github.io/weather-app/), [weather-bit-app](https://andrew-omelchenko.github.io/weather-bit-app/), [weather-app-components](https://andrew-omelchenko.github.io/weather-app-components/)
- Next module (routing) intro
1. Intro to componental architecture
- The problem: app as an all-in-one HTML + JS for view and data management
(jQuery, MooTools et al approach)
- The solution: reusable components, distributed HTML and styles
1. Incremental coding
1. Static component
- Component class
- App component
- Temperature component
- ~global and component-level styles~
1. Customized component
- props
1. Interactive component
- TemperatureUnitsSwitch component
- state
- event listening and handling
- props propagation, state backpropagation and tree update
- nested components
1. Global app state
- store
- server API (https://openweathermap.org/)
1. Principal assignment
1. Complete weather app
1. The app will:
- have a search bar
- show target details:
* current location
* date & time
* location geo coordinates (optional)
* if location is among favourites (optional)
- show current weather for a selected location:
* temperature
* current conditions general description
* wind speed and direction
* pressure
* humidity
- show 5-7 days weather forecast for a selected location where each entry contains:
* date & time
* temperature
* conditions general description
- suggest search history (optional)
- suggest favourites - add, remove, browse (optional)
- update URL and browsing history
1. Wrap-up, benefits of componental app architecture:
- encapsulation
- re-usability
- state management
1. Homework assignment
1. Every student implements SPA using a public database where
entities can be grouped per e.g. species, movie, series, clans etc.
Options:
* https://rickandmortyapi.com/
* https://www.themoviedb.org/documentation/api?language=en-US
* http://superheroapi.com/
* https://developer.marvel.com/
* https://pokeapi.co/
* https://ringsdb.com/api/
* https://api.nasa.gov/api.html
* Star wars: [universe](https://swapi.co/) + [imagery](https://starhub.docs.apiary.io/#reference/0/character/retrieve-a-character)
* any other similar
([Todd Motto curated list](https://github.com/toddmotto/public-apis/blob/master/README.md#games--comics),
[programmable web](https://www.programmableweb.com/category/games/apis))
1. The app will:
- show selected or default entity (character)
- show any 10 entities (characters)
- when any listed entity clicked it becomes selected entity (character)
1. The app will be a basis for the module to follow (Routing)

This repo `master` will contain code base implementing **Incremental coding** part. Each section tagged for reference. Each section will be reproduced live while commented by a tutor. Full code base is available to students to fork and complete **Principal assignment**.

The outcome (homework assignment) to be aligned with **Routing** module tutors.

Contributor guide

No contributing guide indexed for this repository

Research direction

Review the master branch and the existing repository structure before turning the outlined componental SPA topics into a course module plan. The work is done when the incremental coding sections, principal assignment, homework, and alignment with the following Routing module are documented for students and tutors.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript
Domain
documentation
Issue type
Documentation
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.