theis.gaedigk
2480bfab89
- Removed obsolete PDF file from the mock directory. - Updated index.html to change the favicon and title for the application. - Deleted unused vite.svg file and replaced it with shapes.svg. - Enhanced App component layout and styling. - Refined Form1 component with better spacing and updated styles. - Improved Form2 component to enhance item selection UI and responsiveness. - Updated Form4 component to improve loan display and interaction. - Enhanced Header component styling for better visibility. - Refined LoginForm component for a more modern look. - Updated Object component styles for better text visibility. - Improved Sidebar component layout and item display. - Updated global CSS for better touch target improvements. - Enhanced Layout component for better responsiveness and structure. - Updated main.tsx to change toast notification theme. - Updated tailwind.config.js to include index.html for Tailwind CSS processing.
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