fix: typo fix

Reviewed-on: #5

.dockerignore

@@ -0,0 +1 @@
+.env

.env.default

@@ -1,6 +1,7 @@
-# Site info
+PUBLIC_URL=https://example.com
-PUBLIC_URL=https://example.com # Publicly accessible website root, used for rewrites. Note there is no trailing slash in the URL.
+USE_SUBDOMAINS=true
-USE_SUBDOMAINS=true            # Whether backend allows for use of subdomains in URL generation.
 DEBUG=false
+
 # Frontend specific
-<miejsce na twoje zmienne>
+VITE_API_TARGET=https://pies.com
+VITE_ALLOWED_HOST=pies.com # for sub domens add . before host address

.gitea/workflows/01_docker.yaml

@@ -0,0 +1,58 @@
+# Credits: https://www.vanmeeuwen.dev/blog/automating-docker-builds-with-gitea-actions
+# https://gitea.com/gitea/runner-images/src/branch/main/.gitea/workflows/release.yaml
+
+name: Build and push Docker image
+run-name: Build ${{  github.ref_name }} image
+
+on:
+  push:
+    tags:
+      - "*"
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+
+      - name: Set up QEMU
+        uses: docker/setup-qemu-action@v3
+
+      - name: Set up Docker BuildX
+        uses: docker/setup-buildx-action@v3
+
+      - name: Login to registry
+        uses: docker/login-action@v2
+        with:
+          registry: gitea.7o7.cx
+          username: ${{ secrets.REGISTRY_USER }}
+          password: ${{ secrets.REGISTRY_PASSWORD }}
+
+      - name: Set outputs
+        id: vars
+        env:
+          BRANCH_NAME: ${{ github.ref_name }}
+        run: |
+          #echo branch_name="$BRANCH_NAME" | tee -a $GITHUB_OUTPUT
+          #echo short_hash=$(git rev-parse --short HEAD) | tee -a $GITHUB_OUTPUT
+          echo current_tag=$GITHUB_REF_NAME | tee -a $GITHUB_OUTPUT
+
+      - name: Build and push
+        uses: docker/build-push-action@v6
+        with:
+          context: .
+          platforms: |
+            linux/amd64
+            linux/arm64
+          pull: true
+          push: true
+          # Change when working on a different branch!
+          tags: |
+            gitea.7o7.cx/kittyteam/kittyfe:${{ steps.vars.outputs.current_tag }}
+            gitea.7o7.cx/kittyteam/kittyfe:latest
+
+      - name: Log out from registry
+        if: always()
+        run: docker logout gitea.7o7.cx

.gitea/workflows/02_release.yaml

