During internship we will learn Angular framework and its features implementing a weather application project. The application will allow user searching through the locations, viewing a location weather, weather history, inspect detailed view, adding list of favorite locations etc.
Before starting working on the project make sure that the following tools are installed:
- Editor or IDE (WebStorm, VS Code etc.)
- Git
- Latest LTS version of NodeJS & NPM
- Google Chrome browser
You will use https://www.weatherapi.com/ as data provider. The API and Documentation available.
We generated API key:
b88614b3fb684e8b996104153220302
to be used in your requests. As a requirement from API provider you have to include
Powered by <a href="https://www.weatherapi.com/" title="Weather API">WeatherAPI.com</a>``
The application layout must contain:
- Header
- Main that depends on the current URL
- Footer
- Loader for each page
Page URL - '/'.
The page must include:
- Default location current weather (location from chrome/or marked as default from local storage)
- 'Search' input and button
- Fancy background
- Footer
Page URL - '/details/${city}'.
This should show detailed information about weather for selected city. User should be able to add/remove city to Favorites list.
Page URL - '/forecast/${city}/${date}'.
This should show forecast for selected city and date
You can choose any or take them all:
- Show weather forecast as a chart for selected period.
- Add support for history view (like a forecast and as chart).
- Add theme support (based on your design - pink/blue or white/dark modes as example).
- Integrate with Google maps (or any other map provider) to show the selected city on Details page.
- Responsive design (should be mobile-friendly).
- No UI libraries allowed (like Bootstrap, Angular Material etc.)
- You can use libraries for charts, maps, fonts, icons etc.
- All other libraries must be confirmed with mentor.
There are no requirements for the application design at all. Be creative!