Skip to main content
Version: 1.0.x

Demo Application

Overview​

The SkyPath React Demo is a front-end application that shows the SkyPath Web SDK on a map: turbulence observations, forecast, OneLayer and ADS-B data, with altitude, severity and time filters.

SDK Demo React App

Motivation​

The primary motivation behind developing the SkyPath React Demo is to provide a robust tool for developers and users to explore the functionalities of the SkyPath SDK within a real-world application context. This demo serves as a technical proof of concept that developers can leverage to understand SDK integration and data visualization techniques.

Access​

SDK Demo React App authentication page

info

To use the Demo App you need to provide configuration and authentication parameters to access the SkyPath platform.

  • SkyPath API key - If you don't have it please contact us at Start a trial with SkyPath;
  • User ID - Your user ID;
  • Company Name - Your company name;

You may use alternative methods to authenticate with the SDK. For more details, please refer to the SDK configuration documentation.

Architecture​

  • SDK setup: AuthWrapper.jsx creates the SDK with an API key or a signed JWT and passes it to the app;
  • Flows: every flow has its own hook (useObservationsFlow, useForecastFlow, useOneLayerFlow, useAdsbFlow). A shared useHexagonsFlow hook creates the flow when the component mounts, subscribes to onData, onError and onIsProcessingChange, and terminates the flow when the component unmounts;
  • Map polygon: the map viewport is turned into a polygon with GeoUtils.getMapPolygon and passed to every flow with updateConfig();
  • Observations and OneLayer: OneLayer already includes observations, so the demo runs OneLayer when it is enabled for the user and Observations otherwise;

Components Structure​

  • Atoms: basic UI elements such as AltitudeDisplay, Button and Dropdown;
  • Molecules: composite components such as the auth forms and the Slider parts (Track, Range, Thumb);
  • Organisms: complex components such as MapView and MapControls;
  • Hooks: one hook per flow, plus useMapLayers that decides which flows run and useMapState that holds the filter values;

Tech stack​

Quick Start​

You need Node.js 22.14 or later.

git clone https://github.com/Yamasee/skypath-web-sdk-demo.git
cd skypath-web-sdk-demo
npm install
npm run dev

Open http://localhost:5173/skypath-web-sdk-demo/ and sign in with your SkyPath credentials.