ickas / k-dash

A minimal and beautiful dashboard, as a weather balloon.

Intro

The K|Dash project is a dashboard that shows the forecasts for local farmers and stakeholders based on weather balloon data in a simple UI. From Kanda Weather Group, the balloon is a weather balloon that collects data and uses Machine Learning to make a simple 12-hour rain forecast.

The data used in K|Dash comes from two places, a .json file based on the "forecasts.txt" generated by the weather balloon and the dClimate API. K|Dash also has a preventive alerts component regarding flood risk and air quality.

Features Supported

• Handles many locations;
• Support multiple dates;
• Two sources of data;
• Empty and loading states;
• Alerts about air quality and flood risk;
• Clean UI;
• Illustrate a variety of forecast types;
• Support light/dark themes;
• Full responsive;
• Offline support (WPA).

Alerts

components/alerts.js

Air Quality

hooks/useAirQuality.js alert is based on the US Air Quality Index (AQI). It uses the wind speed values of the previous days to present a "moderate" and a "high risk" alert if the last day or the two previous days have not had the wind with a minimum speed of 5 m/s.

Flood Risk

hooks/useFloodRisk.js alert is based on dClimate API data referring to era5_surface_runoff and also has two alert levels, "moderate" and "high risk", based on the percentage of values read in a given period.

Offline Support

hooks/useSurfaceRunoffData.js is where the magic happens!

This synchronizes the data if necessary when the internet is available. Receiving the data from the dClimate API takes about 15/20 seconds, so useSurfaceRunoffData will see if the user has data hosted locally and the date of this data. If more up-to-date information is available in the API, K|Dash will update it; otherwise, it will use the previously recorded data.

UI

All the visual componentes are on the components/ui folder. Each component have a index.js file, that have the structure of the component, and a styles.js that have all the styling for that component (styled-components).

Getting Started

First, run the development server:

npm run dev
# or
yarn dev

Open http://localhost:3000 with your browser to see the result.

You can start editing the page by modifying pages/index.js. The page auto-updates as you edit the file.

Test Local

There is a flag in the next.config.js file that allows you to activate or not the "dev mode", which is fed by local information for demo and challenge purposes. This avoids the limit of requests that can be made to the API and the CORS Error.

Mock files

If mockAPI: true and needs to manipulate the data, go to the server/mocks/ folder is the mock files that replicate the balloon and server data:

• fakeSurfaceRunoff-accra.json for replicate era5_surface_runoff-hourly data from API relative to Accra, Ghana;
• fakeSurfaceRunoff-uyo.json for replicate era5_surface_runoff-hourly data from API relative to Uyo, Nigeria;
• gh-accra.json for replicate forecast from balloon relative to Accra, Ghana;
• ng-uyo.json for replicate forecast from balloon relative to Uyo, Nigeria;

CORS Error, what?

The CORS Error is an error from a security mechanism that browsers implement called the same-origin policy, one of the most common cyber attacks, which allows a malicious website to take advantage of the browser's cookie storage system.

So, if we put the mockAPI: true and using cors-anywhere, that is a proxy server that adds CORS headers to a request, it's possible to test everything and see the magic happens on hooks/useSurfaceRunoffData.js hook.

k-dash's Issues

Localhost:3000 fails to display content

Happens on both Chrome and Safari with no console messages displayed except for warning "GenerateSW has been called multiple times, perhaps due to running webpack in --watch mode."

OS Used: Ubuntu 18.04
Browsers: Firefox and Chrome
NPM version: 6.14.14
Next.js version: 11.0.1

Commands run:
$ npm run dev
--> Successful start of localhost on 3000
--> No page content