דלג לתוכן הראשי

ארכיטקטורת Client (React/Vite)

אפליקציית ה-Client בנויה עם React, Vite ו-TypeScript. היא משתמשת ב-Redux Toolkit (RTK) לניהול מצב וב-RTK Query לשליפת נתונים.

מבנה מבוסס תכונות (Feature-Based)​

אנו מארגנים את הקוד לפי תחומים עסקיים (Features) במקום לפי סוג טכני. נתיב: src/features/{feature-name}

כל תיקיית תכונה בדרך כלל מכילה:

  • components/: רכיבי React ספציפיים לתכונה זו.
  • hooks/: Hooks מותאמים אישית.
  • types/: ממשקי TypeScript/סכמות Zod.
  • *Api.ts: הזרקת נקודות קצה של RTK Query.
  • index.ts: API ציבורי של התכונה.

דוגמאות: auth, synagogue, devices, notifications.

RTK Query ופיצול קוד​

אנו משתמשים בדפוס "Empty Split API" יחיד כדי לאפשר פיצול קוד.

  • Base API: src/store/api/btManagementApi.ts.
  • Feature API: כל תכונה מזריקה את נקודות הקצה שלה ל-API הבסיסי.

דוגמה (tfilaTimeApi.ts):

import { btManagementApi } from '../../store/api/btManagementApi';

export const tfilaTimeApi = btManagementApi.injectEndpoints({
  endpoints: (builder) => ({
    getTfilaTimes: builder.query<TfilaTime[], void>({
      query: () => '/tfila-times',
      providesTags: ['TfilaTime'],
    }),
    // ...
  }),
});

רכיבי UI​

  • ספרייה: Material UI (MUI) v5.
  • ערכת נושא: ערכת נושא מותאמת אישית התומכת ב-RTL (עברית).
  • טפסים: react-hook-form משולב עם אימות Zod.
  • גרפים: recharts לאנליטיקה.

אימות​

אימות מבוסס JWT מטופל ב-src/features/auth. הטוקן מאוחסן ב-localStorage ומוזרק לכל כותרת בקשה דרך ה-prepareHeaders של RTK Query.