Dmitri d4a5378adf Refactor: migrate frontend to Vite/React, add product backend modules

Frontend:
- Replace Next.js with Vite + React + TypeScript
- Add new component architecture (app-shell, sidebar, dashboard modules)
- Implement product modules: FRAME, safety protocols, walkthrough checkin,
  campus/staff attendance, personality quiz, sign language, classroom timer
- Add shadcn/ui component library with Tailwind CSS
- Remove legacy generated components, stores, and pages

Backend:
- Add product migrations: frame_entries, user_progress, safety_quiz_results,
  walkthrough_checkins, communication_events, personality_quiz_results,
  campus_attendance_config/summaries, staff_attendance_records, content_catalog
- Add corresponding models, services, and routes
- Implement cookie-based auth with refresh token rotation
- Add content catalog seeder with product content
- Migrate to ESLint flat config
- Switch from yarn to npm

Infrastructure:
- Update .gitignore for new tooling
- Add project documentation (CLAUDE.md, docs/)
- Remove deprecated config files and yarn.lock

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

2026-06-09 15:18:23 +02:00

2.8 KiB

Raw Blame History

Sign Language Integration

Purpose

SignLanguage renders backend-owned sign catalog content and current-user learned progress through the three-layer frontend architecture.

View -> Business Logic -> API/Data Access -> Backend

Runtime sign records, teaching tips, video URLs, GIF URLs, step instructions, and page-level teaching reminders belong to backend content catalog payloads. The frontend owns only UI state, filter config, style tokens, and progress interaction wiring.

Frontend Layers

View:

frontend/src/components/frameworks/SignLanguage.tsx
frontend/src/components/frameworks/SignLanguageVideoModal.tsx
frontend/src/components/sign-language/SignLanguageView.tsx
frontend/src/components/sign-language/SignLanguageHeader.tsx
frontend/src/components/sign-language/SignLanguageRememberPanel.tsx
frontend/src/components/sign-language/SignLanguageProgressPanel.tsx
frontend/src/components/sign-language/SignLanguageFilters.tsx
frontend/src/components/sign-language/SignLanguageGrid.tsx
frontend/src/components/sign-language/SignLanguageCard.tsx
frontend/src/components/sign-language/SignLanguageVideoModal.tsx

Business logic:

frontend/src/business/sign-language/hooks.ts
frontend/src/business/sign-language/selectors.ts
frontend/src/business/sign-language/types.ts

Shared contracts and UI config:

frontend/src/shared/types/app.ts
frontend/src/shared/constants/signLanguage.ts
frontend/src/shared/constants/contentCatalog.ts

Backend Contracts

The page reads content from:

GET /api/public/content-catalog/sign-language-items
GET /api/public/content-catalog/sign-language-page-content

Learned progress uses:

GET /api/user_progress?progress_type=sign_learned
POST /api/user_progress
DELETE /api/user_progress/by-item

Content payloads are seeded in:

backend/src/db/seeders/content-catalog-data/content-catalog-seed-payloads.js

Behavior

useSignLanguagePage loads sign items, page content, and learned sign progress.
Selectors handle category counts, search/category filtering, progress percentage, video duration, filter normalization, and YouTube search URL construction.
View components receive a prepared page model and do not call API/data access modules.
The video modal uses useSignLanguageVideoModalState for GIF/video mode, GIF loading state, and step-guide expansion.
Loading, empty, and error states are explicit through StatePanel.

Data Ownership Rules

Do not add sign records, teaching tips, page reminders, video URLs, GIF URLs, or step instructions to frontend constants.
Do not add frontend fallback sign payloads.
Keep frontend constants limited to filter options, category style classes, external URL templates, and UI view modes.
Test-only fixtures may live in selector tests or frontend/src/test-seeds/.

2.8 KiB Raw Blame History