UPDATE: Change default API URL to localhost for local development

.dockerignore

@@ -0,0 +1,10 @@
+node_modules
+npm-debug.log
+dist
+.git
+.gitignore
+.idea
+.vscode
+Dockerfile
+README.md
+

.env.example

@@ -0,0 +1,2 @@
+VITE_API_URL=/api/v1
+

.gitignore

@@ -22,3 +22,5 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
+
+.env

Dockerfile

@@ -0,0 +1,16 @@
+FROM node:22-alpine AS build
+WORKDIR /app
+
+COPY package*.json ./
+RUN npm ci
+
+COPY . .
+RUN npm run build
+
+FROM nginxinc/nginx-unprivileged:1.27-alpine AS runtime
+COPY nginx.conf /etc/nginx/conf.d/default.conf
+COPY --from=build /app/dist /usr/share/nginx/html
+
+EXPOSE 8000
+
+CMD ["nginx", "-g", "daemon off;"]

README.md

@@ -1,16 +1,23 @@
-# React + Vite
+# Listhub Frontend Repository
 
-This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+To start developing
 
-Currently, two official plugins are available:
+```bash
+npm install
+```
 
-- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Oxc](https://oxc.rs)
+and then
-- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/)
 
-## React Compiler
+```bash
+npm run start
+```
 
