fix: update docker-compose configuration and restore backend service

README.md

@@ -6,7 +6,7 @@ You can find the web version of the Weather App at [https://weather.the1s.de](ht
 
 ## Version
 
-Currently hosted version: **1.0.1**
+Currently hosted version: **development branch (latest)**
 
 ## Dev info
 

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

backend/routes/api.js

@@ -14,7 +14,7 @@ router.get("/fetchWeather", async (req, res) => {
       `https://api.openweathermap.org/geo/1.0/direct?q=${city}&appid=${apiKey}`
     );
     if (!locationResponse.ok) {
-      return res.status(404).json({
+      return res.status(500).json({
         error: "Error fetching location data. (Error: x32)",
         success: "false",
         data: null,

docker-compose.yml

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

frontend/Dockerfile

@@ -1,12 +1,19 @@
-FROM node:20-alpine
+FROM node:22-alpine AS builder
 
 WORKDIR /app
 
-COPY package*.json ./
+COPY package.json package-lock.json ./
-RUN npm install
+RUN npm ci
 
 COPY . .
+RUN npm run build
 
-EXPOSE 7002
+FROM nginx:alpine AS runner
 
-CMD ["npm", "run", "dev"]
+WORKDIR /usr/share/nginx/html
+COPY --from=builder /app/dist .
+
+COPY nginx.conf /etc/nginx/conf.d/default.conf
+
+EXPOSE 80
+CMD ["nginx", "-g", "daemon off;"]

frontend/nginx.conf

@@ -0,0 +1,18 @@
+server {
+  listen 80;
+  server_name _;
+
+  root /usr/share/nginx/html;
+  index index.html;
+
+  location / {
+    try_files $uri $uri/ /index.html;
+  }
+
+  location ~* \.(?:js|mjs|css|png|jpg|jpeg|gif|ico|svg|woff2?)$ {
+    expires 1y;
+    access_log off;
+    add_header Cache-Control "public, immutable";
+    try_files $uri =404;
+  }
+}

frontend/src/components/ChangeAPI.tsx

@@ -53,7 +53,7 @@ const ChangeAPI: React.FC<Props> = ({ currentAPIKey, onClose }) => {
         </div>
         <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"
+          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

frontend/src/components/Header.tsx

@@ -1,7 +1,6 @@
 import React from "react";
 import ChangeAPI from "./ChangeAPI";
 import ChangePreferences from "./ChangePreferences";
-import { myToast } from "../utils/toastify";
 import { useState } from "react";
 import Cookies from "js-cookie";
 import logo from "../assets/cloud-sun-fill.png";
@@ -22,15 +21,15 @@ 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 - <strong>Web</strong>
+            Weather App - <strong>Local hosted</strong>
           </h1>
         </div>
         <div className="flex items-center gap-4">
           {" "}
           {/* Added container for buttons */}
           <button
-            className="bg-gray-200 text-gray-400 font-bold px-6 py-3 rounded-xl shadow-lg border border-gray-300 flex items-center gap-2 cursor-not-allowed opacity-60"
+            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={() => myToast("You don't need to set an API Key!", "info")}
+            onClick={() => setApiCard(true)}
           >
             <span className="flex items-center gap-2">
               <KeyRound />

frontend/src/components/WeatherData.tsx

@@ -1,5 +1,6 @@
 import React from "react";
 import { Sunrise, Sunset } from "lucide-react";
+import { getDateTime } from "../utils/utils";
 
 const WeatherData: React.FC = () => {
   const weatherRaw = localStorage.getItem("weather");
@@ -75,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

@@ -22,8 +22,6 @@ const WeatherCard: React.FC = () => {
       .promise(fetchWeather(city, getUnit()), {
         pending: "Fetching weather data...",
         success: "Weather data loaded successfully!",
-        error:
-          "Failed to load weather data. Please check your entered city name. (Error: x4040)",
       })
       .then(() => {
         if (localStorage.getItem("weather")) {
@@ -52,7 +50,7 @@ const WeatherCard: React.FC = () => {
         Current weather will be displayed here.
       </p>
       <p className="mb-2 text-gray-600">
-        <strong>You don't need an API Key!</strong>
+        <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">

frontend/src/utils/apiFunc.ts

@@ -3,7 +3,7 @@ import { myToast } from "./toastify";
 export const fetchWeather = async (city: string, units: string) => {
   try {
     const response = await fetch(
-      `http://localhost:7001/api/fetchWeather?city=${encodeURIComponent(
+      `https://backend.weather.the1s.de/api/fetchWeather?city=${encodeURIComponent(
         city
       )}&units=${encodeURIComponent(units)}`,
       {
@@ -21,6 +21,7 @@ export const fetchWeather = async (city: string, units: string) => {
       return;
     }
     localStorage.setItem("weather", JSON.stringify(responseData.data));
+    myToast(responseData.success, "success");
     return;
   } catch (error) {
     const errorMsg = JSON.stringify(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}`;
+};