GraphQL weather forecast client application

It supports weather forecast in range from 1 to 16 days. Make sure server is running first!

Installation and running

docker build --no-cache -t forecast_client .
docker run --rm -p 3333:3333 forecast_client

Embedding

! Note: use /daily_forecast or /hourly_forecast URL for daily and hourly data displaying !

<script>
    function injectWeatherWidget(theme = 'dark') {
      var iframe = document.createElement('iframe');
      // client app url
      // use /daily_forecast for daily data displaying
      iframe.src = `http://localhost:3333/hourly_forecast?theme=${theme}`;
      iframe.width = '100%';
      iframe.height = '100%';
      iframe.frameBorder = '0';
      iframe.style.border = 'none';
      iframe.style.width = '100%';
      iframe.style.minHeight = '480px';
      document.getElementById('weatherWidgetContainer').innerHTML = '';
      document.getElementById('weatherWidgetContainer').appendChild(iframe);
    }

    function toggleTheme() {
      var body = document.body;
      body.classList.toggle('dark');
      var theme = body.classList.contains('dark') ? 'dark' : 'light';
      injectWeatherWidget(theme);
    }

    window.addEventListener('DOMContentLoaded', function() {
      injectWeatherWidget('dark');
    });
  </script>

  <button onclick="toggleTheme()">Switch theme</button>

TODOs

• Docker container
• Decoupled custom hooks, infra, services and util functions
• MaterialUI components
• ThemeProvider for themes customization
• The website is responsive and look nice on all screens
• The website works in all modern browsers
• Responsible, adaptive design
• Add info about wind, clouds, precipitation
• Add weather icons
• Unit tests
• City autocomplete requests are cached in browser (localStorage)
• Add separate daily mode to show forecast in a round boxes (separate component & URL)

Theme support

2 modes available: daily and hourly.

Hourly mode examples:

dark (by default) and light themes supported

Daily mode examples: