Migrated project into separate directories

2023-09-07 21:05:32 -04:00
parent 359c6f0ac5
commit 17d7407f1b
52 changed files with 88 additions and 8987 deletions
--- a/weather-ui/.eslintrc.json
+++ b/weather-ui/.eslintrc.json
@@ -0,0 +1,37 @@
+{
+    "root": true,
+    "parser": "@typescript-eslint/parser",
+    "plugins": [
+        // "@typescript-eslint",
+        // "prettier"
+    ],
+    "extends": [
+        // "prettier",
+        // "eslint:recommended",
+        // "next/core-web-vitals",
+        // "plugin:import/typescript",
+        // "plugin:prettier/recommended",
+        // "plugin:react/recommended",
+        // "plugin:@typescript-eslint/recommended",
+        // "plugin:@typescript-eslint/eslint-recommended",
+        // "plugin:@typescript-eslint/recommended-requiring-type-checking"
+    ],
+    "rules": {
+        "react-hooks/rules-of-hooks": "off", // error
+        "react-hooks/exhaustive-deps": "off",
+        "prettier/prettier": "off",
+        "@typescript-eslint/no-unused-vars": "off", // error
+        "@typescript-eslint/no-unsafe-argument": "off"
+    },
+    "overrides": [
+        {
+          "files": ["*.ts", "*.tsx"],
+          "extends": [
+            "plugin:@typescript-eslint/recommended",
+            "plugin:@typescript-eslint/recommended-requiring-type-checking"
+          ],
+          "parserOptions": {
+            "project": ["./tsconfig.json"]
+          }
+    }]
+}
--- a/weather-ui/.prettierrc.json
+++ b/weather-ui/.prettierrc.json
@@ -0,0 +1,7 @@
+{
+    "trailingComma": "es5",
+    "tabWidth": 4,
+    "semi": true,
+    "singleQuote": true,
+    "printWidth": 100
+}
--- a/weather-ui/Cargo.lock
+++ b/weather-ui/Cargo.lock
--- a/weather-ui/Makefile
+++ b/weather-ui/Makefile
@@ -0,0 +1,26 @@
+#!make
+
+SHELL := /bin/bash
+
+.PHONY: help build start stop lint
+
+help: ## This info
+	@echo
+	@cat Makefile | grep -E '^[a-zA-Z\/_-]+:.*?## .*$$' | awk 'BEGIN {FS = ":.*?## "}; {printf "\033[36m%-30s\033[0m %s\n", $$1, $$2}'
+	@echo
+
+install:  ## Install the dependencies
+	npm install
+
+build:  ## Install the dependencies and build
+	npm run build
+
+start:  ## Start the dev instance
+	npm install
+	npm run dev
+
+lint:  ## Run the linter
+	npm run lint
+
+clean:  ## Remove node modules
+	rm -rf node_modules
--- a/weather-ui/README.md
+++ b/weather-ui/README.md
@@ -0,0 +1,24 @@
+# Aviation Weather
+
+# Getting Started
+The main installed packages are the following:
+- [Next.js](https://nextjs.org/docs)
+- [ESLint](https://eslint.org/docs/latest/rules/)
+- [Typescript](https://www.typescriptlang.org/docs/)
+
+ESLint rules can be configured in the `.eslintrc.json` file.
+Prettier rules can be configured in the `.prettierrc.json` file.
+TypeScript rules can be configured in the `.tsconfig.json` file.
+
+Next.js (React Framework)
+- [Next.js Project Structure](https://nextjs.org/docs/getting-started/project-structure)
+- [Next.js App Routing](https://nextjs.org/docs/app/building-your-application/routing)
+- [Next.js Pages Routing](https://nextjs.org/docs/pages/building-your-application/routing)
+
+Redux
+- [Getting Started](https://redux.js.org/introduction/getting-started)
+- [Code Structure](https://redux.js.org/faq/code-structure)
+- [React Redux](https://redux.js.org/faq/react-redux)
+
+## Makefile
+`make help` to list all commands
--- a/weather-ui/next-env.d.ts
+++ b/weather-ui/next-env.d.ts
@@ -0,0 +1,5 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.
--- a/weather-ui/next.config.js
+++ b/weather-ui/next.config.js
@@ -0,0 +1,10 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  reactStrictMode: true,
+  swcMinify: true,
+  eslint: {
+    ignoreDuringBuilds: true
+  }
+}
+
+module.exports = nextConfig
--- a/weather-ui/package.json
+++ b/weather-ui/package.json
@@ -0,0 +1,42 @@
+{
+    "name": "aviation-weather",
+    "version": "0.1.0",
+    "private": true,
+    "scripts": {
+        "dev": "next dev",
+        "build": "next build",
+        "start": "next start",
+        "lint": "next lint"
+    },
+    "dependencies": {
+        "@fortawesome/fontawesome-svg-core": "^6.4.2",
+        "@fortawesome/free-regular-svg-icons": "^6.4.2",
+        "@fortawesome/free-solid-svg-icons": "^6.4.2",
+        "@fortawesome/react-fontawesome": "^0.2.0",
+        "axios": "^1.4.0",
+        "leaflet": "^1.9.4",
+        "next": "^13.4.19",
+        "react": "^18.2.0",
+        "react-dom": "^18.2.0",
+        "react-leaflet": "^4.2.1",
+        "recoil": "^0.7.7",
+        "xml-js": "^1.6.11"
+    },
+    "devDependencies": {
+        "@types/leaflet": "^1.9.3",
+        "@types/node": "20.4.5",
+        "@types/react": "18.2.16",
+        "@types/react-dom": "18.2.7",
+        "@typescript-eslint/eslint-plugin": "^6.2.0",
+        "@typescript-eslint/parser": "^6.2.0",
+        "autoprefixer": "^10.4.15",
+        "eslint": "8.45.0",
+        "eslint-config-next": "13.4.12",
+        "eslint-config-prettier": "^9.0.0",
+        "eslint-plugin-prettier": "^5.0.0",
+        "postcss": "^8.4.28",
+        "prettier": "^3.0.0",
+        "tailwindcss": "^3.3.3",
+        "typescript": "5.1.6"
+    }
+}
--- a/weather-ui/postcss.config.js
+++ b/weather-ui/postcss.config.js
@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}
--- a/weather-ui/public/favicon.ico
+++ b/weather-ui/public/favicon.ico
--- a/weather-ui/public/vercel.svg
+++ b/weather-ui/public/vercel.svg
@@ -0,0 +1,4 @@
+<svg width="283" height="64" viewBox="0 0 283 64" fill="none" 
+    xmlns="http://www.w3.org/2000/svg">
+    <path d="M141.04 16c-11.04 0-19 7.2-19 18s8.96 18 20 18c6.67 0 12.55-2.64 16.19-7.09l-7.65-4.42c-2.02 2.21-5.09 3.5-8.54 3.5-4.79 0-8.86-2.5-10.37-6.5h28.02c.22-1.12.35-2.28.35-3.5 0-10.79-7.96-17.99-19-17.99zm-9.46 14.5c1.25-3.99 4.67-6.5 9.45-6.5 4.79 0 8.21 2.51 9.45 6.5h-18.9zM248.72 16c-11.04 0-19 7.2-19 18s8.96 18 20 18c6.67 0 12.55-2.64 16.19-7.09l-7.65-4.42c-2.02 2.21-5.09 3.5-8.54 3.5-4.79 0-8.86-2.5-10.37-6.5h28.02c.22-1.12.35-2.28.35-3.5 0-10.79-7.96-17.99-19-17.99zm-9.45 14.5c1.25-3.99 4.67-6.5 9.45-6.5 4.79 0 8.21 2.51 9.45 6.5h-18.9zM200.24 34c0 6 3.92 10 10 10 4.12 0 7.21-1.87 8.8-4.92l7.68 4.43c-3.18 5.3-9.14 8.49-16.48 8.49-11.05 0-19-7.2-19-18s7.96-18 19-18c7.34 0 13.29 3.19 16.48 8.49l-7.68 4.43c-1.59-3.05-4.68-4.92-8.8-4.92-6.07 0-10 4-10 10zm82.48-29v46h-9V5h9zM36.95 0L73.9 64H0L36.95 0zm92.38 5l-27.71 48L73.91 5H84.3l17.32 30 17.32-30h10.39zm58.91 12v9.69c-1-.29-2.06-.49-3.2-.49-5.81 0-10 4-10 10V51h-9V17h9v9.2c0-5.08 5.91-9.2 13.2-9.2z" fill="#000"/>
+</svg>
--- a/weather-ui/src/app/airport/[icao]/page.tsx
+++ b/weather-ui/src/app/airport/[icao]/page.tsx
@@ -0,0 +1,13 @@
+import { getAirport } from "@/js/state";
+import Link from "next/link";
+
+
+export default function Page({ params }: { params: { icao: string } }) {
+    const airport = getAirport(params.icao);
+    return <>
+        <div className="border-b border-gray-200 bg-gray-400 px-4 py-5 sm:px-6 flex justify-between">
+            <h3 className="text-base font-semibold leading-6 text-gray-900">{airport?.name}</h3>
+            <Link href={"/"}>Back</Link>
+        </div>
+    </>;
+}
--- a/weather-ui/src/app/layout.tsx
+++ b/weather-ui/src/app/layout.tsx
@@ -0,0 +1,28 @@
+import React from 'react';
+import RecoilRootWrapper from '@app/recoil-root-wrapper';
+
+
+import '@fortawesome/fontawesome-svg-core/styles.css';
+// Prevent fontawesome from adding its CSS since we did it manually above:
+import { config } from '@fortawesome/fontawesome-svg-core';
+config.autoAddCss = false;
+import 'styles/globals.css';
+import Link from 'next/link';
+
+export default function RootLayout({ children }: { children: React.ReactNode }) {
+    return (
+        <html lang="en">
+            <link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.1/dist/leaflet.css" />
+            <head>
+                <title>Aviation Weather</title>
+            </head>
+            <body className='bg-gray-600'>
+                <div className="flex justify-between bg-gray-700 px-4 py-1 sm:px-6 select-none">
+                    <h3 className="text-lg font-bold leading-6 text-gray-200">Aviation Weather</h3>
+                    <Link className='text-base text-gray-200' href={'/profile'}>Profile</Link>
+                </div>
+                <RecoilRootWrapper>{children}</RecoilRootWrapper>
+            </body>
+        </html>
+    );
+}
--- a/weather-ui/src/app/page.tsx
+++ b/weather-ui/src/app/page.tsx
@@ -0,0 +1,28 @@
+import React from 'react';
+import { setAirport } from "@/js/state";
+import { Airport } from "@/js/airport";
+import Metar from '@/components/Metar';
+
+// setAirport('KJYO', new Airport('Leesburg Executive Airport', 'KJYO'))
+setAirport('KHEF', new Airport('Manassas Regional Airpoirt', 'KHEF', 38.724, -77517))
+// setAirport('KIAD', new Airport('Dulles International Airport', 'KIAD'))
+// setAirport('KFDK', new Airport('Frederick Municipal Airport', 'KFDK'))
+// setAirport('KMRB', new Airport('Eastern West Virginia Regional Airport', 'KMRB'))
+// setAirport('KOKV', new Airport('Winchester Regional Airport', 'KOKV'))
+// setAirport('KFRR', new Airport('Front Royal-Warren County Airport', 'KFRR'))
+// setAirport('KLUA', new Airport('Luray Caverns Airport', 'KLUA'))
+// setAirport('KSHD', new Airport('Shenandoah Valley Airport', 'KSHD'))
+// setAirport('KCHO', new Airport('Charlottesville-Albemarle Airport', 'KCHO'))
+// setAirport('KCJR', new Airport('Culpeper Regional Airport', 'KCJR'))
+// setAirport('KHWY', new Airport('Warrenton-Fauquier Airport', 'KHWY'))
+// setAirport('KRMN', new Airport('Stafford Regional Airport', 'KRMN'))
+// setAirport('KEZF', new Airport('Shannon Airport', 'KEZF'))
+// setAirport('KDCA', new Airport('Ronald Reagan Washington National Airport', 'KDCA'))
+
+export default function Page() {
+    return <>
+        <div>
+            <Metar/>
+        </div>
+    </>
+}
--- a/weather-ui/src/app/recoil-root-wrapper.tsx
+++ b/weather-ui/src/app/recoil-root-wrapper.tsx
@@ -0,0 +1,8 @@
+'use client';
+
+import { RecoilRoot } from 'recoil';
+import React, { ReactNode } from 'react';
+
+export default function RecoilRootWrapper({ children }: { children: ReactNode }) {
+    return <RecoilRoot>{children}</RecoilRoot>
+};
--- a/weather-ui/src/app/user/page.tsx
+++ b/weather-ui/src/app/user/page.tsx
@@ -0,0 +1,3 @@
+export default function Profile() {
+  
+}
--- a/weather-ui/src/atoms/index.ts
+++ b/weather-ui/src/atoms/index.ts
@@ -0,0 +1,7 @@
+export const airportsState = atom({
+    key: 'airportsState',
+    default: [] as Airport[]
+});
+
+import { Airport } from "@/js/airport";
+import { atom } from "recoil";
--- a/weather-ui/src/components/Metar.tsx
+++ b/weather-ui/src/components/Metar.tsx
@@ -0,0 +1,101 @@
+import { Airport } from "@/js/airport";
+import { getAirports, setAirport } from "@/js/state";
+import { Metar, getMetars } from "@/js/weather"
+import Link from "next/link"
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faArrowsSpin, faLocationArrow } from '@fortawesome/free-solid-svg-icons'
+import dynamic from "next/dynamic";
+
+export default async function Metar() {
+    const Map = dynamic(() => import("@/components/MetarMap"), {
+        loading: () => <div className="grid min-h-full place-items-center px-6 py-24 sm:py-32 lg:px-8">
+            <div className="text-center"><p className="mt-4 text-3xl font-bold tracking-tight text-gray-300 sm:text-5xl">Loading...</p></div>
+        </div>,
+        ssr: false
+    });
+    
+    async function update() {
+        const airports: Airport[] = getAirports();
+        const metars = await getMetars(airports);
+        for (let i = 0; i < metars.length; i++) {
+            airports[i].metar = metars[i];
+            airports[i].latitude = metars[i].latitude;
+            airports[i].longitude = metars[i].longitude;
+            setAirport(airports[i].icao, airports[i]);
+        }
+        return getAirports();
+    }
+    await update();
+
+    return <>
+        <Map airportString={JSON.stringify(getAirports())}/>
+    </>
+}
+
+export function MetarGrid() {
+    const airports: Airport[] = getAirports();
+
+    return <>
+        <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
+            {airports.map((airport) => (
+                <MetarCard airport={airport}/>
+            ))}
+        </div>
+    </>
+}
+
+function MetarCard({ airport}: { airport: Airport}) {
+    function metarBGColor(metar: Metar | undefined) {
+        if (metar?.flight_category == 'VFR') {
+            return 'bg-emerald-600'
+        } else if (metar?.flight_category == 'MVFR') {
+            return 'bg-blue-600'
+        } else if (metar?.flight_category == 'IFR') {
+            return 'bg-orange-600'
+        } else if (metar?.flight_category == 'LIFR') {
+            return 'bg-red-600'
+        } else {
+            return 'bg-black'
+        }
+    }
+
+    function windColor(metar: Metar | undefined) {
+        if (Number(metar?.wind_speed_kt) <= 9) {
+            return 'bg-green-300';
+        } else if (Number(metar?.wind_speed_kt) > 9) {
+            return 'bg-orange-300';
+        } else if (Number(metar?.wind_speed_kt) > 12) {
+            return 'bg-red-300';
+        }
+    }
+
+    return (
+        <div
+            key={airport.metar?.station_id}
+            className={`relative flex items-center space-x-3 rounded-lg border border-gray-300 bg-white px-4 py-2 shadow-sm focus-within:ring-2 focus-within:ring-indigo-500 focus-within:ring-offset-2 hover:border-gray-400`}
+        >
+            <div className="min-w-0 flex-1">
+            <Link href={`/airport/${airport.icao}`}>
+                <span className="absolute inset-0" aria-hidden="true" />
+                <p className="text-gray-900 pb-1"><span className='font-semibold'>{airport.icao}</span> {airport.name}</p>
+                <hr/>
+                <p className='text-sm font-medium text-gray-500'>{airport.metar?.raw_text}</p>
+                <div className='mt-2'>
+                    <span className={`truncate text-sm text-white ${metarBGColor(airport.metar)} inline-block py-2 px-4 rounded-full`}>{airport.metar?.flight_category? airport.metar?.flight_category : 'UNKN'}</span>
+                    <span className="truncate inline-block py-2 px-2">
+                        <span className={`text-black ${windColor(airport.metar)} p-2 rounded-full mr-1`}>
+                            {airport.metar && airport.metar.wind_dir_degrees && Number(airport.metar.wind_dir_degrees) > 0?
+                                <FontAwesomeIcon className="pr-1" icon={faLocationArrow} style={{rotate: `${-45  + 180 + Number(airport.metar.wind_dir_degrees)}deg`}}/>: <></>
+                            }
+                            {airport.metar && airport.metar.wind_dir_degrees && airport.metar.wind_dir_degrees == 'VRB'?
+                                <FontAwesomeIcon className="pr-1" icon={faArrowsSpin}/>: <></>
+                            }
+                            {airport.metar?.wind_speed_kt != undefined && airport.metar?.wind_speed_kt > 0? `${airport.metar?.wind_speed_kt} KT` : "CALM"}
+                        </span>
+                    </span>
+                </div>
+            </Link>
+            </div>
+        </div>
+    );
+}
--- a/weather-ui/src/components/MetarMap.tsx
+++ b/weather-ui/src/components/MetarMap.tsx
@@ -0,0 +1,146 @@
+'use client';
+import { Airport } from '@/js/airport';
+import { Metar } from '@/js/weather';
+import { faArrowsSpin, faLocationArrow, faLocationPin } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { DivIcon } from 'leaflet';
+import Link from 'next/link';
+import { useEffect, useState } from 'react';
+import ReactDOMServer from 'react-dom/server';
+import { MapContainer, Marker, Popup, TileLayer, Tooltip, useMapEvents } from 'react-leaflet';
+
+export default function Map({ airportString }: { airportString: string }) {
+  const [airports, setAirports] = useState<Airport[]>(JSON.parse(airportString));
+
+  useEffect(() => {
+  }, []);
+
+  return (
+    <MapContainer
+      center={[38.7209, -77.5133]}
+      zoom={8}
+      maxZoom={12}
+      minZoom={3}
+      zoomControl={false}
+      style={{ height: '96.5vh' }}
+      className='overflow-y-hidden overflow-x-hidden'
+      attributionControl={false}
+    >
+      <MapTiles airports={airports}/>
+  </MapContainer>
+  );
+}
+
+function MapTiles({ airports }: {airports: Airport[] }) {
+  const [zoomLevel, setZoomLevel] = useState(8);
+  // const [dragging, setDragging] = useState(false);
+  // const [center, setCenter] = useState([50, 10.5]);
+  const mapEvents = useMapEvents({
+    zoomend: () => {
+      setZoomLevel(mapEvents.getZoom());
+    },
+    // mouseup: () => {
+    //   setCenter([mapEvents.getCenter().lat, mapEvents.getCenter().lng]);
+    // }
+  });
+
+  function metarBGColor(metar: Metar | undefined) {
+    if (metar?.flight_category == 'VFR') {
+        return 'bg-emerald-600'
+    } else if (metar?.flight_category == 'MVFR') {
+        return 'bg-blue-600'
+    } else if (metar?.flight_category == 'IFR') {
+        return 'bg-orange-600'
+    } else if (metar?.flight_category == 'LIFR') {
+        return 'bg-red-600'
+    } else {
+        return 'bg-black'
+    }
+  }
+
+  function metarTextColor(metar: Metar | undefined) {
+    if (metar?.flight_category == 'VFR') {
+        return 'text-emerald-700'
+    } else if (metar?.flight_category == 'MVFR') {
+        return 'text-blue-700'
+    } else if (metar?.flight_category == 'IFR') {
+        return 'text-orange-700'
+    } else if (metar?.flight_category == 'LIFR') {
+        return 'text-red-700'
+    } else {
+        return 'text-black'
+    }
+  }
+
+  function windColor(metar: Metar | undefined) {
+    if (Number(metar?.wind_speed_kt) <= 9) {
+        return 'bg-green-300';
+    } else if (Number(metar?.wind_speed_kt) > 9) {
+        return 'bg-orange-300';
+    } else if (Number(metar?.wind_speed_kt) > 12) {
+        return 'bg-red-300';
+    }
+  }
+
+  function iconSize() {
+    if (zoomLevel <= 4) {
+      return 'text-xs'
+    } else if (zoomLevel <= 5) {
+      return 'text-sm';
+    } else if (zoomLevel <= 6) {
+      return 'text-base';
+    } else if (zoomLevel <= 7) {
+      return 'text-lg';
+    } else if (zoomLevel <= 9) {
+      return 'text-2xl';
+    } else if (zoomLevel <= 11) {
+      return 'text-3xl';
+    } else if (zoomLevel >= 12) {
+      return 'text-4xl';
+    }
+  }
+
+  function icon(airport: Airport) {
+    return new DivIcon({
+      html: ReactDOMServer.renderToString(<FontAwesomeIcon icon={faLocationPin} className={`${iconSize()} ${metarTextColor(airport.metar)}`}/>),
+      className: 'metar-marker-icon'
+    });
+  }
+
+  return <>
+    <TileLayer
+          attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
+          url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
+      />
+      {airports.map((airport) => (
+        <>
+          <Marker position={[airport.latitude, airport.longitude]} icon={icon(airport)}>
+          <Tooltip className='metar-tooltip' direction="top" offset={[5, -5]} opacity={1}>{airport.icao}</Tooltip>
+            <Popup>
+              <div className="min-w-0 flex-1 select-none">
+                <Link href={`/airport/${airport.icao}`}>
+                  <h1 className="text-base text-gray-900 pb-1"><span className='font-semibold'>{airport.icao}</span> {airport.name}</h1>
+                </Link>
+                  <hr/>
+                  <p className='text-sm font-medium text-gray-500'>{airport.metar?.raw_text}</p>
+                  <div className='mt-2 flex'>
+                    <span className={`flex inline-block text-sm text-white ${metarBGColor(airport.metar)} py-2 px-4 rounded-full`}>{airport.metar?.flight_category? airport.metar?.flight_category : 'UNKN'}</span>
+                    <div className="flex inline-block px-2">
+                      <span className={`text-sm text-black ${windColor(airport.metar)} py-2 px-2 rounded-full`}>
+                          {airport.metar && airport.metar.wind_dir_degrees && Number(airport.metar.wind_dir_degrees) > 0?
+                              <FontAwesomeIcon className="pr-1" icon={faLocationArrow} style={{rotate: `${-45  + 180 + Number(airport.metar.wind_dir_degrees)}deg`}}/>: <></>
+                          }
+                          {airport.metar && airport.metar.wind_dir_degrees && airport.metar.wind_dir_degrees == 'VRB'?
+                              <FontAwesomeIcon className="pr-1" icon={faArrowsSpin}/>: <></>
+                          }
+                          {airport.metar?.wind_speed_kt != undefined && airport.metar?.wind_speed_kt > 0? `${airport.metar?.wind_speed_kt} KT` : 'CALM'}
+                      </span>
+                    </div>
+                  </div>
+              </div>
+            </Popup>
+        </Marker>
+        </>
+      ))}
+    </>;
+}
--- a/weather-ui/src/js/airport.ts
+++ b/weather-ui/src/js/airport.ts
@@ -0,0 +1,17 @@
+import { Metar } from "./weather";
+
+export class Airport {
+    name: string;
+    icao: string;
+    latitude: number;
+    longitude: number;
+    metar: Metar | undefined;
+
+    constructor(name: string, icao: string, latitude: number, longitude: number) {
+        this.name = name;
+        this.icao = icao;
+        this.latitude = latitude;
+        this.longitude = longitude;
+        this.metar = undefined;
+    }
+}
--- a/weather-ui/src/js/state.ts
+++ b/weather-ui/src/js/state.ts
@@ -0,0 +1,15 @@
+import { Airport } from "./airport";
+
+const airports: Map<string, Airport> = new Map();
+
+export function setAirport(icao: string, airport: Airport) {
+    airports.set(icao, airport);
+}
+
+export function getAirport(icao: string): Airport | undefined {
+    return airports.get(icao);
+}
+
+export function getAirports(): Airport[] {
+    return [...airports.values()];
+}
--- a/weather-ui/src/js/weather.ts
+++ b/weather-ui/src/js/weather.ts
@@ -0,0 +1,116 @@
+/* eslint-disable @typescript-eslint/no-unsafe-argument */
+/* eslint-disable @typescript-eslint/no-unsafe-assignment */
+/* eslint-disable @typescript-eslint/no-unsafe-member-access */
+import axios from 'axios';
+// import { xml2json } from 'xml-js';
+import { Airport } from './airport';
+
+// const base_url = 'https://beta.aviationweather.gov/cgi-bin/data';
+
+export async function getMetars(airports: Airport[]): Promise<Metar[]> {
+    const stationICAOs: string = airports
+    .map((airport) => airport.icao)
+    .join(',');
+    const url = `http://localhost:5000/metars/KHEF`;
+    const response = await axios.get(url).catch((error) => console.error(error));
+    console.log(response);
+    return [];
+}
+
+// export async function getMetars(airports: Airport[]): Promise<Metar[]> {
+//     const stationICAOs: string = airports
+//         .map((airport) => airport.icao)
+//         .join(',');
+//     const url = `${base_url}/metar.php?ids=${stationICAOs}&format=xml`;
+//     const response = await axios
+//         .get(`${url}`)
+//         .catch((error) => console.error(`${error}`));
+//     const metars: Metar[] = [];
+//     if (response != null && response != undefined) {
+//         const json = xml2json(response.data, { compact: true });
+//         const jsonObject = JSON.parse(json);
+//         let metarData = jsonObject?.response?.data?.METAR;
+//         if (!Array.isArray(metarData)) {
+//             metarData = [metarData];
+//         }
+//         for (const data of metarData) {
+//             const sky_condition: {
+//                 sky_cover: string;
+//                 cloud_base_ft_agl: number;
+//             }[] = [];
+//             if (Array.isArray(data.sky_condition)) {
+//                 for (const sc of data.sky_condition) {
+//                     sky_condition.push({
+//                         sky_cover: sc.sky_cover,
+//                         cloud_base_ft_agl: Number(sc.cloud_base_ft_agl)
+//                     })
+//                 }
+//             } else {
+//                 sky_condition.push({
+//                     sky_cover: data.sky_condition?.sky_cover,
+//                     cloud_base_ft_agl: Number(data.sky_condition?.cloud_base_ft_agl)
+//                 })
+//             }
+//             const metar: Metar = {
+//                 raw_text: data.raw_text._text,
+//                 station_id: data.station_id._text,
+//                 observation_time: data.observation_time._text,
+//                 latitude: Number(data.latitude._text),
+//                 longitude: Number(data.longitude._text),
+//                 temp_c: Number(data.temp_c._text),
+//                 dewpoint_c: Number(data.dewpoint_c._text),
+//                 wind_dir_degrees: data.wind_dir_degrees._text,
+//                 wind_speed_kt: Number(data.wind_speed_kt._text),
+//                 visibility_statute_mi: data.visibility_statute_mi?._text,
+//                 altim_in_hg: Number(data.altim_in_hg?._text),
+//                 sea_level_pressure_mb: data.sea_level_pressure_mb?._text,
+//                 quality_control_flags: {
+//                     auto: data.quality_control_flags?.auto?._text == 'TRUE',
+//                     auto_station: data.quality_control_flags?.auto_station?._text == 'TRUE',
+//                 },
+//                 wx_string: data.wx_string?._text,
+//                 sky_condition: sky_condition,
+//                 flight_category: data.flight_category._text,
+//                 three_hr_pressure_tendency_mb: data.three_hr_pressure_tendency_mb?._text,
+//                 metar_type: data.metar_type._text,
+//                 maxT_c: Number(data.maxT_c?._text),
+//                 minT_c: Number(data.minT_c?._text),
+//                 precip_in: Number(data.precip_in?._text),
+//                 elevation_m: Number(data.elevation_m._text),
+//             };
+//             metars.push(metar);
+//         }
+//     }
+//     return metars;
+// }
+
+export interface Metar {
+    raw_text: string;
+    station_id: string;
+    observation_time: string;
+    latitude: number;
+    longitude: number;
+    temp_c: number;
+    dewpoint_c: number;
+    wind_dir_degrees: string;
+    wind_speed_kt: number;
+    visibility_statute_mi: string;
+    altim_in_hg: number;
+    sea_level_pressure_mb: number;
+    quality_control_flags: {
+        auto: boolean;
+        auto_station: boolean;
+    };
+    wx_string: string;
+    sky_condition: {
+        sky_cover: string;
+        cloud_base_ft_agl: number;
+    }[];
+    flight_category: string;
+    three_hr_pressure_tendency_mb: number;
+    metar_type: string;
+    maxT_c: number;
+    minT_c: number;
+    precip_in: number;
+    elevation_m: number;
+}
--- a/weather-ui/styles/Home.module.css
+++ b/weather-ui/styles/Home.module.css
@@ -0,0 +1,116 @@
+.container {
+  padding: 0 2rem;
+}
+
+.main {
+  min-height: 100vh;
+  padding: 4rem 0;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+
+.footer {
+  display: flex;
+  flex: 1;
+  padding: 2rem 0;
+  border-top: 1px solid #eaeaea;
+  justify-content: center;
+  align-items: center;
+}
+
+.footer a {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-grow: 1;
+}
+
+.title a {
+  color: #0070f3;
+  text-decoration: none;
+}
+
+.title a:hover,
+.title a:focus,
+.title a:active {
+  text-decoration: underline;
+}
+
+.title {
+  margin: 0;
+  line-height: 1.15;
+  font-size: 4rem;
+}
+
+.title,
+.description {
+  text-align: center;
+}
+
+.description {
+  margin: 4rem 0;
+  line-height: 1.5;
+  font-size: 1.5rem;
+}
+
+.code {
+  background: #fafafa;
+  border-radius: 5px;
+  padding: 0.75rem;
+  font-size: 1.1rem;
+  font-family: Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono,
+    Bitstream Vera Sans Mono, Courier New, monospace;
+}
+
+.grid {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-wrap: wrap;
+  max-width: 800px;
+}
+
+.card {
+  margin: 1rem;
+  padding: 1.5rem;
+  text-align: left;
+  color: inherit;
+  text-decoration: none;
+  border: 1px solid #eaeaea;
+  border-radius: 10px;
+  transition: color 0.15s ease, border-color 0.15s ease;
+  max-width: 300px;
+}
+
+.card:hover,
+.card:focus,
+.card:active {
+  color: #0070f3;
+  border-color: #0070f3;
+}
+
+.card h2 {
+  margin: 0 0 1rem 0;
+  font-size: 1.5rem;
+}
+
+.card p {
+  margin: 0;
+  font-size: 1.25rem;
+  line-height: 1.5;
+}
+
+.logo {
+  height: 1em;
+  margin-left: 0.5rem;
+}
+
+@media (max-width: 600px) {
+  .grid {
+    width: 100%;
+    flex-direction: column;
+  }
+}
--- a/weather-ui/styles/globals.css
+++ b/weather-ui/styles/globals.css
@@ -0,0 +1,36 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+html,
+body {
+  padding: 0;
+  margin: 0;
+  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
+    Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
+}
+
+a {
+  color: inherit;
+  text-decoration: none;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+.metar-tooltip {
+  position: absolute;
+  padding: 6px;
+  background-color: #000;
+  border: 1px solid #fff;
+  border-radius: 3px;
+  color: #222;
+  white-space: nowrap;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  pointer-events: none;
+  box-shadow: 0 1px 3px rgba(0,0,0,0.4);
+}
--- a/weather-ui/tailwind.config.js
+++ b/weather-ui/tailwind.config.js
@@ -0,0 +1,11 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: [
+    "./src/**/*.{js,ts,jsx,tsx,mdx}",
+  ],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+}
+
--- a/weather-ui/tsconfig.json
+++ b/weather-ui/tsconfig.json
@@ -0,0 +1,44 @@
+{
+  "compilerOptions": {
+    "target": "ES2015",
+    "downlevelIteration": true,
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"],
+      "@app/*": ["./src/app/*"],
+      "@components/*": ["src/components/*"],
+      "@js/*": ["src/js"]
+    }
+  },
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    ".next/types/**/*.ts"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
+}