borrow-system/README.md

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

• Scripts: see frontend/package.json and 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
• TypeScript configs: frontend/tsconfig.app.json, frontend/tsconfig.node.json

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:

docs/backend_API_docs/README.md