Theis Gaedigk
b99f52f09a
- Add package.json with dependencies and scripts for development and build - Include Vite logo and React logo SVGs in public/assets - Set up Tailwind CSS in App.css and index.css - Create main App component with routing for Home and Login pages - Implement LoginPage with authentication logic and error handling - Add HomePage component as a landing page - Create MyAlert component for displaying alerts using Chakra UI - Implement color mode toggle functionality with Chakra UI - Set up global state management using Jotai for authentication - Create ProtectedRoutes component to guard routes based on authentication - Add utility components for Toaster and Tooltip using Chakra UI - Configure Tailwind CSS and TypeScript settings for the project - Implement AddLoan component for selecting loan periods and fetching available items
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