fix: introduce workaround for cross-platform docker image building

fix: docker packages and IP parsing for 127.0.0.1
fix: optimized size of kitty photos
2026-01-09 22:29:17 +01:00 · 2026-01-09 21:55:46 +01:00 · 2026-01-09 14:48:37 +01:00 · 2026-01-07 23:52:13 +01:00 · 2026-01-06 16:50:42 +01:00
12 changed files with 124 additions and 57 deletions
--- a/.dockerignore
+++ b/.dockerignore
@@ -1 +1,2 @@
-.env
+.env
+kittyurl-frontend/node_modules
--- a/12
+++ b/12
@@ -1,11 +1,17 @@
-# Credit: https://www.digitalocean.com/community/tutorials/how-to-build-a-node-js-application-with-docker
+# Credit:
+# https://www.digitalocean.com/community/tutorials/how-to-build-a-node-js-application-with-docker
+# https://stackoverflow.com/a/56941391
+#
+# Includes workaround for:
+# https://github.com/expo/expo/issues/33340
+# https://github.com/npm/cli/issues/4828

 FROM node:24-trixie-slim AS builder

 WORKDIR /app
 COPY ./kittyurl-frontend/package*.json ./
-RUN npm ci && npm cache clean --force
-COPY ./kittyurl-frontend/ .
+RUN npm ci && npm i --force && npm cache clean --force
+COPY ./kittyurl-frontend/. ./
 RUN npm run build

 FROM node:24-trixie-slim AS production
--- a/README.md
+++ b/README.md
@@ -1,2 +1,73 @@
 # kittyFE

