fix: update docker-compose configuration and restore backend service

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

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

frontend/Dockerfile

@@ -1,12 +1,19 @@
-FROM node:20-alpine
+FROM node:22-alpine AS builder
 
 WORKDIR /app
 
-COPY package*.json ./
-RUN npm install
+COPY package.json package-lock.json ./
+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"
-            onClick={() => myToast("You don't need to set an API Key!", "info")}
+            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 />

frontend/src/components/WeatherForm.tsx

@@ -21,6 +21,7 @@ const WeatherCard: React.FC = () => {
     toast
       .promise(fetchWeather(city, getUnit()), {
         pending: "Fetching weather data...",
+        success: "Weather data loaded successfully!",
       })
       .then(() => {
         if (localStorage.getItem("weather")) {
@@ -49,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">