Borrow System

A small full‑stack system to log in, view available items, reserve them for a time window, and manage personal loans.

• Frontend: React + TypeScript + Vite + Tailwind CSS
• Backend: Node.js + Express + MySQL + JWT (jose)
• Orchestration: Docker Compose (backend + MySQL)

Contents

• Frontend: frontend/
  • Vite/Tailwind config: frontend/vite.config.ts, frontend/tailwind.config.js
  • App entry: frontend/src/main.tsx, frontend/src/App.tsx

  UI: frontend/src/layout/Layout.tsx, frontend/src/components

  Data/utilities: frontend/src/utils/fetchData.ts, frontend/src/utils/userHandler.ts, frontend/src/utils/toastify.ts
• Backend: backend/
  • Server: backend/server.js
  • Routes: backend/routes/api.js, backend/routes/apiV2.js
  • DB + services: backend/services/database.js, backend/services/tokenService.js
  • Schema/seed: backend/scheme.sql
• Docs: docs/
  • API docs (see below): docs/backend_API_docs/README.md

Features (high‑level)

• Auth via JWT (login -> token cookie) using the backend route in 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: loads items, loans, and user loans after login.
• utils.fetchData.getBorrowableItems: fetches borrowable items for the selected time range.
• utils.userHandler.createLoan: creates a new loan for selected items.
• utils.userHandler.handleDeleteLoan: deletes a loan and syncs local state.
• utils.toastify.myToast: toast notifications.

UI flow (main screens):

• Period selection: frontend/src/components/Form1.tsx
• Borrowable items + selection: frontend/src/components/Form2.tsx
• User loans table: frontend/src/components/Form4.tsx

Development

• The NAAS (no-as-a-service) and the mysql database are running in a docker container
• frontend, backend and admin are both in a vite dev server and can be started by npm run dev in the root directory.

Configuration notes

• Vite/Tailwind integration via frontend/vite.config.ts and @tailwindcss/vite; CSS entry uses @import "tailwindcss" in frontend/src/index.css.
• Toasts wired in 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.

API documentation

Refer to the dedicated API-Docs