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

Quick start

You can run the backend + MySQL via Docker, and run the frontend locally.

1) Environment

Root .env (used by docker-compose):

DB_PASSWORD=yourStrongPassword

Backend .env (used by Node in the backend container or local dev):

# DB (only needed for local dev; in Docker these are provided by compose)
DB_HOST=mysql
DB_USER=root
DB_PASSWORD=yourStrongPassword
DB_NAME=borrow_system

# Security
SECRET_KEY=yourVerySecretJwtKey
ADMIN_ID=yourAdminApiKey

2) Start backend + DB (Docker)

From the repo root:

docker compose up -d

• Backend: http://localhost:8002
• MySQL: localhost:3309 (mapped to container 3306)

Initialize schema and mock data in MySQL:

# copy schema into the mysql container
docker cp backend/scheme.sql borrow_system-mysql:/scheme.sql

# run it
docker exec -i borrow_system-mysql sh -c 'mysql -u root -p"$MYSQL_ROOT_PASSWORD" borrow_system < /scheme.sql'

3) Run the frontend (local)

cd frontend
npm install
npm run dev

• Frontend: http://localhost:8001 (configured in frontend/vite.config.ts)

The frontend expects the backend on http://localhost:8002 (see fetches in frontend/src/utils/fetchData.ts and frontend/src/utils/userHandler.ts).

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

Do not use this README for API details. Refer to the dedicated API docs:

• Web/API