-The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see [this documentation](https://react.dev/learn/react-compiler/installation).
 
-## Expanding the ESLint configuration
+## API configuration
 
-If you are developing a production application, we recommend using TypeScript with type-aware lint rules enabled. Check out the [TS template](https://github.com/vitejs/vite/tree/main/packages/create-vite/template-react-ts) for information on how to integrate TypeScript and [`typescript-eslint`](https://typescript-eslint.io) in your project.
+The frontend reads the base backend URL from `VITE_API_URL` in `src/config/api.js`.
+
+- Default: `/api/v1` (works with the Vite dev proxy)
+- To override it, create a local `.env` file and set `VITE_API_URL` to your backend URL
+
+See `.env.example` for a ready-to-copy example.

nginx.conf

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

src/api/api.js

@@ -0,0 +1,10 @@
+import axios from "axios";
+import { API_URL } from "../config/api";
+
+const api = axios.create({
+  baseURL: API_URL,
+});
+
+export { api };
+export default api;
+

src/api/auth.js

@@ -1,10 +1,8 @@
-import axios from "axios";
+import api from "./api";
-
-export const API_URL = "/api/v1";
 
 export async function login(userData) {
     try {
-        const response = await axios.post(`${API_URL}/auth/login`, userData, {
+        const response = await api.post(`/auth/login`, userData, {
             headers: {"Content-Type": "application/json"},
         });
         return response.data;
@@ -16,7 +14,7 @@ export async function login(userData) {
 
 export async function register(userData) {
     try {
-        const response = await axios.post(`${API_URL}/auth/register`, userData, {
+        const response = await api.post(`/auth/register`, userData, {
             headers: {"Content-Type": "application/json"},
         });
         return response.data;
@@ -28,8 +26,8 @@ export async function register(userData) {
 
 export async function googleLogin(googleToken) {
     try {
-        const response = await axios.post(
+        const response = await api.post(
-            `${API_URL}/auth/google`,
+            `/auth/google`,
             { googleToken: googleToken },
             {
                 headers: { "Content-Type": "application/json" },
@@ -45,8 +43,8 @@ export async function googleLogin(googleToken) {
 export async function logout(token) {
     const headers = token ? { Authorization: `Bearer ${token}` } : {};
     try {
-        const response = await axios.post(
+        const response = await api.post(
-            `${API_URL}/auth/logout`,
+            `/auth/logout`,
             {},
             {
                 headers: headers,

src/api/categories.js

@@ -1,12 +1,10 @@
-import axios from "axios";
 import { useAuthStore } from "../store/authStore";
-
+import api from "./api";
-const API_URL = "/api/v1";
 
 export async function listCategories() {
   const { token } = useAuthStore.getState();
   const headers = token ? { Authorization: `Bearer ${token}` } : {};
 
-  const response = await axios.get(`${API_URL}/vars/categories`, { headers });
+  const response = await api.get(`/vars/categories`, { headers });
   return Array.isArray(response.data) ? response.data : [];
 }

src/api/notices.js

@@ -1,18 +1,16 @@
-import axios from "axios";
 import { useAuthStore } from "../store/authStore";
-
+import api from "./api";
-const API_URL = "/api/v1";
 
 const getAuthHeaders = () => {
   const { token } = useAuthStore.getState();
   return token ? { Authorization: `Bearer ${token}` } : {};
 };
 
-const buildImageUrl = (imageName) => `${API_URL}/images/get/${imageName}`;
+const buildImageUrl = (imageName) => `/images/get/${imageName}`;
 
 const fetchImageAsBlobUrl = async (imageUrl) => {
   const headers = getAuthHeaders();
-  const response = await axios.get(imageUrl, {
+  const response = await api.get(imageUrl, {
     headers,
     responseType: "blob",
   });
@@ -22,27 +20,18 @@ const fetchImageAsBlobUrl = async (imageUrl) => {
 export async function listNotices() {
   const headers = getAuthHeaders();
 
-  const response = await fetch(`${API_URL}/notices/get/all`, {
+  const response = await api.get(`/notices/get/all`, {
     headers: headers,
   });
-  const data = await response.json();
+  return response.data;
-
-  if (!response.ok) {
-    throw new Error(data.message || "Failed to fetch notices");
-  }
-  return data;
 }
 
 export async function getNoticeById(noticeId) {
   const headers = getAuthHeaders();
-  const response = await fetch(`${API_URL}/notices/get/${noticeId}`, {
+  const response = await api.get(`/notices/get/${noticeId}`, {
     headers,
   });
-  const data = await response.json();
+  return response.data;
-  if (!response.ok) {
-    throw new Error("Error fetching notice");
-  }
-  return data;
 }
 
 export async function createNotice(notice) {
@@ -58,7 +47,7 @@ export async function createNotice(notice) {
   };
 
   try {
-    const response = await axios.post(`${API_URL}/notices/add`, payload, {
+    const response = await api.post(`/notices/add`, payload, {
       headers: headers,
     });
 
@@ -82,7 +71,7 @@ export async function getImageByNoticeId(noticeId) {
   const headers = getAuthHeaders();
 
   try {
-    const listResponse = await axios.get(`${API_URL}/images/list/${noticeId}`, {
+    const listResponse = await api.get(`/images/list/${noticeId}`, {
       headers,
     });
     const imageName = listResponse.data[0];
@@ -98,7 +87,7 @@ export async function getImageByNoticeId(noticeId) {
 export async function getAllImagesByNoticeId(noticeId) {
   const headers = getAuthHeaders();
   try {
-    const listResponse = await axios.get(`${API_URL}/images/list/${noticeId}`, {
+    const listResponse = await api.get(`/images/list/${noticeId}`, {
       headers: headers,
     });
 
@@ -126,8 +115,8 @@ export const uploadImage = async (noticeId, file, isFirst) => {
   formData.append("file", file);
 
   try {
-    const response = await axios.post(
+    const response = await api.post(
-      `${API_URL}/images/upload/${noticeId}?isMainImage=${isFirst}`,
+      `/images/upload/${noticeId}?isMainImage=${isFirst}`,
       formData,
       { headers: headers }
     );
@@ -140,8 +129,8 @@ export const uploadImage = async (noticeId, file, isFirst) => {
 
 export const deleteNotice = async (noticeId) => {
   const headers = getAuthHeaders();
-  const response = await axios.delete(
+  const response = await api.delete(
-    `${API_URL}/notices/delete/${noticeId}`,
+    `/notices/delete/${noticeId}`,
     { headers: headers }
   );
   return response.data;
@@ -149,8 +138,8 @@ export const deleteNotice = async (noticeId) => {
 
 export const editNotice = async (noticeId, notice) => {
   const headers = getAuthHeaders();
-  const response = await axios.put(
+  const response = await api.put(
-    `${API_URL}/notices/edit/${noticeId}`,
+    `/notices/edit/${noticeId}`,
     {
       title: notice.title,
       description: notice.description,
@@ -176,8 +165,8 @@ export const editNotice = async (noticeId, notice) => {
 
 export const deleteImage = async (filename) => {
   const headers = getAuthHeaders();
-  const response = await axios.delete(
+  const response = await api.delete(
-    `${API_URL}/images/delete/${filename}`,
+    `/images/delete/${filename}`,
     { headers: headers }
   );
   return response.data;
@@ -187,7 +176,7 @@ export async function listImageNamesByNoticeId(noticeId) {
   const headers = getAuthHeaders();
 
   try {
-    const response = await axios.get(`${API_URL}/images/list/${noticeId}`, {
+    const response = await api.get(`/images/list/${noticeId}`, {
       headers,
     });
     return Array.isArray(response.data) ? response.data : [];

src/api/wishlist.js

@@ -1,15 +1,13 @@
-import axios from "axios";
 import { useAuthStore } from "../store/authStore";
-
+import api from "./api";
-const API_URL = "/api/v1/wishlist";
 
 export async function toggleNoticeStatus(noticeId) {
   const { token } = useAuthStore.getState();
   const headers = token ? { Authorization: `Bearer ${token}` } : {};
 
   try {
-    const response = await axios.post(
+    const response = await api.post(
-      `${API_URL}/toggle/${noticeId}`,
+      `/wishlist/toggle/${noticeId}`,
       {},
       { headers: headers }
     );
@@ -25,7 +23,7 @@ export async function getWishlist() {
   const headers = token ? { Authorization: `Bearer ${token}` } : {};
 
   try {
-    const response = await axios.get(`${API_URL}/`, { headers: headers });
+    const response = await api.get(`/wishlist/`, { headers: headers });
     return response.data;
   } catch (error) {
     console.error("Error fetching wishlist:", error);

src/config/api.js

@@ -0,0 +1,8 @@
+const DEFAULT_API_URL = "http://localhost:8080/api/v1";
+
+const trimTrailingSlash = (value) => value.replace(/\/+$/, "");
+
+export const API_URL = trimTrailingSlash(
+  import.meta.env.VITE_API_URL || DEFAULT_API_URL
+);
+

src/pages/Login.jsx

@@ -112,19 +112,6 @@ export default function Login() {
                         <span className="px-2 bg-white text-gray-400 font-medium">lub</span>
                     </div>
                 </div>
-
-                <button
-                    onClick={() => alert("Google Login placeholder")}
-                    className="w-full flex items-center justify-center gap-2 border border-gray-300 py-3 rounded-lg hover:bg-gray-50 transition-colors"
-                >
-                    <svg className="w-5 h-5" viewBox="0 0 24 24">
-                        <path fill="#4285F4" d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"/>
-                        <path fill="#34A853" d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"/>
-                        <path fill="#FBBC05" d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l3.66-2.84z"/>
-                        <path fill="#EA4335" d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"/>
-                    </svg>
-                    Zaloguj się przez Google
-                </button>
             </div>
         </div>
     );

src/store/authStore.js

@@ -1,26 +1,42 @@
 import { create } from "zustand";
 import { persist } from "zustand/middleware";
-import axios from "axios";
 import * as api from "../api/auth";
+import apiClient from "../api/api";
 
-export const useAuthStore = create(
+let authInterceptorId = null;
-  persist(
+
-    (set, get) => {
+const shouldRedirectToLogin = (error) => {
-      // Axios interceptor for handling 401/403
+  const status = Number(error?.response?.status);
-      axios.interceptors.response.use(
+  return status === 401 || status === 403;
+};
+
+const registerAuthInterceptor = (set) => {
+  if (authInterceptorId !== null) {
+    return;
+  }
+
+  authInterceptorId = apiClient.interceptors.response.use(
     (response) => response,
     (error) => {
-          if (error.response && (error.response.status === 401 || error.response.status === 403)) {
+      if (!shouldRedirectToLogin(error)) {
+        return Promise.reject(error);
+      }
+
       set({ user_id: null, token: null, isLoading: false });
-            delete axios.defaults.headers.common["Authorization"];
+      delete apiClient.defaults.headers.common["Authorization"];
-            // Redirect to login using window.location for global interceptor
+
       if (window.location.pathname !== '/login') {
           window.location.href = '/login';
       }
-          }
       return Promise.reject(error);
     }
   );
+};
+
+export const useAuthStore = create(
+  persist(
+    (set, get) => {
+      registerAuthInterceptor(set);
 
       return {
         user_id: null,