Skip to main content

Client Architecture (React/Vite)

The client application is built with React, Vite, and TypeScript. It uses Redux Toolkit (RTK) for state management and RTK Query for data fetching.

Feature-Based Structure​

We organize code by business domain (Features) rather than technical type. Path: src/features/{feature-name}

Each feature folder typically contains:

  • components/: React components specific to this feature.
  • hooks/: Custom hooks.
  • types/: TypeScript interfaces/zod schemas.
  • *Api.ts: RTK Query endpoints injection.
  • index.ts: Public API of the feature.

Examples: auth, synagogue, devices, notifications.

RTK Query & Code Splitting​

We use a single "Empty Split API" pattern to enable code splitting.

  • Base API: src/store/api/btManagementApi.ts.
  • Feature API: Each feature injects its own endpoints into the base API.

Example (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 Components​

  • Library: Material UI (MUI) v5.
  • Theme: Custom theme supporting RTL (Hebrew).
  • Forms: react-hook-form integrated with Zod validation.
  • Charts: recharts for analytics.

Authentication​

JWT-based authentication is handled in src/features/auth. The token is stored in localStorage and injected into every request header via the RTK Query prepareHeaders.

Key Feature Modules​

The client has grown significantly. Key feature areas include:

  • auth — Login, registration, 2FA setup.
  • devices — Device CRUD, UnifiedDeviceManagement page, remote control, screen streaming, software updates.
  • synagogue — Tfila times, messages, shiurim, Torah readings, holiday times.
  • notifications — WhatsApp, email, SMS configuration and messaging.
  • analytics — Dashboard charts, advanced analytics, BI reports.
  • system — System configuration, health monitoring, audit logs, telemetry.
  • automation — Alert rules, smart alerts configuration.
  • commands — Command dispatch and batch command management.

Recent Architectural Patterns​

  • Feature-based migration: Migrating from flat pages/ structure to features/ folders.
  • UnifiedDeviceManagement: Consolidated device management page combining status, config, metrics, and remote control.
  • Zod validation: All forms use react-hook-form + Zod schemas matching server DTOs.
  • RTL-first: All new components designed for Hebrew RTL layout from the start.