fixed bug: Error handling when submitting form with wrong api key

README.md

@@ -0,0 +1,95 @@
+# Weather App
+
+This is a simple weather application that allows users to view current weather data for a specified location. The app is built using React and TypeScript, and it fetches weather data from an external API.
+
+> For that we use the OpenWeatherMap API. You can get your own API key by signing up at [OpenWeatherMap](https://openweathermap.org/api).
+
+## Features
+
+- Search for weather by city name
+- Display current weather conditions including temperature, humidity, and wind speed
+- Responsive design for mobile and desktop views
+- Change API key preferences
+- Display weather data in a user-friendly format
+
+## Installation
+### Prerequisites
+
+To install and run this application, you need the following tools:
+
+- Git (for cloning the repository)
+
+**and**
+
+- Node.js (v14 or higher)
+- npm (Node Package Manager)
+
+**or**
+
+- Docker (for running the app in a container)
+
+### 1st step - Get the source code
+**You can either clone the repository or download the latest release. Keep in mind that the cloned version may contain bugs.**
+1. Clone the repository:
+   ```bash
+   git clone https://git.the1s.de/theis.gaedigk/weather-app.git
+   ```
+
+**or**
+
+1. Download the latest release from the [releases page](https://git.the1s.de/theis.gaedigk/weather-app/releases/latest).
+2. Unzip the downloaded file to your desired location.
+
+#### 2nd step - Using Node.js and npm
+
+1. Navigate to the frontend project directory:
+   ```bash
+   cd weather-app/frontend
+   ```
+2. Install dependencies:
+   ```bash
+   npm install
+   ```
+3. Start the development server:
+   ```bash
+   npm run dev
+   ```
+4. Open your browser and go to `http://localhost:7002` to view the app.
+   **Note:** There is also a backend server directory, which is currently not in use. - You can ignore it for now.
+
+**or**
+
+#### 2nd step - Using Docker
+
+1. Navigate to the root path project directory:
+   ```bash
+   cd weather-app
+   ```
+2. Run in a Docker container:
+   ```bash
+   docker compose up -d --build
+   ```
+3. Open your browser and go to `http://localhost:7002` to view the app.
+   **Note:** There is also a backend server directory, which is currently not in use. - You can ignore it for now.
+
+## Usage
+
+1. Get an API key from [OpenWeatherMap](https://openweathermap.org/api).
+2. Click on the "Set API Key" button in the header to enter your API key.
+3. Enter a city name in the search bar and press Enter or click the "Get Weather" button.
+
+**Now you can view the current weather data for the specified city!**
+
+# Other Information
+
+## Technologies Used
+
+- React
+- TypeScript
+- Tailwind CSS
+- OpenWeatherMap API
+- Vite
+
+## Version
+
+**On this branch (main) you will find the latest version of the weather app, which includes several improvements and bug fixes. But it is not yet fully functional. The app is still in development, and some features may not work as expected.**

RELEASE_NOTES.md

@@ -0,0 +1,9 @@
+## Release Notes
+
+### New Features
+- Changed **web panel** backend, so you don't need to set the API key anymore. [Web Panel](https://weather.the1s.de)
+- You can now see the **last updated** time in the web panel.
+
+### Improvements
+- Changed Website Icons to lucide react icons
+- Changed overall handling of the panel

docker-compose.yml

@@ -4,26 +4,17 @@ services:
     build: ./frontend
     ports:
       - "7002:7002"
-    networks:
-      - proxynet
     environment:
       - CHOKIDAR_USEPOLLING=true
     volumes:
       - ./frontend:/app
       - /app/node_modules
     restart: unless-stopped
-
-  backend:
-    container_name: backend
-    build: ./backend
-    ports:
-      - "7001:7001"
-    networks:
-      - proxynet
-    volumes:
-      - ./backend:/bikelane-backend
-    restart: unless-stopped
-
-networks:
-  proxynet:
-    external: true
+#  backend:
+#   container_name: backend
+#  build: ./backend
+# ports:
+#  - "7001:7001"
+#volumes:
+#  - ./backend:/bikelane-backend
+# restart: unless-stopped

frontend/Dockerfile

@@ -9,4 +9,4 @@ COPY . .
 
 EXPOSE 7002
 
-CMD ["npm", "start"]
+CMD ["npm", "run", "dev"]

frontend/index.html

@@ -5,7 +5,7 @@
     <link
       rel="icon"
       type="image/svg+xml"
-      href="./src/assets/cloud-sun-fill.svg"
+      href="./src/assets/cloud-sun-fill.png"
     />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Weather App</title>

frontend/package-lock.json

@@ -12,6 +12,7 @@
         "bootstrap-icons": "^1.13.1",
         "js-cookie": "^3.0.5",
         "jscookie": "^1.1.0",
+        "lucide-react": "^0.536.0",
         "react": "^19.1.0",
         "react-dom": "^19.1.0",
         "react-toastify": "^11.0.5",
@@ -3221,6 +3222,15 @@
         "yallist": "^3.0.2"
       }
     },
+    "node_modules/lucide-react": {
+      "version": "0.536.0",
+      "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.536.0.tgz",
+      "integrity": "sha512-2PgvNa9v+qz4Jt/ni8vPLt4jwoFybXHuubQT8fv4iCW5TjDxkbZjNZZHa485ad73NSEn/jdsEtU57eE1g+ma8A==",
+      "license": "ISC",
+      "peerDependencies": {
+        "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
     "node_modules/magic-string": {
       "version": "0.30.17",
       "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.17.tgz",

frontend/package.json

@@ -14,6 +14,7 @@
     "bootstrap-icons": "^1.13.1",
     "js-cookie": "^3.0.5",
     "jscookie": "^1.1.0",
+    "lucide-react": "^0.536.0",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
     "react-toastify": "^11.0.5",

frontend/src/components/ChangeAPI.tsx

@@ -1,22 +1,29 @@
 import { useState } from "react";
 import React from "react";
 import { changeAPIcookie } from "../utils/changeAPIcookie";
+import { KeyRound } from "lucide-react";
 
 interface Props {
   currentAPIKey: string;
+  onClose: () => void;
 }
 
-const ChangeAPI: React.FC<Props> = ({ currentAPIKey }) => {
+const ChangeAPI: React.FC<Props> = ({ currentAPIKey, onClose }) => {
   const [apiKey, setApiKey] = useState(currentAPIKey);
 
+  const handleUpdate = () => {
+    changeAPIcookie(apiKey);
+    onClose();
+  };
+
   return (
     <div className="w-full">
       <h2 className="text-2xl font-bold mb-2 text-blue-700">Change API Key</h2>
-      <p className="mb-2 text-gray-600">
+      <h4 className="mb-2 font-semibold text-gray-600">
         Update your API key to fetch weather data.
-      </p>
-      <div className="mb-6 flex items-center gap-2 text-gray-600">
-        <span>We are using</span>
+      </h4>
+      <div className="mb-6 flex items-center gap-2 font-style: italic text-gray-500 flex-wrap text-">
+        <p>We are using</p>
         <a
           href="https://openweathermap.org/api"
           className="text-blue-600 font-semibold underline hover:text-blue-800"
@@ -25,26 +32,29 @@ const ChangeAPI: React.FC<Props> = ({ currentAPIKey }) => {
         >
           OpenWeatherMap
         </a>
-        <span>API for fetching weather data.</span>
+        <p>API for fetching weather data.</p>
       </div>
       <form className="flex flex-col gap-4">
         <label htmlFor="apiKey" className="font-medium text-gray-700">
           API Key:
         </label>
-        <input
-          type="text"
-          id="apiKey"
-          name="apiKey"
-          placeholder="Enter your API key"
-          value={apiKey}
-          onChange={(e) => setApiKey(e.target.value)}
-          required
-          className="border border-blue-300 rounded-xl px-4 py-3 focus:outline-none focus:ring-2 focus:ring-blue-400 bg-blue-50 text-blue-900 font-mono"
-        />
+        <div className="flex items-center gap-2 w-full">
+          <KeyRound size={32} />
+          <input
+            type="text"
+            id="apiKey"
+            name="apiKey"
+            placeholder="Enter your API key"
+            value={apiKey}
+            onChange={(e) => setApiKey(e.target.value)}
+            required
+            className="border border-blue-300 rounded-xl px-6 py-3 focus:outline-none focus:ring-2 focus:ring-blue-400 bg-blue-50 text-blue-900 font-mono w-full"
+          />
+        </div>
         <button
-          type="button"
-          className="bg-gradient-to-r from-blue-600 to-blue-400 text-white font-bold px-6 py-3 rounded-xl shadow-lg hover:from-blue-700 hover:to-blue-500 transition-all"
-          onClick={() => changeAPIcookie(apiKey)}
+          type="submit"
+          className="cursor-pointer bg-gradient-to-r from-blue-600 to-blue-400 text-white font-bold px-6 py-3 rounded-xl shadow-lg hover:from-blue-700 hover:to-blue-500 transition-all"
+          onClick={handleUpdate}
         >
           Update API Key
         </button>

frontend/src/components/ChangePreferences.tsx

@@ -0,0 +1,89 @@
+import React, { useState } from "react";
+import { myToast } from "../utils/toastify";
+import { Settings2, SunMoon, Thermometer } from "lucide-react";
+
+const getInitialTheme = () => localStorage.getItem("theme") || "light";
+const getInitialUnit = () => localStorage.getItem("unit") || "metric";
+
+interface Props {
+  onClose: () => void;
+}
+
+const ChangePreferences: React.FC<Props> = ({ onClose }) => {
+  const [unit, setUnit] = useState(getInitialUnit());
+  const [theme, setTheme] = useState(getInitialTheme());
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    localStorage.setItem("unit", unit);
+    localStorage.setItem("theme", theme);
+    myToast("Preferences saved successfully!", "success");
+    onClose();
+  };
+
+  // Theme-Optionen so sortieren, dass die aktuelle Auswahl oben steht
+  const themeOptions =
+    theme === "dark"
+      ? [
+          { value: "dark", label: "Dark" },
+          { value: "light", label: "Light" },
+        ]
+      : [
+          { value: "light", label: "Light" },
+          { value: "dark", label: "Dark" },
+        ];
+
+  return (
+    <div className="w-full max-w-md mx-auto bg-white rounded-2xl shadow-2xl border border-blue-200 p-8">
+      <h2 className="text-3xl font-extrabold mb-6 text-blue-700 flex items-center gap-2">
+        <Settings2 />
+        Preferences
+      </h2>
+      <form onSubmit={handleSubmit} className="space-y-6">
+        {/* Unit */}
+        <div>
+          <label className="block text-sm font-semibold text-gray-700 mb-2 items-center gap-2">
+            <Thermometer />
+            Temperature Unit
+          </label>
+          <select
+            className="cursor-pointer w-full border-2 border-blue-200 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-400 transition"
+            value={unit}
+            onChange={(e) => setUnit(e.target.value)}
+          >
+            <option value="metric">Celsius (°C)</option>
+            <option value="imperial">Imperial (°F)</option>
+            <option value="standard">Standard (K)</option>
+          </select>
+        </div>
+        {/* Theme */}
+        <div>
+          <label className="block text-sm font-semibold text-gray-700 mb-2 items-center gap-2">
+            <SunMoon />
+            Theme
+          </label>
+          <select
+            className="cursor-pointer w-full border-2 border-blue-200 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-400 transition"
+            value={theme}
+            onChange={(e) => setTheme(e.target.value)}
+          >
+            {themeOptions.map((opt) => (
+              <option key={opt.value} value={opt.value}>
+                {opt.label}
+              </option>
+            ))}
+          </select>
+        </div>
+        {/* Submit */}
+        <button
+          type="submit"
+          className="cursor-pointer w-full bg-gradient-to-r from-blue-600 to-blue-400 text-white py-3 rounded-xl font-bold text-lg shadow-lg hover:from-blue-700 hover:to-blue-500 transition-all focus:outline-none focus:ring-2 focus:ring-blue-400"
+        >
+          Save Preferences
+        </button>
+      </form>
+    </div>
+  );
+};
+
+export default ChangePreferences;

frontend/src/components/Header.tsx

@@ -1,11 +1,14 @@
 import React from "react";
 import ChangeAPI from "./ChangeAPI";
+import ChangePreferences from "./ChangePreferences";
 import { useState } from "react";
 import Cookies from "js-cookie";
-import logo from "../assets/cloud-sun-fill.svg";
+import logo from "../assets/cloud-sun-fill.png";
+import { Github, KeyRound, Settings2 } from "lucide-react";
 
 const Header: React.FC = () => {
   const [apiCard, setApiCard] = useState(false);
+  const [preferencesCard, setPreferencesCard] = useState(false);
   const apiKey = Cookies.get("apiKey") || "";
 
   return (
@@ -18,26 +21,42 @@ const Header: React.FC = () => {
             className="w-10 h-10 drop-shadow-lg"
           />
           <h1 className="text-4xl font-extrabold tracking-wide drop-shadow-lg">
-            Weather App
+            Weather App - <strong>Local hosted</strong>
           </h1>
         </div>
-        <button
-          className="bg-white text-blue-700 font-bold px-6 py-3 rounded-xl shadow-lg hover:bg-blue-100 transition-all border border-blue-200"
-          onClick={() => setApiCard(true)}
-        >
-          <span className="flex items-center gap-2">
-            <svg
-              className="w-5 h-5"
-              fill="none"
-              stroke="currentColor"
-              strokeWidth="2"
-              viewBox="0 0 24 24"
-            >
-              <path d="M12 4v16m8-8H4" />
-            </svg>
-            Set API Key
-          </span>
-        </button>
+        <div className="flex items-center gap-4">
+          {" "}
+          {/* Added container for buttons */}
+          <button
+            className="cursor-pointer bg-white text-blue-700 font-bold px-6 py-3 rounded-xl shadow-lg hover:bg-blue-100 transition-all border border-blue-200 flex items-center gap-2"
+            onClick={() => setApiCard(true)}
+          >
+            <span className="flex items-center gap-2">
+              <KeyRound />
+              Set API Key
+            </span>
+          </button>
+          <button
+            className="cursor-pointer bg-white text-blue-700 font-bold px-6 py-3 rounded-xl shadow-lg hover:bg-blue-100 transition-all border border-blue-200 flex items-center gap-2"
+            onClick={() => setPreferencesCard(true)}
+          >
+            <span className="flex items-center gap-2">
+              <Settings2 />
+              Preferences
+            </span>
+          </button>
+          <a
+            href="https://github.com/theis-js/weather-app/wiki"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            <button className="cursor-help bg-white text-blue-700 font-bold px-6 py-3 rounded-xl shadow-lg hover:bg-blue-100 transition-all border border-blue-200 flex items-center gap-2">
+              <span className="flex items-center gap-2">
+                <Github /> Docs
+              </span>
+            </button>
+          </a>
+        </div>
       </header>
       {apiCard && (
         <div className="fixed inset-0 bg-gray-900 bg-opacity-60 flex items-center justify-center z-50 transition-all">
@@ -49,7 +68,25 @@ const Header: React.FC = () => {
             >
               &times;
             </button>
-            <ChangeAPI currentAPIKey={apiKey} />
+            <ChangeAPI
+              currentAPIKey={apiKey}
+              onClose={() => setApiCard(false)}
+            />
+          </div>
+        </div>
+      )}
+
+      {preferencesCard && (
+        <div className="fixed inset-0 bg-gray-900 bg-opacity-60 flex items-center justify-center z-50 transition-all">
+          <div className="bg-white rounded-2xl shadow-2xl p-10 w-full max-w-md relative border-2 border-blue-200">
+            <button
+              className="absolute top-4 right-4 text-gray-400 hover:text-blue-600 text-2xl font-bold"
+              onClick={() => setPreferencesCard(false)}
+              aria-label="Close"
+            >
+              &times;
+            </button>
+            <ChangePreferences onClose={() => setPreferencesCard(false)} />
           </div>
         </div>
       )}

frontend/src/components/WeatherData.tsx

@@ -1,6 +1,6 @@
 import React from "react";
-import sunriseIcon from "../assets/icons/sunrise-fill.svg";
-import sunsetIcon from "../assets/icons/sunset-fill.svg";
+import { Sunrise, Sunset } from "lucide-react";
+import { getDateTime } from "../utils/utils";
 
 const WeatherData: React.FC = () => {
   const weatherRaw = localStorage.getItem("weather");
@@ -19,7 +19,27 @@ const WeatherData: React.FC = () => {
           {weatherData?.name}
         </h2>
         <p className="text-5xl font-extrabold mb-2 text-blue-900">
-          {weatherData?.main?.temp} °C
+          {weatherData?.main?.temp}{" "}
+          {localStorage.getItem("unit") === "metric"
+            ? "°C"
+            : localStorage.getItem("unit") === "imperial"
+            ? "°F"
+            : localStorage.getItem("unit") === "standard"
+            ? "K"
+            : "°C"}
+        </p>
+        <p className="flex items-center justify-center gap-2">
+          {weatherData?.sys?.country && (
+            <>
+              <img
+                src={`https://flagcdn.com/${weatherData.sys.country.toLowerCase()}.svg`}
+                alt={weatherData.sys.country}
+                width={24}
+                height={18}
+              />
+              <span>{weatherData.sys.country}</span>
+            </>
+          )}
         </p>
         <p className="text-lg mb-4 capitalize text-blue-600">
           {weatherData?.weather?.[0]?.description}
@@ -33,7 +53,7 @@ const WeatherData: React.FC = () => {
         )}
         <div className="flex flex-col items-center gap-4 mb-2">
           <div className="flex items-center gap-3">
-            <img src={sunriseIcon} alt="Sunrise Icon" className="w-7 h-7" />
+            <Sunrise />
             <span className="text-base text-blue-700 font-semibold">
               Sunrise:{" "}
               {weatherData?.sys?.sunrise
@@ -45,7 +65,7 @@ const WeatherData: React.FC = () => {
             </span>
           </div>
           <div className="flex items-center gap-3">
-            <img src={sunsetIcon} alt="Sunset Icon" className="w-7 h-7" />
+            <Sunset />
             <span className="text-base text-blue-700 font-semibold">
               Sunset:{" "}
               {weatherData?.sys?.sunset
@@ -56,6 +76,11 @@ const WeatherData: React.FC = () => {
                 : "--:--"}
             </span>
           </div>
+          <div className="flex items-center gap-3">
+            <span className="text-base text-gray-600 italic font-semibold">
+              Last updated: {getDateTime()}
+            </span>
+          </div>
         </div>
       </div>
     </div>

frontend/src/components/WeatherForm.tsx

@@ -5,13 +5,13 @@ import Cookies from "js-cookie";
 import { toast } from "react-toastify";
 import WeatherData from "./WeatherData";
 import { useEffect } from "react";
+import { X } from "lucide-react";
 
 const WeatherCard: React.FC = () => {
   const [city, setCity] = useState("");
-  const [loading, setLoading] = useState(false);
   const [weatherData, setWeatherData] = useState(false);
-  console.log(loading); // only for better reading because a syntax error would appear
   const getAPIKey = () => Cookies.get("apiKey") || "";
+  const getUnit = () => localStorage.getItem("unit") || "metric";
 
   const handleCityChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     setCity(event.target.value);
@@ -19,12 +19,10 @@ const WeatherCard: React.FC = () => {
 
   const handleSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
     event.preventDefault();
-    setLoading(true);
     toast
-      .promise(fetchWeather(city, getAPIKey(), "metric"), {
+      .promise(fetchWeather(city, getAPIKey(), getUnit()), {
         pending: "Fetching weather data...",
         success: "Weather data loaded successfully!",
-        error: "Error loading weather data! (Check console for details)",
       })
       .then(() => {
         if (localStorage.getItem("weather")) {
@@ -32,7 +30,6 @@ const WeatherCard: React.FC = () => {
         } else {
           setWeatherData(false);
         }
-        setLoading(false);
       });
   };
 
@@ -53,6 +50,9 @@ const WeatherCard: React.FC = () => {
       <p className="mb-2 text-gray-600">
         Current weather will be displayed here.
       </p>
+      <p className="mb-2 text-gray-600">
+        <strong>Make sure to set your API key in the header section.</strong>
+      </p>
       <form onSubmit={handleSubmit} className="flex flex-col gap-4 mt-4">
         <label htmlFor="city" className="font-medium text-gray-700">
           Enter City:
@@ -67,12 +67,27 @@ const WeatherCard: React.FC = () => {
           required
           className="border border-blue-300 rounded-xl px-4 py-3 focus:outline-none focus:ring-2 focus:ring-blue-400 bg-blue-50 text-blue-900 font-mono"
         />
-        <button
-          type="submit"
-          className="bg-gradient-to-r from-blue-600 to-blue-400 text-white font-bold px-6 py-3 rounded-xl shadow-lg hover:from-blue-700 hover:to-blue-500 transition-all"
-        >
-          Get Weather
-        </button>
+        <div className="flex items-center gap-2">
+          <button
+            type="submit"
+            className="cursor-pointer flex-1 bg-gradient-to-r from-blue-600 to-blue-400 text-white font-bold px-4 py-3 rounded-xl shadow-lg hover:from-blue-700 hover:to-blue-500 transition-all"
+          >
+            Get Weather
+          </button>
+          {weatherData && (
+            <button
+              type="button"
+              onClick={() => {
+                setWeatherData(false);
+                localStorage.removeItem("weather");
+              }}
+              className="cursor-pointer flex-shrink-0 bg-red-500 hover:bg-red-600 text-white rounded-xl p-3 shadow-lg transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-red-400"
+              aria-label="Close weather data"
+            >
+              <X />
+            </button>
+          )}
+        </div>
       </form>
       {weatherData && <WeatherData />}
     </div>

frontend/src/utils/apiFunc.ts

@@ -1,22 +1,28 @@
-export type units = "metric" | "imperial";
+import { myToast } from "./toastify";
+import Cookies from "js-cookie";
 
 export const fetchWeather = async (
   city: string,
   apiKey: string,
-  units: units
+  units: string
 ) => {
   // Get location data
   const location = await fetch(
     `http://api.openweathermap.org/geo/1.0/direct?q=${city}&appid=${apiKey}`
   ).then((response) => {
     if (response.status === 401) {
-      console.error(
-        "You are not authorized to access this resource. Please check your API key."
-      );
+      if (Cookies.get("apiKey") === undefined || Cookies.get("apiKey") === "") {
+        myToast("You have to enter an API key!", "error");
+      } else {
+        myToast(
+          "You are not authorized to access this resource. Please check your API key. (Error: x4010)",
+          "error"
+        );
+      }
     } else if (response.ok) {
       return response.json();
     } else {
-      console.error("Error fetching location data: ", response.statusText);
+      myToast("Error fetching location data. (Error: x32)", "error");
     }
   });
   const lat = location[0].lat;

frontend/src/utils/changeAPIcookie.ts

@@ -2,6 +2,18 @@ import Cookies from "js-cookie";
 import { myToast } from "./toastify";
 
 export const changeAPIcookie = (newApiKey: string) => {
+  let apiKey15 = newApiKey.slice(0, 15);
   Cookies.set("apiKey", newApiKey);
-  myToast("API key updated successfully!", "success");
+  if (Cookies.get("apiKey") === newApiKey) {
+    myToast(
+      "API key updated successfully!" +
+        " " +
+        "Your new API key: " +
+        apiKey15 +
+        "...",
+      "success"
+    );
+  } else {
+    myToast("Failed to update API key. (Error: x30)", "error");
+  }
 };

frontend/src/utils/utils.ts

@@ -0,0 +1,24 @@
+export const getDateTime = () => {
+  const now = new Date();
+  const day = now.getDate();
+  const month = now.toLocaleString("en-GB", { month: "long" });
+  const hours = now.getHours().toString().padStart(2, "0");
+  const minutes = now.getMinutes().toString().padStart(2, "0");
+
+  // Ordinal suffix
+  const getOrdinal = (n: number) => {
+    if (n > 3 && n < 21) return "th";
+    switch (n % 10) {
+      case 1:
+        return "st";
+      case 2:
+        return "nd";
+      case 3:
+        return "rd";
+      default:
+        return "th";
+    }
+  };
+
+  return `${day}${getOrdinal(day)} ${month}, ${hours}:${minutes}`;
+};

frontend/vite.config.ts

@@ -1,12 +1,17 @@
 import { defineConfig } from "vite";
 import tailwindcss from "@tailwindcss/vite";
+
 export default defineConfig({
   plugins: [tailwindcss()],
-    server: {
+  server: {
     host: "0.0.0.0",
+    allowedHosts: ["weather.the1s.de"],
     port: 7002,
-    watch: {
-      usePolling: true,
+    watch: { usePolling: true },
+    hmr: {
+      host: "weather.the1s.de",
+      port: 7002,
+      protocol: "wss",
     },
   },
 });