Merge branch 'dev_v1-admin' into debian12_v1-admin

fix: update dependency reference for backend service in docker-compose

README.md

@@ -1,73 +1,7 @@
 # Borrow System
 
-![React](https://img.shields.io/badge/React-20232A?logo=react&logoColor=61DAFB)
-![TypeScript](https://img.shields.io/badge/TypeScript-3178C6?logo=typescript&logoColor=white)
-![Vite](https://img.shields.io/badge/Vite-646CFF?logo=vite&logoColor=white)
-![TailwindCSS](https://img.shields.io/badge/Tailwind_CSS-38B2AC?logo=tailwind-css&logoColor=white)
-![Node.js](https://img.shields.io/badge/Node.js-339933?logo=node.js&logoColor=white)
-![Express](https://img.shields.io/badge/Express-000000?logo=express&logoColor=white)
-![MySQL](https://img.shields.io/badge/MySQL-4479A1?logo=mysql&logoColor=white)
-![Docker](https://img.shields.io/badge/Docker-2496ED?logo=docker&logoColor=white)
-![JWT](https://img.shields.io/badge/JWT-000000?logo=jsonwebtokens&logoColor=white)
+**You have reached the `debian12` branch.**
 
-A small full‑stack system to log in, view available items, reserve them for a time window, and manage personal loans.
+Here you will find the source code of exactly the application that I have hosted.
 
-- Frontend: React + TypeScript + Vite + Tailwind CSS
-- Backend: Node.js + Express + MySQL + JWT (jose)
-- Orchestration: Docker Compose (backend + MySQL)
-
-## Contents
-
-- Frontend: [frontend/](frontend)
-  - Vite/Tailwind config: [frontend/vite.config.ts](frontend/vite.config.ts), [frontend/tailwind.config.js](frontend/tailwind.config.js)
-  - App entry: [frontend/src/main.tsx](frontend/src/main.tsx), [frontend/src/App.tsx](frontend/src/App.tsx)
-  - UI: [frontend/src/layout/Layout.tsx](frontend/src/layout/Layout.tsx), [frontend/src/components](frontend/src/components)
-  - Data/utilities: [frontend/src/utils/fetchData.ts](frontend/src/utils/fetchData.ts), [frontend/src/utils/userHandler.ts](frontend/src/utils/userHandler.ts), [frontend/src/utils/toastify.ts](frontend/src/utils/toastify.ts)
-- Backend: [backend/](backend)
-  - Server: [backend/server.js](backend/server.js)
-  - Routes: [backend/routes/api.js](backend/routes/api.js), [backend/routes/apiV2.js](backend/routes/apiV2.js)
-  - DB + services: [backend/services/database.js](backend/services/database.js), [backend/services/tokenService.js](backend/services/tokenService.js)
-  - Schema/seed: [backend/scheme.sql](backend/scheme.sql)
-- Docs: [docs/](docs)
-  - API docs (see below): [docs/backend_API_docs/README.md](docs/backend_API_docs/README.md)
-
-## Features (high‑level)
-
-- Auth via JWT (login -> token cookie) using the backend route in [backend/routes/api.js](backend/routes/api.js).
-- After login, the app loads items, loans, and user loans and keeps them in localStorage.
-- Choose a date range to fetch borrowable items, select items, and create a loan.
-- Manage personal loans list (and delete a loan).
-
-Key frontend utilities:
-
-- [`utils.fetchData.fetchAllData`](frontend/src/utils/fetchData.ts): loads items, loans, and user loans after login.
-- [`utils.fetchData.getBorrowableItems`](frontend/src/utils/fetchData.ts): fetches borrowable items for the selected time range.
-- [`utils.userHandler.createLoan`](frontend/src/utils/userHandler.ts): creates a new loan for selected items.
-- [`utils.userHandler.handleDeleteLoan`](frontend/src/utils/userHandler.ts): deletes a loan and syncs local state.
-- [`utils.toastify.myToast`](frontend/src/utils/toastify.ts): toast notifications.
-
-UI flow (main screens):
-
-- Period selection: [frontend/src/components/Form1.tsx](frontend/src/components/Form1.tsx)
-- Borrowable items + selection: [frontend/src/components/Form2.tsx](frontend/src/components/Form2.tsx)
-- User loans table: [frontend/src/components/Form4.tsx](frontend/src/components/Form4.tsx)
-
-## Development
-
-- Scripts: see [frontend/package.json](frontend/package.json) and [backend/package.json](backend/package.json)
-  - Frontend: `npm run dev`, `npm run build`, `npm run preview`, `npm run lint`
-  - Backend: `npm start`
-- Linting: ESLint configured via [frontend/eslint.config.js](frontend/eslint.config.js)
-- TypeScript configs: [frontend/tsconfig.app.json](frontend/tsconfig.app.json), [frontend/tsconfig.node.json](frontend/tsconfig.node.json)
-
-## Configuration notes
-
-- Vite/Tailwind integration via [frontend/vite.config.ts](frontend/vite.config.ts) and `@tailwindcss/vite`; CSS entry uses `@import "tailwindcss"` in [frontend/src/index.css](frontend/src/index.css).
-- Toasts wired in [frontend/src/main.tsx](frontend/src/main.tsx) with `react-toastify`.
-- Local state is stored in `localStorage` keys: `allItems`, `allLoans`, `userLoans`, `borrowableItems`. Cross‑component updates are signaled via window events from [`utils.fetchData`](frontend/src/utils/fetchData.ts).
-
-## API documentation
-
-Refer to the dedicated API docs:
-
-`docs/backend_API_docs/README.md`
+The main branch or the branch that I am developing on, is the `dev` branch.

backend/Dockerfile

@@ -7,6 +7,6 @@ RUN npm install
 
 COPY . .
 
-EXPOSE 8002
+EXPOSE 8102
 
 CMD ["npm", "start"]

backend/server.js

@@ -5,7 +5,7 @@ import apiRouter from "./routes/api.js";
 import apiRouterV2 from "./routes/apiV2.js";
 env.config();
 const app = express();
-const port = 8002;
+const port = 8102;
 
 app.use(cors());
 // Increase body size limits to support large CSV JSON payloads

backend/services/database.js

@@ -8,6 +8,7 @@ const pool = mysql
     user: process.env.DB_USER,
     password: process.env.DB_PASSWORD,
     database: process.env.DB_NAME,
+    port: process.env.DB_PORT,
   })
   .promise();
 

docker-compose.yml

@@ -1,15 +1,18 @@
 services:
-  #  borrow_system-frontend:
-  #    container_name: borrow_system-frontend
-  #    build: ./frontend
-  #    ports:
-  #      - "8001:8001"
-  #    environment:
-  #      - CHOKIDAR_USEPOLLING=true
-  #    volumes:
-  #      - ./frontend:/app
-  #      - /app/node_modules
-  #    restart: unless-stopped
+  borrow_system-frontend:
+    container_name: borrow_system-frontend
+    build: ./frontend
+    ports:
+      - "8101:8101"
+    networks:
+      - proxynet
+      - borrow_system-internal
+    environment:
+      - CHOKIDAR_USEPOLLING=true
+    volumes:
+      - ./frontend:/app
+      - /app/node_modules
+    restart: unless-stopped
 
   #  admin-frontend:
   #    container_name: admin-frontend
@@ -27,9 +30,13 @@ services:
     container_name: borrow_system-backend
     build: ./backend
     ports:
-      - "8002:8002"
+      - "8102:8102"
+    networks:
+      - proxynet
+      - borrow_system-internal
     environment:
       DB_HOST: mysql
+      DB_PORT: 3306
       DB_USER: root
       DB_PASSWORD: ${DB_PASSWORD}
       DB_NAME: borrow_system
@@ -50,6 +57,14 @@ services:
       - mysql-data:/var/lib/mysql
     ports:
       - "3309:3306"
+    networks:
+      - borrow_system-internal
 
 volumes:
   mysql-data:
+
+networks:
+  proxynet:
+    external: true
+  borrow_system-internal:
+    external: false

frontend/Dockerfile

@@ -7,6 +7,6 @@ RUN npm install
 
 COPY . .
 
-EXPOSE 8001
+EXPOSE 8101
 
 CMD ["npm", "run", "dev"]

frontend/src/components/Form4.tsx

@@ -27,7 +27,7 @@ const formatDate = (iso: string | null) => {
 };
 
 async function fetchUserLoans(): Promise<Loan[]> {
-  const res = await fetch("http://localhost:8002/api/userLoans", {
+  const res = await fetch("https://backend.insta.the1s.de/api/userLoans", {
     method: "GET",
     headers: { Authorization: `Bearer ${Cookies.get("token") || ""}` },
   });

frontend/src/utils/fetchData.ts

@@ -25,7 +25,7 @@ export const fetchAllData = async (token: string | undefined) => {
   if (!token) return;
   // First we fetch all items that are potentially available for borrowing
   try {
-    const response = await fetch("http://localhost:8002/api/items", {
+    const response = await fetch("https://backend.insta.the1s.de/api/items", {
       method: "GET",
       headers: {
         Authorization: `Bearer ${token}`,
@@ -57,7 +57,7 @@ export const fetchAllData = async (token: string | undefined) => {
 
   // get all loans
   try {
-    const response = await fetch("http://localhost:8002/api/loans", {
+    const response = await fetch("https://backend.insta.the1s.de/api/loans", {
       method: "GET",
       headers: {
         Authorization: `Bearer ${token}`,
@@ -89,7 +89,7 @@ export const fetchAllData = async (token: string | undefined) => {
 
   // get user loans
   try {
-    const response = await fetch("http://localhost:8002/api/userLoans", {
+    const response = await fetch("https://backend.insta.the1s.de/api/userLoans", {
       method: "GET",
       headers: {
         Authorization: `Bearer ${token}`,
@@ -122,7 +122,7 @@ export const fetchAllData = async (token: string | undefined) => {
 
 export const loginUser = async (username: string, password: string) => {
   try {
-    const response = await fetch("http://localhost:8002/api/login", {
+    const response = await fetch("https://backend.insta.the1s.de/api/login", {
       method: "POST",
       headers: {
         "Content-Type": "application/json",
@@ -158,7 +158,7 @@ export const getBorrowableItems = async () => {
   }
 
   try {
-    const response = await fetch("http://localhost:8002/api/borrowableItems", {
+    const response = await fetch("https://backend.insta.the1s.de/api/borrowableItems", {
       method: "POST",
       headers: {
         Authorization: `Bearer ${Cookies.get("token") || ""}`,

frontend/src/utils/userHandler.ts

@@ -5,7 +5,7 @@ import { queryClient } from "./queryClient";
 export const handleDeleteLoan = async (loanID: number): Promise<boolean> => {
   try {
     const response = await fetch(
-      `http://localhost:8002/api/deleteLoan/${loanID}`,
+      `https://backend.insta.the1s.de/api/deleteLoan/${loanID}`,
       {
         method: "DELETE",
         headers: {
@@ -75,7 +75,7 @@ export const rmFromRemove = (itemID: number) => {
 
 export const createLoan = async (startDate: string, endDate: string) => {
   const items = removeArr;
-  const response = await fetch("http://localhost:8002/api/createLoan", {
+  const response = await fetch("https://backend.insta.the1s.de/api/createLoan", {
     method: "POST",
     headers: {
       "Content-Type": "application/json",

frontend/vite.config.ts

@@ -1,15 +1,17 @@
 import { defineConfig } from "vite";
-import react from "@vitejs/plugin-react";
-import svgr from "vite-plugin-svgr";
 import tailwindcss from "@tailwindcss/vite";
 
 export default defineConfig({
-  plugins: [react(), svgr(), tailwindcss()],
+  plugins: [tailwindcss()],
   server: {
     host: "0.0.0.0",
-    port: 8001,
-    watch: {
-      usePolling: true,
+    allowedHosts: ["insta.the1s.de"],
+    port: 8101,
+    watch: { usePolling: true },
+    hmr: {
+      host: "insta.the1s.de",
+      port: 8101,
+      protocol: "wss",
     },
   },
 });