Theis Gaedigk
a8b4ac3d60
- Updated LoanTable component to fetch loan data from new API endpoint and display notes. - Enhanced UserTable component to include additional user fields (first name, last name, email, admin status) and updated input handling. - Modified fetcher utility to use new user data API endpoint. - Adjusted login functionality to point to the new admin login endpoint and handle unauthorized access. - Refactored user actions utility to align with updated API endpoints for user management. - Updated backend routes for user and loan data management to reflect new structure and naming conventions. - Revised SQL schema and mock data to accommodate new fields and constraints. - Changed Docker configuration to use the new database name.
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
- Frontend:
- 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
localStoragekeys:allItems,allLoans,userLoans,borrowableItems. Cross‑component updates are signaled via window events fromutils.fetchData.
API documentation
Refer to the dedicated API docs:
docs/backend_API_docs/README.md