You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: CLAUDE.md
+26-26Lines changed: 26 additions & 26 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -9,55 +9,65 @@ Onlinemat is a material/equipment lending management system for Cevi (Swiss yout
9
9
## Development Commands
10
10
11
11
```bash
12
-
# Prerequisites: Node.js 15.14.0 via nvm, yarn installed globally
13
-
nvm use 15.14.0
12
+
# Prerequisites: Node.js 24 LTS via nvm, yarn installed globally
13
+
nvm use 24
14
14
15
15
# Install dependencies
16
16
yarn
17
17
18
18
# Start dev server (http://localhost:3000)
19
-
yarn start
19
+
yarn dev
20
20
21
21
# Production build
22
22
yarn build
23
23
24
+
# Preview production build
25
+
yarn preview
26
+
24
27
# Run tests
25
28
yarn test
26
-
27
-
# Serve production build locally
28
-
yarn serve
29
29
```
30
30
31
-
A `.env` file is required (copy `.env.example` and fill in secrets). Environment variables configure Firebase, Auth0, and Sentry.
31
+
A `.env` file is required (copy `.env.example` and fill in secrets). Environment variables use the `VITE_` prefix (e.g. `VITE_FIREBASE_API_KEY`).
32
32
33
33
## Tech Stack
34
34
35
-
-**React 17** with TypeScript, bootstrapped with Create React App (react-scripts 4.0.3)
36
-
-**Ant Design (antd)** for UI components
37
-
-**Firebase** (Firestore) as the backend/database — all domain data flows through real-time Firestore listeners (`onSnapshot`)
38
-
-**Auth0** for authentication, which issues a custom Firebase token for Firestore access
35
+
-**React 18** with TypeScript 5, built with **Vite**
36
+
-**Ant Design (antd) 5** for UI components (CSS-in-JS, no global CSS import)
37
+
-**Firebase 10** (modular API) as the backend — all domain data flows through real-time Firestore listeners (`onSnapshot`)
38
+
-**Auth0**(`@auth0/auth0-react` v2) for authentication, which issues a custom Firebase token for Firestore access
39
39
-**Redux** (with redux-actions/redux-thunk) — used only for user authentication state, not for domain data
40
40
-**CASL** for attribute-based access control (permissions)
41
+
-**dayjs** for date handling (with `de-ch` locale, `isSameOrBefore` and `localizedFormat` plugins)
41
42
-**react-cookie** for cart persistence
42
-
-**Sentry** for error tracking
43
+
-**Sentry**v8 for error tracking
43
44
-**SCSS modules** for styling
44
45
45
46
## Architecture
46
47
47
48
### Import Paths
48
49
49
-
`tsconfig.json` sets `baseUrl: "src"`, so imports are absolute from `src/` (e.g., `import { ability } from "config/casl/ability"`).
50
+
`tsconfig.json` sets `baseUrl: "src"`, so imports are absolute from `src/` (e.g., `import { ability } from "config/casl/ability"`). Vite resolves these via `vite-tsconfig-paths`.
50
51
51
52
### Authentication Flow
52
53
53
-
Auth0 handles user login → issues a custom Firebase token (stored at `user["https://mat.cevi.tools/firebase_token"]`) → `App.tsx` calls `auth().signInWithCustomToken(token)` → Firebase auth state change triggers a Firestore listener on the user document → Redux store and CASL ability rules are updated.
54
+
Auth0 handles user login → issues a custom Firebase token (stored at `user["https://mat.cevi.tools/firebase_token"]`) → `App.tsx` calls `signInWithCustomToken(auth, token)` → Firebase auth state change triggers a Firestore listener on the user document → Redux store and CASL ability rules are updated.
54
55
55
56
### Data Flow Pattern
56
57
57
58
Domain data (materials, orders, categories, etc.) does NOT go through Redux. Instead, `AbteilungDetails` component sets up real-time Firestore `onSnapshot` listeners and distributes data via React Contexts:
58
59
-`AbteilungenContext` (from `NavigationMenu`) — list of all departments
59
60
-`MembersContext`, `CategorysContext`, `MaterialsContext`, `StandorteContext`, `MembersUserDataContext` (from `AbteilungDetails`) — per-department data
60
61
62
+
### Firebase Modular API
63
+
64
+
All Firebase calls use the modular (tree-shakeable) API:
Collection path constants are in `src/config/firebase/collections.ts`.
70
+
61
71
### Permission Model (CASL)
62
72
63
73
Two-tier access control defined in `util/UserPermission.ts`:
@@ -66,22 +76,12 @@ Two-tier access control defined in `util/UserPermission.ts`:
66
76
67
77
Roles (from most to least privileged): `admin` → `matchef` (material chief) → `member` → `guest` → `pending`
68
78
69
-
Components use `<Can I='action' this={{ __caslSubjectType__: 'Type', abteilungId }}>` to conditionally render based on permissions. Domain types include a `__caslSubjectType__` field for CASL subject detection.
70
-
71
-
### Firestore Collections
72
-
73
-
Collection paths are defined as constants in `src/config/firebase/collections.ts`. Top-level collections are `abteilungen` and `users`. Sub-collections under each abteilung: `materials`, `categories`, `members`, `orders`, `standorte`.
79
+
Components use `<Can I='action' this={{ __caslSubjectType__: 'Type', abteilungId }}>` to conditionally render based on permissions.
74
80
75
81
### Routing
76
82
77
83
Routes are defined in `src/routes.tsx` as `AppRoute` objects with metadata (icon, access flags: `public`, `private`, `staffOnly`, `showInMenue`). `NavigationMenu` filters visible routes based on auth state. Private routes use `ProtectedRoute` wrapper with Auth0's `withAuthenticationRequired`.
78
84
79
-
Key routes: `/abteilungen/:abteilungSlugOrId/:tab/:orderId` — the abteilung detail page is the main working area, with tabs for materials, members, groups, orders, settings, standorte, and categories.
80
-
81
-
### Business Logic
82
-
83
-
Utility modules in `src/util/` contain Firestore CRUD operations and business logic (e.g., `MaterialUtil.ts` handles material CRUD, keyword generation for search, availability calculations, batch import via Firestore transactions).
84
-
85
85
### Deployment
86
86
87
-
Auto-deployed via GitHub Actions on push to `master`. Builds a Docker container (Node 15 build stage → nginx serving stage) pushed to `registry.cevi.tools`.
87
+
Auto-deployed via GitHub Actions on push to `master`. Builds a Docker container (Node 24 build stage → nginx serving stage) pushed to `registry.cevi.tools`.
0 commit comments