+*Front-end for the [KittyURL](https://gitea.7o7.cx/kittyteam/kittyurl) project — create short and memorable URLs with ease!*
+
+## Goals
+
+Provide a responsive and modern user interface for:
+
+* Account management (login, register, history, settings)
+* Link creation (public landing page)
+* Dashboard link management (for logged-in users)
+* User management (admin panel)
+
+
+KittyFE is built with **Vite + React (TypeScript)** to integrate seamlessly with [kittyBE](https://gitea.7o7.cx/kittyteam/kittyBE) and is easily dockerizable.
+
+## Running kittyFE
+
+KittyFE has been verified to work on **Node v24.11.1**.
+
+### On bare metal
+
+Running the front-end is as simple as:
+
+1. **Install dependencies**
+
+   * To download the required dependencies:
+
+     ```sh
+     npm install
+     ```
+
+   * To install an exact copy of all dependencies (recommended for CI):
+
+     ```sh
+     npm ci
+     ```
+
+2. **Configure environment variables**
+
+   Copy the `.env.example` file to `.env` and customize it to your preferences.
+
+   **Example:** Tell the frontend where the backend API is located. Your `.env` file should look like this:
+
+   ```properties
+   VITE_API_TARGET=http://localhost:6567
+   ```
+
+   > **Important:** All environment variables exposed to Vite must start with `VITE_`. Make sure the URL matches your running instance of `kittyBE`.
+
+3. **Launch the development server**
+
+   ```sh
+   npm run dev
+   ```
+
+4. **Open the app**
+
+   Visit:
+
+   ```text
+   http://localhost:6568
+   ```
+
+   (or the port shown in your terminal output).
+
+### Building for production
+
+To create an optimized static production build:
+
+```sh
+npm run build
+```
--- a/kittyurl-frontend/index.html
+++ b/kittyurl-frontend/index.html
@@ -2,18 +2,18 @@
 <html lang="en">
 <head>
    <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/src/assets/kitty.png" />
+    <link rel="icon" type="image/svg+xml" href="/src/assets/kitty.jpg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>kittyurl - shorten URLs with ease</title>
    <meta property="og:title" content="kittyurl shortener" />
    <meta property="og:type" content="website" />
    <meta property="og:description" content="Your go-to place for short and memorable URLs." />
-    <meta property="og:image" content="/src/assets/Ket.png" />
+    <meta property="og:image" content="/src/assets/Ket.jpg" />

    <meta name="twitter:card" content="summary_large_image" />
    <meta name="twitter:title" content="kittyurl shortener" />
    <meta name="twitter:description" content="Your go-to place for short and memorable URLs." />
-    <meta name="twitter:image" content="/src/assets/Ket.png" />
+    <meta name="twitter:image" content="/src/assets/Ket.jpg" />


 </head>
--- a/kittyurl-frontend/package-lock.json
+++ b/kittyurl-frontend/package-lock.json
@@ -29,6 +29,7 @@
        "eslint-plugin-react-hooks": "^7.0.1",
        "eslint-plugin-react-refresh": "^0.4.24",
        "globals": "^16.5.0",
+        "lightningcss": "^1.30.2",
        "postcss": "^8.5.6",
        "tailwindcss": "^4.1.18",
        "typescript": "~5.9.3",
@@ -67,7 +68,6 @@
      "integrity": "sha512-e7jT4DxYvIDLk1ZHmU/m/mB19rex9sv0c2ftBtjSBv+kVM/902eh0fINUzD7UwLLNR+jU585GxUJ8/EBfAM5fw==",
      "dev": true,
      "license": "MIT",
-      "peer": true,
      "dependencies": {
        "@babel/code-frame": "^7.27.1",
        "@babel/generator": "^7.28.5",
@@ -1610,7 +1610,6 @@
      "integrity": "sha512-vnDVpYPMzs4wunl27jHrfmwojOGKya0xyM3sH+UE5iv5uPS6vX7UIoh6m+vQc5LGBq52HBKPIn/zcSZVzeDEZg==",
      "devOptional": true,
      "license": "MIT",
-      "peer": true,
      "dependencies": {
        "undici-types": "~7.16.0"
      }
@@ -1621,7 +1620,6 @@
      "integrity": "sha512-MWtvHrGZLFttgeEj28VXHxpmwYbor/ATPYbBfSFZEIRK0ecCFLl2Qo55z52Hss+UV9CRN7trSeq1zbgx7YDWWg==",
      "dev": true,
      "license": "MIT",
-      "peer": true,
      "dependencies": {
        "csstype": "^3.2.2"
      }
@@ -1681,7 +1679,6 @@
      "integrity": "sha512-hM5faZwg7aVNa819m/5r7D0h0c9yC4DUlWAOvHAtISdFTc8xB86VmX5Xqabrama3wIPJ/q9RbGS1worb6JfnMg==",
      "dev": true,
      "license": "MIT",
-      "peer": true,
      "dependencies": {
        "@typescript-eslint/scope-manager": "8.50.1",
        "@typescript-eslint/types": "8.50.1",
@@ -1933,7 +1930,6 @@
      "integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==",
      "dev": true,
      "license": "MIT",
-      "peer": true,
      "bin": {
        "acorn": "bin/acorn"
      },
@@ -2093,7 +2089,6 @@
        }
      ],
      "license": "MIT",
-      "peer": true,
      "dependencies": {
        "baseline-browser-mapping": "^2.9.0",
        "caniuse-lite": "^1.0.30001759",
@@ -2442,7 +2437,6 @@
      "integrity": "sha512-LEyamqS7W5HB3ujJyvi0HQK/dtVINZvd5mAAp9eT5S/ujByGjiZLCzPcHVzuXbpJDJF/cxwHlfceVUDZ2lnSTw==",
      "dev": true,
      "license": "MIT",
-      "peer": true,
      "dependencies": {
        "@eslint-community/eslint-utils": "^4.8.0",
        "@eslint-community/regexpp": "^4.12.1",
@@ -3598,7 +3592,6 @@
      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.3.tgz",
      "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
      "license": "MIT",
-      "peer": true,
      "engines": {
        "node": ">=12"
      },
@@ -3625,7 +3618,6 @@
        }
      ],
      "license": "MIT",
-      "peer": true,
      "dependencies": {
        "nanoid": "^3.3.11",
        "picocolors": "^1.1.1",
@@ -3673,7 +3665,6 @@
      "resolved": "https://registry.npmjs.org/react/-/react-19.2.3.tgz",
      "integrity": "sha512-Ku/hhYbVjOQnXDZFv2+RibmLFGwFdeeKHFcOTlrt7xplBnya5OGn/hIRDsqDiSUcfORsDC7MPxwork8jBwsIWA==",
      "license": "MIT",
-      "peer": true,
      "engines": {
        "node": ">=0.10.0"
      }
@@ -3683,7 +3674,6 @@
      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.2.3.tgz",
      "integrity": "sha512-yELu4WmLPw5Mr/lmeEpox5rw3RETacE++JgHqQzd2dg+YbJuat3jH4ingc+WPZhxaoFzdv9y33G+F7Nl5O0GBg==",
      "license": "MIT",
-      "peer": true,
      "dependencies": {
        "scheduler": "^0.27.0"
      },
@@ -3702,9 +3692,9 @@
      }
    },
    "node_modules/react-router": {
-      "version": "7.11.0",
-      "resolved": "https://registry.npmjs.org/react-router/-/react-router-7.11.0.tgz",
-      "integrity": "sha512-uI4JkMmjbWCZc01WVP2cH7ZfSzH91JAZUDd7/nIprDgWxBV1TkkmLToFh7EbMTcMak8URFRa2YoBL/W8GWnCTQ==",
+      "version": "7.12.0",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-7.12.0.tgz",
+      "integrity": "sha512-kTPDYPFzDVGIIGNLS5VJykK0HfHLY5MF3b+xj0/tTyNYL1gF1qs7u67Z9jEhQk2sQ98SUaHxlG31g1JtF7IfVw==",
      "license": "MIT",
      "dependencies": {
        "cookie": "^1.0.1",
@@ -3724,12 +3714,12 @@
      }
    },
    "node_modules/react-router-dom": {
-      "version": "7.11.0",
-      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-7.11.0.tgz",
-      "integrity": "sha512-e49Ir/kMGRzFOOrYQBdoitq3ULigw4lKbAyKusnvtDu2t4dBX4AGYPrzNvorXmVuOyeakai6FUPW5MmibvVG8g==",
+      "version": "7.12.0",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-7.12.0.tgz",
+      "integrity": "sha512-pfO9fiBcpEfX4Tx+iTYKDtPbrSLLCbwJ5EqP+SPYQu1VYCXdy79GSj0wttR0U4cikVdlImZuEZ/9ZNCgoaxwBA==",
      "license": "MIT",
      "dependencies": {
-        "react-router": "7.11.0"
+        "react-router": "7.12.0"
      },
      "engines": {
        "node": ">=20.0.0"
@@ -3937,7 +3927,6 @@
      "integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==",
      "dev": true,
      "license": "Apache-2.0",
-      "peer": true,
      "bin": {
        "tsc": "bin/tsc",
        "tsserver": "bin/tsserver"
@@ -4023,7 +4012,6 @@
      "resolved": "https://registry.npmjs.org/vite/-/vite-7.3.0.tgz",
      "integrity": "sha512-dZwN5L1VlUBewiP6H9s2+B3e3Jg96D0vzN+Ry73sOefebhYr9f94wwkMNN/9ouoU8pV1BqA1d1zGk8928cx0rg==",
      "license": "MIT",
-      "peer": true,
      "dependencies": {
        "esbuild": "^0.27.0",
        "fdir": "^6.5.0",
@@ -4145,7 +4133,6 @@
      "integrity": "sha512-0wZ1IRqGGhMP76gLqz8EyfBXKk0J2qo2+H3fi4mcUP/KtTocoX08nmIAHl1Z2kJIZbZee8KOpBCSNPRgauucjw==",
      "dev": true,
      "license": "MIT",
-      "peer": true,
      "funding": {
        "url": "https://github.com/sponsors/colinhacks"
      }
--- a/kittyurl-frontend/package.json
+++ b/kittyurl-frontend/package.json
@@ -32,6 +32,7 @@
    "eslint-plugin-react-hooks": "^7.0.1",
    "eslint-plugin-react-refresh": "^0.4.24",
    "globals": "^16.5.0",
+    "lightningcss": "^1.30.2",
    "postcss": "^8.5.6",
    "tailwindcss": "^4.1.18",
    "typescript": "~5.9.3",
--- a/kittyurl-frontend/src/App.tsx
+++ b/kittyurl-frontend/src/App.tsx
@@ -11,6 +11,13 @@ export type View = 'home' | 'login' | 'history' | 'jump-game' | 'flappy-game';

 const getSubdomain = () => {
    const hostname = window.location.hostname;
+    // Handle localhost and 127.0.0.1 cases.
+    // For more advanced cases (like bare IP hosting)
+    // a regex may be necessary.
+    if (hostname === 'localhost' || hostname === '127.0.0.1') {
+        return null;
+    }
+    
    const parts = hostname.split('.');
    if (parts.length <= 2) return null;
    return parts[0];
--- a/kittyurl-frontend/src/assets/Ket.jpg
+++ b/kittyurl-frontend/src/assets/Ket.jpg
--- a/kittyurl-frontend/src/assets/Ket.png
+++ b/kittyurl-frontend/src/assets/Ket.png
--- a/kittyurl-frontend/src/assets/kitty.jpg
+++ b/kittyurl-frontend/src/assets/kitty.jpg
--- a/kittyurl-frontend/src/assets/kitty.png
+++ b/kittyurl-frontend/src/assets/kitty.png
--- a/kittyurl-frontend/src/components/Generator.tsx
+++ b/kittyurl-frontend/src/components/Generator.tsx
@@ -8,11 +8,18 @@ import {
 // Pobieramy adres API
 const API_BASE = import.meta.env.VITE_API_TARGET;

-// Nazwa klucza w localStorage, gdzie trzymasz token
+// Nazwa klucza w localStorage
 const TOKEN_KEY = 'jwt_token';

 type CaseType = 'upper' | 'lower' | 'mixed';

+// 1. Definicja propsów, które przychodzą z App.tsx
+interface GeneratorProps {
+    url: string;
+    setUrl: (url: string) => void;
+    onGenerate: () => void;
+}
+
 interface GeneratorSettings {
    length: number;
    alphanum: boolean;
@@ -20,8 +27,8 @@ interface GeneratorSettings {
    withSubdomain: boolean;
 }

+// Usunęliśmy 'remoteUrl' stąd, bo teraz przychodzi z propsów (url)
 interface LinkFormData {
-    remoteUrl: string;
    uri: string;
    subdomain: string;
    privacy: boolean;
@@ -39,23 +46,22 @@ interface LinkPayload {

 interface User {
    id: string;
-    username: string; 
+    username: string;
    email?: string;
 }

-export const Generator: React.FC = () => {
+// 2. Dodajemy propsy do argumentów funkcji
+export const Generator: React.FC<GeneratorProps> = ({ url, setUrl, onGenerate }) => {
    const [user, setUser] = useState<User | null>(null);

-    // Stan formularza głównego
+    // Stan formularza (bez remoteUrl, bo to jest teraz w 'url')
    const [formData, setFormData] = useState<LinkFormData>({
-        remoteUrl: '',
        uri: '',
        subdomain: '',
        privacy: true,
        expiryDate: new Date(Date.now() + 7 * 24 * 60 * 60 * 1000).toISOString().split('T')[0]
    });

-    // Stan ustawień generatora (GET)
    const [genSettings, setGenSettings] = useState<GeneratorSettings>({
        length: 6,
        alphanum: true,
@@ -63,14 +69,12 @@ export const Generator: React.FC = () => {
        withSubdomain: false
    });

-    // Stany UI
    const [loading, setLoading] = useState(false);
    const [generatingUri, setGeneratingUri] = useState(false);
    const [errorMsg, setErrorMsg] = useState<string | null>(null);
    const [result, setResult] = useState<string | null>(null);
    const [copied, setCopied] = useState(false);

-    // Helper do pobierania nagłówków z tokenem
    const getAuthHeaders = () => {
        const token = localStorage.getItem(TOKEN_KEY);
        return {
@@ -79,13 +83,10 @@ export const Generator: React.FC = () => {
        };
    };

-    // 1. Sprawdzenie sesji użytkownika przy starcie (używając JWT)
-    // 1. Sprawdzenie sesji użytkownika przy starcie
+    // Sprawdzenie sesji użytkownika
    useEffect(() => {
        const checkUser = async () => {
            const token = localStorage.getItem(TOKEN_KEY);
-
-            // Jeśli brak tokena, przerywamy (tryb gościa)
            if (!token) return;

            try {
@@ -95,30 +96,23 @@ export const Generator: React.FC = () => {

                if (res.ok) {
                    const data = await res.json();
-
-                    // Naprawa "Logged in as undefined":
-                    // API może zwracać 'name', 'username' lub tylko 'email'
                    setUser({
                        id: data.id || data._id || data.userId,
                        username: data.username || data.name || data.email || "User",
                        email: data.email
                    });
                } else {
-                    // Jeśli token jest nieważny (401), czyścimy go
                    console.log("Session expired. Logging out.");
                    localStorage.removeItem(TOKEN_KEY);
                    setUser(null);
                }
            } catch {
-                // POPRAWKA: Usunęliśmy '(err)', teraz jest samo 'catch'
-                // Dzięki temu linter nie krzyczy o nieużywaną zmienną
                console.log("API unreachable");
            }
        };
        checkUser();
    }, []);

-    // 2. Generowanie URI (GET) - tutaj auth zazwyczaj nie jest wymagany, ale można dodać
    const handleGenerateUri = async (type: 'random' | 'wordlist') => {
        setGeneratingUri(true);
        setErrorMsg(null);
@@ -140,8 +134,6 @@ export const Generator: React.FC = () => {
                endpoint = '/api/v1/link/fromWordlist';
            }

-            // GET zazwyczaj jest publiczny, więc nie musimy dodawać Bearera, 
-            // ale jeśli API tego wymaga, dodaj: headers: getAuthHeaders()
            const response = await fetch(`${API_BASE}${endpoint}?${params.toString()}`);
            const data = await response.json();

@@ -157,9 +149,9 @@ export const Generator: React.FC = () => {
        }
    };

-    // 3. Zapis do bazy (POST) - WYMAGA AUTH (JWT)
    const handleSubmitToDb = async () => {
-        if (!formData.remoteUrl) {
+        // Używamy propsa 'url' zamiast formData.remoteUrl
+        if (!url) {
            setErrorMsg("Meow! I need a destination URL first! 🐾");
            return;
        }
@@ -174,7 +166,7 @@ export const Generator: React.FC = () => {

        try {
            const payload: LinkPayload = {
-                remoteUrl: formData.remoteUrl,
+                remoteUrl: url, // <-- Tutaj wstawiamy wartość z propsa
                uri: formData.uri,
                subdomain: formData.subdomain || undefined,
                privacy: formData.privacy,
@@ -187,7 +179,7 @@ export const Generator: React.FC = () => {

            const response = await fetch(`${API_BASE}/api/v1/link/new`, {
                method: 'POST',
-                headers: getAuthHeaders(), // Tu wstrzykujemy JWT
+                headers: getAuthHeaders(),
                body: JSON.stringify(payload)
            });

@@ -200,6 +192,9 @@ export const Generator: React.FC = () => {
            const finalLink = data.url || `${API_BASE.replace('api.', '')}/${formData.uri}`;
            setResult(finalLink);

+            // Wywołujemy callback z App.tsx (np. żeby pokazać powiadomienie)
+            onGenerate();
+
        } catch (err: unknown) {
            if (err instanceof Error) setErrorMsg(err.message);
            else setErrorMsg("Something went wrong saving to DB!");
@@ -227,7 +222,6 @@ export const Generator: React.FC = () => {
                    KittyURL <PawPrint className="w-8 h-8 sm:w-10 sm:h-10" fill="currentColor" />
                </h1>
                <p className="text-pink-300 font-medium">Shorten your links with a purr!</p>
-                
            </header>

            {/* Error Display */}
@@ -277,8 +271,8 @@ export const Generator: React.FC = () => {
                            type="url"
                            placeholder="https://very-long-link.com/..."
                            className="w-full p-4 bg-pink-50/30 border-2 border-pink-100 rounded-2xl outline-none focus:border-pink-400 focus:bg-white transition-all text-pink-600 font-medium pr-12"
-                            value={formData.remoteUrl}
-                            onChange={(e) => setFormData({ ...formData, remoteUrl: e.target.value })}
+                            value={url} // Używamy propsa
+                            onChange={(e) => setUrl(e.target.value)} // Używamy propsa
                        />
                        <Heart className="absolute right-4 top-1/2 -translate-y-1/2 text-pink-200 w-5 h-5 group-focus-within:text-pink-400 transition-colors" />
                    </div>
Author	SHA1	Message	Date
sherl	18e7baa73c	fix: introduce workaround for cross-platform docker image building Some checks failed Build and push Docker image / build (push) Failing after 3m59s Details Release new version / release (push) Successful in 28s Details Update changelog / changelog (push) Successful in 26s Details	2026-01-09 22:29:17 +01:00
sherl	c829cb2a6b	fix: docker packages and IP parsing for 127.0.0.1 Some checks failed Release new version / release (push) Successful in 27s Details Update changelog / changelog (push) Successful in 26s Details Build and push Docker image / build (push) Failing after 3m57s Details	2026-01-09 21:55:46 +01:00
Pc	9cba46e427	fix: optimized size of kitty photos All checks were successful Update changelog / changelog (push) Successful in 26s Details	2026-01-09 14:48:37 +01:00
Nom4ne	7beb46606f	Updated readme with the current state of app All checks were successful Update changelog / changelog (push) Successful in 25s Details	2026-01-07 23:52:13 +01:00
Pc	cc31de6c8d	fix: added interface that app.tsx uses Some checks failed Build and push Docker image / build (push) Failing after 4m0s Details Release new version / release (push) Successful in 28s Details Update changelog / changelog (push) Successful in 26s Details	2026-01-06 16:50:42 +01:00