@@ -0,0 +1,35 @@
+# Credits: # https://gitea.com/gitea/runner-images/src/branch/main/.gitea/workflows/release.yaml
+name: Release new version
+run-name: Release ${{  github.ref_name }}
+
+on:
+  push:
+    tags:
+      - "*"
+
+jobs:
+  release:
+    runs-on: ubuntu-latest
+    container: docker.io/thegeeklab/git-sv:2.0.9
+    steps:
+      - name: Install tools
+        run: |
+          apk add -q --update --no-cache nodejs
+      - name: Checkout repository
+        uses: actions/checkout@v6
+        with:
+          fetch-tags: true
+          fetch-depth: 0
+
+      - name: Create changelog
+        run: |
+          git sv current-version
+          git sv release-notes -t ${GITHUB_REF#refs/tags/} -o CHANGELOG.md
+          sed -i '1,2d' CHANGELOG.md # remove version
+          cat CHANGELOG.md
+
+      - name: Release
+        uses: https://github.com/akkuman/gitea-release-action@v1
+        with:
+          body_path: CHANGELOG.md
+          token: "${{ secrets.REPO_RW_TOKEN }}"

.gitea/workflows/99_changelog.yaml

@@ -0,0 +1,37 @@
+# Credit: https://gitea.com/gitea/helm-gitea/src/branch/main/.gitea/workflows/changelog.yml
+name: Update changelog
+run-name: Update changelog on push
+
+on:
+  push:
+    branches:
+      - master
+    tags:
+      - "*"
+
+jobs:
+  changelog:
+    runs-on: ubuntu-latest
+    container: docker.io/thegeeklab/git-sv:2.0.9
+    steps:
+      - name: Install tools
+        run: |
+          apk add -q --update --no-cache nodejs curl jq sed
+      - name: Checkout repository
+        uses: actions/checkout@v6
+        with:
+          fetch-depth: 0
+      - name: Generate upcoming changelog
+        run: |
+          git sv rn -o changelog.md
+          export RELEASE_NOTES=$(cat changelog.md)
+          export ISSUE_NUMBER=$(curl -s -H 'Authorization: token ${{ secrets.ISSUE_RW_TOKEN }}' "https://gitea.7o7.cx/api/v1/repos/kittyteam/kittyFE/issues?state=open&q=Changelog%20for%20upcoming%20version" | jq '.[].number')
+
+          echo $RELEASE_NOTES
+          JSON_DATA=$(echo "" | jq -Rs --arg title 'Changelog for upcoming version' --arg body "$(cat changelog.md)" '{title: $title, body: $body}')
+
+          if [ -z "$ISSUE_NUMBER" ]; then
+            curl -s -X POST "https://gitea.7o7.cx/api/v1/repos/kittyteam/kittyFE/issues" -H "Authorization: token ${{ secrets.ISSUE_RW_TOKEN }}" -H "Content-Type: application/json" -d "$JSON_DATA" > /dev/null
+          else
+            curl -s -X PATCH "https://gitea.7o7.cx/api/v1/repos/kittyteam/kittyFE/issues/$ISSUE_NUMBER" -H "Authorization: token ${{ secrets.ISSUE_RW_TOKEN }}" -H "Content-Type: application/json" -d "$JSON_DATA" > /dev/null
+          fi

Dockerfile

@@ -0,0 +1,21 @@
+# Credit: https://www.digitalocean.com/community/tutorials/how-to-build-a-node-js-application-with-docker
+
+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 run build
+
+FROM node:24-trixie-slim AS production
+
+WORKDIR /app
+RUN addgroup --gid 1001 nodejs && \
+    adduser  --gid 1001 --uid 1001 nodejs
+COPY --from=builder --chown=nodejs:nodejs /app /app
+USER nodejs
+
+EXPOSE 6568
+
+CMD ["npm", "run", "preview", "--", "--host", "0.0.0.0", "--port", "6568"]

kittyurl-frontend/index.html

@@ -1,11 +1,22 @@
-<!doctype html>
+<!doctype html>
 <html lang="en">
-  <head>
+<head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <link rel="icon" type="image/svg+xml" href="/src/assets/kitty.png" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>kittyurl-frontend</title>
+    <title>kittyurl - shorten URLs with ease</title>
-  </head>
+    <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 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" />
+
+
+</head>
   <body>
     <div id="root"></div>
     <script type="module" src="/src/main.tsx"></script>

kittyurl-frontend/package-lock.json

@@ -10,6 +10,7 @@
       "dependencies": {
         "@tailwindcss/vite": "^4.1.18",
         "axios": "^1.13.2",
+        "js-cookie": "^3.0.5",
         "js-sha512": "^0.9.0",
         "lucide-react": "^0.562.0",
         "react": "^19.2.0",
@@ -18,6 +19,7 @@
       },
       "devDependencies": {
         "@eslint/js": "^9.39.1",
+        "@types/js-cookie": "^3.0.6",
         "@types/node": "^24.10.1",
         "@types/react": "^19.2.5",
         "@types/react-dom": "^19.2.3",
@@ -1588,6 +1590,13 @@
       "integrity": "sha512-dWHzHa2WqEXI/O1E9OjrocMTKJl2mSrEolh1Iomrv6U+JuNwaHXsXx9bLu5gG7BUWFIN0skIQJQ/L1rIex4X6w==",
       "license": "MIT"
     },
+    "node_modules/@types/js-cookie": {
+      "version": "3.0.6",
+      "resolved": "https://registry.npmjs.org/@types/js-cookie/-/js-cookie-3.0.6.tgz",
+      "integrity": "sha512-wkw9yd1kEXOPnvEeEV1Go1MmxtBJL0RR79aOTAApecWFVu7w0NNXNqhcWgvw2YgZDYadliXkl14pa3WXw5jlCQ==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/@types/json-schema": {
       "version": "7.0.15",
       "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.15.tgz",
@@ -3007,6 +3016,15 @@
         "jiti": "lib/jiti-cli.mjs"
       }
     },
+    "node_modules/js-cookie": {
+      "version": "3.0.5",
+      "resolved": "https://registry.npmjs.org/js-cookie/-/js-cookie-3.0.5.tgz",
+      "integrity": "sha512-cEiJEAEoIbWfCZYKWhVwFuvPX1gETRYPw6LlaTKoxD3s2AkXzkCjnp6h0V77ozyqj0jakteJ4YqDJT830+lVGw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=14"
+      }
+    },
     "node_modules/js-sha512": {
       "version": "0.9.0",
       "resolved": "https://registry.npmjs.org/js-sha512/-/js-sha512-0.9.0.tgz",

kittyurl-frontend/package.json

@@ -7,11 +7,13 @@
     "dev": "vite",
     "build": "tsc -b && vite build",
     "lint": "eslint .",
-    "preview": "vite preview"
+    "preview": "vite preview",
+    "serve": "tsc -b && vite build && vite preview --port 6568"
   },
   "dependencies": {
     "@tailwindcss/vite": "^4.1.18",
     "axios": "^1.13.2",
+    "js-cookie": "^3.0.5",
     "js-sha512": "^0.9.0",
     "lucide-react": "^0.562.0",
     "react": "^19.2.0",
@@ -20,6 +22,7 @@
   },
   "devDependencies": {
     "@eslint/js": "^9.39.1",
+    "@types/js-cookie": "^3.0.6",
     "@types/node": "^24.10.1",
     "@types/react": "^19.2.5",
     "@types/react-dom": "^19.2.3",

kittyurl-frontend/src/App.tsx

@@ -7,19 +7,43 @@ import { KittyGame } from './components/KittyGame';
 import { FlappyCat } from './components/FlappyCat';
 import { useAuth } from './hooks/useAuth';
 
-// Eksportujemy typ, aby inne pliki mogły go użyć
 export type View = 'home' | 'login' | 'history' | 'jump-game' | 'flappy-game';
 
+const getSubdomain = () => {
+    const hostname = window.location.hostname;
+    const parts = hostname.split('.');
+    if (parts.length <= 2) return null;
+    return parts[0];
+};
+
 function App() {
     const [url, setUrl] = useState('');
     const [view, setView] = useState<View>('home');
     const { isAuthenticated, logout } = useAuth();
+    const subdomain = getSubdomain();
+
+    /**
+     * STAN POCHODNY (Derived State)
+     * Rozwiązuje błąd "cascading renders". Jeśli użytkownik jest na subdomenie
+     * i nie jest zalogowany, automatycznie renderujemy widok logowania,
+     * ale nie nadpisujemy stanu 'view' w nieskończoność.
+     */
+    const activeView = (subdomain && !isAuthenticated) ? 'login' : view;
 
     const renderView = () => {
-        switch (view) {
+        switch (activeView) {
             case 'login':
-                return <LoginView onBack={() => setView('home')} onSuccess={() => setView('home')} />;
+                return (
+                    <LoginView
+                        onBack={() => setView('home')}
+                        onSuccess={() => setView('home')}
+                    />
+                );
             case 'history':
+                // Strażnik dostępu dla widoku historii
+                if (!isAuthenticated) {
+                    return <LoginView onBack={() => setView('home')} onSuccess={() => setView('home')} />;
+                }
                 return <HistoryView onBack={() => setView('home')} />;
             case 'jump-game':
                 return <KittyGame onBack={() => setView('home')} />;
@@ -37,7 +61,12 @@ function App() {
                 isAuthenticated={isAuthenticated}
                 onLogout={logout}
             />
-            <main>{renderView()}</main>
+            <main>
+                {/* Jeśli użytkownik jest zalogowany (SSO), activeView od razu 
+                  pokaże Generator, zamiast LoginView.
+                */}
+                {renderView()}
+            </main>
         </div>
     );
 }

kittyurl-frontend/src/api/auth.ts

@@ -1,25 +0,0 @@
-import axios from 'axios';
-import { sha512 } from 'js-sha512';
-
-// Interfejs zgodny z Twoją dokumentacją [cite: 74-79]
-export interface AuthResponse {
-  status: "ok";
-  name: string;
-  role: "user" | "admin";
-  token: string;
-}
-
-export const loginUser = async (name: string, pass: string): Promise<AuthResponse> => {
-  // Wysyłamy POST zgodnie ze specyfikacją dokumentacji [cite: 68]
-  const response = await axios.post('https://twoj-backend.pl/api/v1/user/signIn', {
-    name: name,
-    password: sha512(pass) // Wymagane SHA-512 [cite: 71]
-  });
-
-  // Jeśli sukces, zapisujemy token JWT [cite: 78]
-  if (response.data.status === "ok") {
-    localStorage.setItem('token', response.data.token);
-  }
-
-  return response.data;
-};

kittyurl-frontend/src/components/FlappyCat.tsx

@@ -218,9 +218,7 @@ export const FlappyCat: React.FC<{ onBack: () => void }> = ({ onBack }) => {
                     </div>
                 )}
             </div>
-            <p className="mt-4 text-slate-400 text-sm font-bold uppercase tracking-widest">
+            
-                Physics: {isPlaying ? "Frame-Independent" : "Ready"}
-            </p>
         </div>
     );
 };

kittyurl-frontend/src/components/Generator.tsx

@@ -1,49 +1,394 @@
-import React from 'react';
+import React, { useState, useEffect } from 'react';
-import { PawPrint, Heart, Sparkles, Cat } from 'lucide-react';
+import {
+    PawPrint, Heart, Sparkles, Cat, Hash,
+    Globe, BookOpen, Shield, Calendar,
+    Settings2, AlertCircle, X, Save, RefreshCw, Copy, Check, ExternalLink, User as UserIcon
+} from 'lucide-react';
 
-interface GeneratorProps {
+// Pobieramy adres API
-    url: string;
+const API_BASE = import.meta.env.VITE_API_TARGET;
-    setUrl: (val: string) => void;
+
-    onGenerate: () => void;
+// Nazwa klucza w localStorage, gdzie trzymasz token
+const TOKEN_KEY = 'jwt_token';
+
+type CaseType = 'upper' | 'lower' | 'mixed';
+
+interface GeneratorSettings {
+    length: number;
+    alphanum: boolean;
+    case: CaseType;
+    withSubdomain: boolean;
 }
 
-export const Generator: React.FC<GeneratorProps> = ({ url, setUrl, onGenerate }) => (
+interface LinkFormData {
-    <div className="max-w-[800px] mx-auto pt-16 px-4 flex flex-col items-center">
+    remoteUrl: string;
-        <header className="text-center mb-12">
+    uri: string;
-            <h1 className="text-7xl font-black text-pink-500 mb-2 tracking-tighter flex items-center gap-4">
+    subdomain: string;
-                KittyURL <PawPrint size={50} fill="currentColor" />
+    privacy: boolean;
-            </h1>
+    expiryDate: string;
-            <p className="text-pink-300 text-xl font-medium">Shorten your links with a purr!</p>
+}
-        </header>
 
-        <div className="w-full bg-white rounded-[3rem] shadow-2xl shadow-pink-200/50 p-10 border-4 border-white relative overflow-hidden">
+interface LinkPayload {
-            <div className="mb-6">
+    remoteUrl: string;
-                <label className="block text-xs font-black uppercase tracking-widest text-pink-300 mb-3 ml-2">Long URL to shorten</label>
+    uri: string;
-                <div className="relative">
+    subdomain?: string;
-                    <input
+    privacy: boolean;
-                        type="url"
+    expiryDate: number;
-                        placeholder="https://example.com/very-long-url"
+    userId?: string;
-                        className="w-full p-5 bg-pink-50/30 border-2 border-pink-100 rounded-2xl outline-none focus:border-pink-400 focus:bg-white transition-all text-lg shadow-inner"
+}
-                        value={url}
+
-                        onChange={(e) => setUrl(e.target.value)}
+interface User {
-                    />
+    id: string;
-                    <Heart className="absolute right-5 top-1/2 -translate-y-1/2 text-pink-200" size={24} />
+    username: string; 
+    email?: string;
+}
+
+export const Generator: React.FC = () => {
+    const [user, setUser] = useState<User | null>(null);
+
+    // Stan formularza głównego
+    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,
+        case: 'mixed',
+        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 {
+            'Content-Type': 'application/json',
+            ...(token ? { 'Authorization': `Bearer ${token}` } : {})
+        };
+    };
+
+    // 1. Sprawdzenie sesji użytkownika przy starcie (używając JWT)
+    // 1. Sprawdzenie sesji użytkownika przy starcie
+    useEffect(() => {
+        const checkUser = async () => {
+            const token = localStorage.getItem(TOKEN_KEY);
+
+            // Jeśli brak tokena, przerywamy (tryb gościa)
+            if (!token) return;
+
+            try {
+                const res = await fetch(`${API_BASE}/api/v1/user/account`, {
+                    headers: getAuthHeaders()
+                });
+
+                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);
+        try {
+            let endpoint = '';
+            const params = new URLSearchParams();
+
+            params.append('withSubdomain', genSettings.withSubdomain.toString());
+
+            if (type === 'random') {
+                endpoint = '/api/v1/link/short';
+                params.append('length', genSettings.length.toString());
+                params.append('alphanum', genSettings.alphanum.toString());
+
+                if (genSettings.case !== 'mixed') {
+                    params.append('case', genSettings.case);
+                }
+            } else {
+                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();
+
+            if (!response.ok) throw new Error(data.error || 'Generation failed');
+
+            const generatedUri = data.uri || data.shortUrl || data.link || "";
+            setFormData(prev => ({ ...prev, uri: generatedUri }));
+
+        } catch (err: unknown) {
+            if (err instanceof Error) setErrorMsg(err.message);
+        } finally {
+            setGeneratingUri(false);
+        }
+    };
+
+    // 3. Zapis do bazy (POST) - WYMAGA AUTH (JWT)
+    const handleSubmitToDb = async () => {
+        if (!formData.remoteUrl) {
+            setErrorMsg("Meow! I need a destination URL first! 🐾");
+            return;
+        }
+        if (!formData.uri) {
+            setErrorMsg("Please generate or write a short URI code!");
+            return;
+        }
+
+        setLoading(true);
+        setErrorMsg(null);
+        setResult(null);
+
+        try {
+            const payload: LinkPayload = {
+                remoteUrl: formData.remoteUrl,
+                uri: formData.uri,
+                subdomain: formData.subdomain || undefined,
+                privacy: formData.privacy,
+                expiryDate: new Date(formData.expiryDate).getTime()
+            };
+
+            if (user && user.id) {
+                payload.userId = user.id;
+            }
+
+            const response = await fetch(`${API_BASE}/api/v1/link/new`, {
+                method: 'POST',
+                headers: getAuthHeaders(), // Tu wstrzykujemy JWT
+                body: JSON.stringify(payload)
+            });
+
+            const data = await response.json();
+
+            if (!response.ok) {
+                throw new Error(data.error || `Database error ${response.status}`);
+            }
+
+            const finalLink = data.url || `${API_BASE.replace('api.', '')}/${formData.uri}`;
+            setResult(finalLink);
+
+        } catch (err: unknown) {
+            if (err instanceof Error) setErrorMsg(err.message);
+            else setErrorMsg("Something went wrong saving to DB!");
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    const copyToClipboard = (text: string) => {
+        navigator.clipboard.writeText(text);
+        setCopied(true);
+        setTimeout(() => setCopied(false), 2000);
+    };
+
+    return (
+        <div className="max-w-[800px] mx-auto pt-10 px-4 flex flex-col items-center pb-20">
+            {/* Header */}
+            <header className="text-center mb-8 relative w-full flex flex-col items-center">
+                <div className={`mb-4 px-4 py-2 rounded-full text-xs font-bold flex items-center gap-2 transition-colors ${user ? 'bg-pink-100 text-pink-600' : 'bg-gray-100 text-gray-400'}`}>
+                    <UserIcon size={14} />
+                    {user ? `Logged in as ${user.username}` : 'Guest Mode (Anonymous)'}
                 </div>
+
+                <h1 className="text-4xl sm:text-6xl font-black text-pink-500 mb-2 tracking-tighter flex items-center justify-center gap-2">
+                    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 */}
+            {errorMsg && (
+                <div className="w-full mb-6 animate-in fade-in slide-in-from-top-2">
+                    <div className="bg-red-50 border-2 border-red-200 p-4 rounded-2xl flex items-center gap-3 text-red-600 shadow-lg">
+                        <AlertCircle size={20} />
+                        <span className="font-bold text-sm flex-1">{errorMsg}</span>
+                        <button onClick={() => setErrorMsg(null)}><X size={20} className="hover:scale-110 transition-transform" /></button>
+                    </div>
+                </div>
+            )}
+
+            {/* Success Result Card */}
+            {result && (
+                <div className="w-full mb-8 animate-in zoom-in-95 duration-500">
+                    <div className="bg-gradient-to-r from-green-400 to-emerald-500 p-1 rounded-[2.5rem] shadow-2xl shadow-green-200">
+                        <div className="bg-white rounded-[2.3rem] p-6 flex flex-col sm:flex-row items-center gap-4">
+                            <div className="bg-green-100 p-3 rounded-full"><Check className="text-green-600 w-6 h-6" /></div>
+                            <div className="flex-1 text-center sm:text-left overflow-hidden w-full">
+                                <p className="text-[10px] font-black uppercase tracking-widest text-green-400 mb-1">Saved to Database!</p>
+                                <p className="text-xl font-black text-gray-700 truncate">{result}</p>
+                            </div>
+                            <div className="flex gap-2">
+                                <button onClick={() => copyToClipboard(result)} className="p-3 bg-gray-100 hover:bg-gray-200 rounded-xl transition-colors">
+                                    {copied ? <Check size={20} className="text-green-600" /> : <Copy size={20} className="text-gray-600" />}
+                                </button>
+                                <a href={result} target="_blank" rel="noreferrer" className="p-3 bg-pink-500 hover:bg-pink-600 text-white rounded-xl transition-colors">
+                                    <ExternalLink size={20} />
+                                </a>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            )}
+
+            {/* Main Form */}
+            <div className="w-full bg-white rounded-[2.5rem] shadow-2xl shadow-pink-200/50 p-6 sm:p-8 border-4 border-white">
+
+                {/* 1. Destination URL */}
+                <div className="mb-8">
+                    <label className="flex items-center gap-2 text-[11px] font-black uppercase tracking-widest text-pink-400 mb-2 ml-1">
+                        <Settings2 size={12} /> 1. Destination URL
+                    </label>
+                    <div className="relative group">
+                        <input
+                            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 })}
+                        />
+                        <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>
+                </div>
+
+                {/* 2. Short Code Generation */}
+                <div className="mb-8 bg-pink-50/30 p-5 rounded-[2rem] border border-pink-100">
+                    <label className="flex items-center gap-2 text-[11px] font-black uppercase tracking-widest text-pink-400 mb-3 ml-1">
+                        <Sparkles size={12} /> 2. Generate Short Code (URI)
+                    </label>
+
+                    <div className="grid grid-cols-2 sm:grid-cols-4 gap-2 mb-4">
+                        <div className="bg-white p-2 rounded-xl border border-pink-100">
+                            <label className="text-[9px] font-bold text-gray-400 uppercase block mb-1">Length</label>
+                            <input type="number" min="3" max="32" className="w-full font-bold text-pink-500 outline-none text-sm"
+                                value={genSettings.length} onChange={e => setGenSettings({ ...genSettings, length: +e.target.value })} />
+                        </div>
+                        <div className="bg-white p-2 rounded-xl border border-pink-100">
+                            <label className="text-[9px] font-bold text-gray-400 uppercase block mb-1">Case</label>
+                            <select
+                                className="w-full font-bold text-pink-500 outline-none text-sm bg-transparent"
+                                value={genSettings.case}
+                                onChange={e => setGenSettings({ ...genSettings, case: e.target.value as CaseType })}
+                            >
+                                <option value="mixed">Mixed</option>
+                                <option value="lower">Lower</option>
+                                <option value="upper">Upper</option>
+                            </select>
+                        </div>
+                        <button
+                            onClick={() => handleGenerateUri('random')}
+                            disabled={generatingUri}
+                            className="col-span-2 sm:col-span-1 bg-white hover:bg-pink-100 border-2 border-pink-200 text-pink-500 rounded-xl font-bold text-xs flex flex-col items-center justify-center gap-1 transition-all active:scale-95 py-2"
+                        >
+                            <Hash size={16} />
+                            {generatingUri ? '...' : 'Random'}
+                        </button>
+                        <button
+                            onClick={() => handleGenerateUri('wordlist')}
+                            disabled={generatingUri}
+                            className="col-span-2 sm:col-span-1 bg-white hover:bg-pink-100 border-2 border-pink-200 text-pink-500 rounded-xl font-bold text-xs flex flex-col items-center justify-center gap-1 transition-all active:scale-95 py-2"
+                        >
+                            <BookOpen size={16} />
+                            {generatingUri ? '...' : 'Sentence'}
+                        </button>
+                    </div>
+
+                    <div className="relative">
+                        <input
+                            type="text"
+                            placeholder="my-custom-uri"
+                            className="w-full p-4 pl-12 bg-white border-2 border-pink-200 rounded-2xl outline-none focus:border-pink-500 transition-all text-pink-600 font-black text-lg shadow-inner"
+                            value={formData.uri}
+                            onChange={(e) => setFormData({ ...formData, uri: e.target.value })}
+                        />
+                        <div className="absolute left-4 top-1/2 -translate-y-1/2 text-pink-300 font-bold select-none">/</div>
+                        {formData.uri && (
+                            <div className="absolute right-4 top-1/2 -translate-y-1/2">
+                                <Check size={18} className="text-green-500" />
+                            </div>
+                        )}
+                    </div>
+                </div>
+
+                {/* 3. Database Settings */}
+                <div className="mb-8 grid grid-cols-1 sm:grid-cols-2 gap-4">
+                    <div className="bg-gray-50 p-4 rounded-2xl border border-gray-100">
+                        <label className="flex items-center gap-2 text-[10px] font-black uppercase text-gray-400 mb-2"><Calendar size={14} /> Expiry Date</label>
+                        <input type="date" className="w-full bg-white border border-gray-200 rounded-lg px-3 py-2 text-xs font-bold text-gray-600 outline-none focus:border-pink-400"
+                            value={formData.expiryDate}
+                            onChange={e => setFormData({ ...formData, expiryDate: e.target.value })} />
+                    </div>
+
+                    <label className="flex items-center justify-between bg-gray-50 p-4 rounded-2xl border border-gray-100 cursor-pointer hover:bg-pink-50 transition-colors">
+                        <span className="flex items-center gap-2 text-[10px] font-black uppercase text-gray-400"><Shield size={14} /> Private Link</span>
+                        <input type="checkbox" className="accent-pink-500 w-5 h-5" checked={formData.privacy}
+                            onChange={e => setFormData({ ...formData, privacy: e.target.checked })} />
+                    </label>
+
+                    <label className="flex items-center justify-between bg-gray-50 p-4 rounded-2xl border border-gray-100 cursor-pointer hover:bg-pink-50 transition-colors sm:col-span-2">
+                        <span className="flex items-center gap-2 text-[10px] font-black uppercase text-gray-400"><Globe size={14} /> Subdomain Support</span>
+                        <input type="checkbox" className="accent-pink-500 w-5 h-5" checked={genSettings.withSubdomain}
+                            onChange={e => {
+                                setGenSettings({ ...genSettings, withSubdomain: e.target.checked });
+                                setFormData({ ...formData, subdomain: e.target.checked ? 'true' : '' });
+                            }} />
+                    </label>
+                </div>
+
+                {/* 4. Submit Button */}
+                <button
+                    onClick={handleSubmitToDb}
+                    disabled={loading}
+                    className="w-full bg-pink-500 hover:bg-pink-600 text-white font-black py-5 rounded-[1.8rem] transition-all shadow-xl shadow-pink-200 active:scale-[0.98] text-xl flex items-center justify-center gap-3 disabled:opacity-50 disabled:grayscale"
+                >
+                    {loading ? (
+                        <>Saving... <RefreshCw className="animate-spin" /></>
+                    ) : (
+                        <>Save to Database <Save className="w-6 h-6" /></>
+                    )}
+                </button>
+
             </div>
 
-            <button
+            <footer className="mt-12 text-center opacity-40">
-                onClick={onGenerate}
+                <Cat className="mx-auto text-pink-300 mb-2 w-10 h-10" />
-                className="w-full bg-pink-500 hover:bg-pink-600 text-white font-black py-5 rounded-[1.5rem] transition-all shadow-xl shadow-pink-100 active:scale-[0.98] text-xl flex items-center justify-center gap-3 cursor-pointer"
+                <p className="text-pink-300 font-black text-[10px] uppercase tracking-[0.2em]">
-            >
+                    KittyURL Generator v2.0
-                Generate Kitty Link <Sparkles size={24} />
+                </p>
-            </button>
+            </footer>
         </div>
-
+    );
-        <div className="w-full mt-16 text-center">
+};
-            <div className="bg-pink-100/50 rounded-[2.5rem] border-4 border-dashed border-pink-200 p-12">
-                <Cat size={60} className="mx-auto text-pink-200 mb-4" />
-                <p className="text-pink-300 font-bold">No links generated yet. Feed me a URL! 🐾</p>
-            </div>
-        </div>
-    </div>
-);

kittyurl-frontend/src/components/HistoryView.tsx

@@ -1,15 +1,23 @@
-
+import { PawPrint, ExternalLink } from 'lucide-react';
-import { PawPrint, ExternalLink } from 'lucide-react';
 
 export const HistoryView = ({ onBack }: { onBack: () => void }) => (
-    <div className="max-w-4xl mx-auto p-6 pt-10">
+    <div className="max-w-4xl mx-auto px-4 py-6 sm:p-6 sm:pt-10">
-        <button onClick={onBack} className="mb-8 flex items-center gap-2 text-pink-500 font-bold hover:scale-105 transition-transform">
+        {/* Przycisk powrotu - mniejszy margines na mobile */}
-            <PawPrint size={20} /> Back to KittyURL
+        <button
+            onClick={onBack}
+            className="mb-6 sm:mb-8 flex items-center gap-2 text-pink-500 font-bold hover:scale-105 transition-transform text-sm sm:text-base"
+        >
+            <PawPrint size={18} /> Back to KittyURL
         </button>
-        <div className="bg-white/80 backdrop-blur-md rounded-[2.5rem] p-8 shadow-xl border-2 border-pink-50">
+
-            <h2 className="text-3xl font-black text-slate-800 mb-8">Recent Paws 🐾</h2>
+        <div className="bg-white/80 backdrop-blur-md rounded-[2rem] sm:rounded-[2.5rem] p-5 sm:p-8 shadow-xl border-2 border-pink-50">
+            <h2 className="text-2xl sm:text-3xl font-black text-slate-800 mb-6 sm:mb-8 flex items-center gap-2">
+                Recent Paws <span className="text-xl sm:text-2xl">🐾</span>
+            </h2>
+
             <div className="overflow-hidden rounded-2xl border border-pink-100">
-                <table className="w-full text-left bg-white">
+                {/* Widok Tabeli (widoczny od ekranów 'sm') */}
+                <table className="w-full text-left bg-white hidden sm:table">
                     <thead className="bg-pink-50 text-pink-600">
                         <tr>
                             <th className="px-6 py-4 font-bold uppercase text-xs">Long URL</th>
@@ -18,11 +26,34 @@ export const HistoryView = ({ onBack }: { onBack: () => void }) => (
                     </thead>
                     <tbody className="divide-y divide-pink-50">
                         <tr className="hover:bg-pink-50/50 transition-colors">
-                            <td className="px-6 py-4 text-slate-400 truncate max-w-[200px]">https://very-long-link.com/cats</td>
+                            <td className="px-6 py-4 text-slate-400 truncate max-w-[300px]">
-                            <td className="px-6 py-4 font-bold text-pink-500 flex items-center gap-2">kitty.url/meow <ExternalLink size={14} /></td>
+                                https://very-long-link.com/cats/are/the/best/animals/in/the/world
+                            </td>
+                            <td className="px-6 py-4">
+                                <a href="#" className="font-bold text-pink-500 flex items-center gap-2 hover:underline">
+                                    kitty.url/meow <ExternalLink size={14} />
+                                </a>
+                            </td>
                         </tr>
                     </tbody>
                 </table>
+
+                {/* Widok Mobilny (Lista kart zamiast tabeli - widoczny tylko na małych ekranach) */}
+                <div className="sm:hidden divide-y divide-pink-50 bg-white">
+                    <div className="p-4 space-y-2">
+                        <div className="text-[10px] font-bold text-pink-400 uppercase tracking-wider">Long URL</div>
+                        <div className="text-slate-500 text-sm truncate">
+                            https://very-long-link.com/cats/are/the/best/animals/in/the/world
+                        </div>
+                        <div className="pt-2">
+                            <div className="text-[10px] font-bold text-pink-400 uppercase tracking-wider mb-1">Kitty URL</div>
+                            <a href="#" className="font-bold text-pink-500 flex items-center gap-1 text-sm">
+                                kitty.url/meow <ExternalLink size={14} />
+                            </a>
+                        </div>
+                    </div>
+                    {/* Tutaj możesz mapować kolejne wpisy historii tak samo jak wyżej */}
+                </div>
             </div>
         </div>
     </div>

kittyurl-frontend/src/components/KittyGame.tsx

@@ -243,10 +243,7 @@ export const KittyGame: React.FC<{ onBack: () => void }> = ({ onBack }) => {
                     </div>
                 )}
             </div>
-            <div className="mt-6 flex gap-6 text-slate-300 font-bold uppercase text-xs tracking-[0.2em]">
+            
-                <span>Speed: {Math.round(INITIAL_SPEED + score * SPEED_INCREMENT)} px/s</span>
-                <span>Physics: Delta-Time Based</span>
-            </div>
         </div>
     );
 };

kittyurl-frontend/src/components/Navbar.tsx

@@ -1,5 +1,4 @@
-import { History as HistoryIcon, LogIn, LogOut, Gamepad2, Wind } from 'lucide-react';
+import { History as HistoryIcon, LogIn, LogOut, Gamepad2, Wind, Cat } from 'lucide-react';
-// Używamy 'import type' dla zadowolenia verbatimModuleSyntax
 import type { View } from '../App';
 
 interface NavbarProps {
@@ -9,49 +8,66 @@ interface NavbarProps {
 }
 
 export const Navbar = ({ onNavigate, isAuthenticated, onLogout }: NavbarProps) => (
-    <nav className="max-w-5xl mx-auto py-6 px-6 flex justify-end gap-3">
+    <nav className="max-w-5xl mx-auto py-4 px-4 flex items-center justify-between gap-4">
-        {/* Przycisk Jump Game */}
+        {/* LEWA STRONA: Przycisk Home w stylu Kitty */}
         <button
-            onClick={() => onNavigate('jump-game')}
+            onClick={() => onNavigate('home')}
-            className="flex items-center gap-2 px-4 py-2 bg-pink-100 hover:bg-pink-200 rounded-full font-bold text-pink-600 transition-all active:scale-95"
+            className="flex items-center gap-2 px-4 py-2 bg-pink-500 hover:bg-pink-600 rounded-full font-black text-white transition-all active:scale-95 shadow-lg shadow-pink-200"
         >
-            <Gamepad2 size={18} /> Jump
+            <Cat size={20} fill="currentColor" />
+            <span className="text-lg tracking-tighter">KittyURL</span>
         </button>
 
-        {/* Przycisk Flappy Cat */}
+        {/* PRAWA STRONA: Pozostałe przyciski zgrupowane w divie */}
-        <button
+        <div className="flex flex-wrap justify-end gap-2 sm:gap-3">
-            onClick={() => onNavigate('flappy-game')}
+            {/* Przycisk Jump Game */}
-            className="flex items-center gap-2 px-4 py-2 bg-blue-100 hover:bg-blue-200 rounded-full font-bold text-blue-600 transition-all active:scale-95"
-        >
-            <Wind size={18} /> Flappy
-        </button>
-
-        {/* Przycisk History */}
-        <button
-            onClick={() => onNavigate('history')}
-            className="flex items-center gap-2 px-4 py-2 bg-white rounded-full font-bold text-pink-500 border border-pink-100 transition-all active:scale-95"
-        >
-            <HistoryIcon size={18} /> History
-        </button>
-
-        {/* Dynamiczny przycisk Logowania / Wylogowania */}
-        {isAuthenticated ? (
             <button
-                onClick={() => {
+                onClick={() => onNavigate('jump-game')}
-                    onLogout();
+                className="flex items-center gap-2 px-3 py-2 sm:px-4 bg-pink-100 hover:bg-pink-200 rounded-full font-bold text-pink-600 transition-all active:scale-95 text-sm sm:text-base"
-                    onNavigate('home');
-                }}
-                className="flex items-center gap-2 px-4 py-2 bg-pink-50 hover:bg-pink-100 rounded-full font-bold text-pink-500 border-2 border-pink-200 transition-all active:scale-95"
             >
-                <LogOut size={18} /> Logout
+                <Gamepad2 size={18} />
+                <span className="hidden md:inline">Jump</span>
             </button>
-        ) : (
+
+            {/* Przycisk Flappy Cat */}
             <button
-                onClick={() => onNavigate('login')}
+                onClick={() => onNavigate('flappy-game')}
-                className="flex items-center gap-2 px-4 py-2 bg-pink-500 hover:bg-pink-600 rounded-full font-bold text-white shadow-lg shadow-pink-200 transition-all active:scale-95"
+                className="flex items-center gap-2 px-3 py-2 sm:px-4 bg-blue-100 hover:bg-blue-200 rounded-full font-bold text-blue-600 transition-all active:scale-95 text-sm sm:text-base"
             >
-                <LogIn size={18} /> Sign In
+                <Wind size={18} />
+                <span className="hidden md:inline">Flappy</span>
             </button>
-        )}
+
+            {/* Przycisk History */}
+            <button
+                onClick={() => onNavigate('history')}
+                className="flex items-center gap-2 px-3 py-2 sm:px-4 bg-white rounded-full font-bold text-pink-500 border border-pink-100 transition-all active:scale-95 text-sm sm:text-base"
+            >
+                <HistoryIcon size={18} />
+                <span className="hidden md:inline">History</span>
+            </button>
+
+            {/* Logowanie / Wylogowanie */}
+            {isAuthenticated ? (
+                <button
+                    onClick={() => {
+                        onLogout();
+                        onNavigate('home');
+                    }}
+                    className="flex items-center gap-2 px-3 py-2 sm:px-4 bg-pink-50 hover:bg-pink-100 rounded-full font-bold text-pink-500 border-2 border-pink-200 transition-all active:scale-95 text-sm sm:text-base"
+                >
+                    <LogOut size={18} />
+                    <span className="hidden md:inline">Logout</span>
+                </button>
+            ) : (
+                <button
+                    onClick={() => onNavigate('login')}
+                    className="flex items-center gap-2 px-4 py-2 bg-pink-500 hover:bg-pink-600 rounded-full font-bold text-white transition-all active:scale-95 text-sm sm:text-base shadow-lg shadow-pink-200"
+                >
+                    <LogIn size={18} />
+                    <span className="hidden sm:inline">Sign In</span>
+                </button>
+            )}
+        </div>
     </nav>
 );

kittyurl-frontend/src/context/AuthProvider.tsx

@@ -1,47 +1,66 @@
-// src/context/AuthProvider.tsx
+import { useState, useCallback, type ReactNode } from 'react';
-import { useState, useCallback, type ReactNode } from 'react';
+import { AuthContext } from './AuthContext';
-import { AuthContext } from './AuthContext'; // Importujemy stałą z pliku obok
 import { sha512 } from '../utils/crypto';
-import type { AuthResponse } from '../types/auth';
+
+// Nazwa klucza w localStorage (musi być spójna z Generator.tsx)
+const TOKEN_KEY = 'jwt_token';
+
+// Adres API
+const API_BASE = import.meta.env.VITE_API_TARGET || 'https://ktty.is';
 
 export function AuthProvider({ children }: { children: ReactNode }) {
-    const [token, setToken] = useState<string | null>(sessionStorage.getItem('ktty_token'));
+    // Inicjalizacja stanu
+    const [token, setToken] = useState<string | null>(() => localStorage.getItem(TOKEN_KEY));
     const [loading, setLoading] = useState(false);
     const [error, setError] = useState<string | null>(null);
 
-    const authRequest = useCallback(async (endpoint: 'signUp' | 'signIn', name: string, pass: string) => {
+    const authRequest = useCallback(async (endpoint: 'signIn' | 'signUp', name: string, pass: string) => {
         setLoading(true);
         setError(null);
+
         try {
             const hashedPassword = await sha512(pass);
-            const response = await fetch(`/api/v1/user/${endpoint}`, {
+
+            const response = await fetch(`${API_BASE}/api/v1/user/${endpoint}`, {
                 method: 'POST',
-                headers: {
+                headers: { 'Content-Type': 'application/json' },
-                    'accept': 'application/json',
+                body: JSON.stringify({ name, password: hashedPassword }),
-                    'Content-Type': 'application/json',
-                },
-                body: JSON.stringify({ name, password: hashedPassword, ttl: 86400 }),
             });
 
-            const data: AuthResponse = await response.json();
+            const data = await response.json();
-            if (!response.ok) throw new Error(data.error || data.message || `Error ${response.status}`);
 
-            if (data.token) {
+            if (!response.ok) {
-                sessionStorage.setItem('ktty_token', data.token);
+                throw new Error(data?.message || data?.error || 'Błąd autoryzacji');
-                setToken(data.token); // To aktualizuje stan w całej aplikacji natychmiast!
             }
+
+            if (data?.token) {
+                localStorage.setItem(TOKEN_KEY, data.token);
+                setToken(data.token);
+            }
+
             return data;
+
         } catch (err: unknown) {
-            setError(err instanceof Error ? err.message : 'Unknown error');
+            const msg = err instanceof Error ? err.message : 'Wystąpił błąd';
+            setError(msg);
             return null;
         } finally {
             setLoading(false);
         }
     }, []);
 
+    // ZMODYFIKOWANA FUNKCJA LOGOUT
     const logout = useCallback(() => {
-        sessionStorage.removeItem('ktty_token');
+        // 1. Usuwamy token z pamięci
+        localStorage.removeItem(TOKEN_KEY);
         setToken(null);
+
+        // 2. Wymuszamy odświeżenie aplikacji
+        // To jest "Hard Refresh", który czyści cały stan Reacta
+        window.location.reload();
+
+        // Opcjonalnie: Jeśli wolisz tylko przekierowanie na główną bez pełnego przeładowania (szybciej, ale zostawia stan w pamięci):
+        // window.location.href = '/'; 
     }, []);
 
     return (

kittyurl-frontend/tsconfig.app.json

@@ -1,4 +1,4 @@
-{
+{
   "compilerOptions": {
     "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
     "target": "ES2022",

kittyurl-frontend/tsconfig.json

@@ -1,7 +1,8 @@
-{
+{
   "files": [],
   "references": [
     { "path": "./tsconfig.app.json" },
     { "path": "./tsconfig.node.json" }
+
   ]
 }

kittyurl-frontend/vite.config.ts

@@ -1,40 +1,54 @@
-import { defineConfig } from 'vite'
+import { defineConfig, loadEnv, type PluginOption } from 'vite'
 import react from '@vitejs/plugin-react'
 import tailwindcss from '@tailwindcss/vite'
+import path from 'path'
+import { fileURLToPath } from 'url'
 
-export default defineConfig({
+const __filename = fileURLToPath(import.meta.url);
-    plugins: [
+const __dirname = path.dirname(__filename);
-        react(),
-        tailwindcss(),
-    ],
-    server: {
-        port: 6568,
-        proxy: {
-            '/api': {
-                target: 'https://ktty.is',
-                changeOrigin: true,
-                secure: false,
-                // Dodatkowe nagłówki pomagają oszukać zabezpieczenia serwera (np. Cloudflare)
-                headers: {
-                    'Origin': 'https://ktty.is',
-                    'Referer': 'https://ktty.is/'
-                },
-                configure: (proxy) => {
-                    proxy.on('error', (err) => {
-                        console.log('[Proxy Error]:', err.message);
-                    });
-                    proxy.on('proxyReq', (_, req) => {
-                        console.log(`[Proxy] Wysyłam do zdalnego serwera: ${req.method} ${req.url}`);
-                    });
-                    proxy.on('proxyRes', (proxyRes, req) => {
-                        console.log(`[Proxy] Odpowiedź z ktty.is: ${proxyRes.statusCode} ${req.url}`);
-                    });
-                },
-            }
-        }
-    },
-    preview: {
-        port: 6568,      
 
-    },
+export default defineConfig(({ mode }) => {
+    const envDirectory = path.resolve(__dirname, '..');
+    const env = loadEnv(mode, envDirectory, '');
+
+    const backendTarget = env.VITE_API_TARGET;
+
+    return {
+        envDir: envDirectory,
+        plugins: [
+            react() as PluginOption,
+            tailwindcss() as PluginOption,
+        ],
+        server: {
+            port: 6568,
+            host: true, // Pozwala na dostęp przez IP w sieci lokalnej
+            // Jeśli testujesz subdomeny lokalnie (np. app.local.ktty.is), dodaj to:
+            allowedHosts: [
+                '.ktty.is',
+                'localhost',
+                '127.0.0.1',
+
+            ],
+            // vite.config.ts
+            proxy: {
+                '/api': {
+                    target: backendTarget,
+                    changeOrigin: true,
+                    secure: false,
+                    cookieDomainRewrite: {
+                        "*": ""
+                    },                    
+                },
+            },
+        },
+        preview: {
+            port: 6568,
+            allowedHosts: true,
+        },
+        resolve: {
+            alias: {
+                '@': path.resolve(__dirname, './src'),
+            },
+        },
+    }
 })