Observer

Frontend

Stack

BereichAuswahl
FrameworkReact 19 + React Compiler
BundlerVite 6
PaketmanagerBun (Workspace-Monorepo)
RoutingTanStack Router (dateibasiert)
DatenabrufTanStack Query v5
StylingTailwind CSS v4
Headless UIBase UI (@base-ui/react)
IconsPhosphor Icons (@phosphor-icons/react)
i18ni18next + react-i18next
TypprüfungTypeScript 5.7 (strict)

Projektstruktur

packages/observer-web/
  index.html
  vite.config.ts
  tsconfig.json
  vite-env.d.ts
  src/
    main.tsx                  # App-Bootstrap (Router + Query + i18n)
    main.css                  # Tailwind-Einstiegspunkt
    lib/
      api.ts                  # Fetch-Wrapper (credentials: include, 401 auto-refresh)
      i18n.ts                 # i18next-Konfiguration
    types/
      auth.ts                 # Auth-DTOs passend zum Backend
    stores/
      auth.tsx                # AuthProvider-Context + useAuth-Hook
    locales/
      ky.json                 # Kirgisisch Latein (Standard)
      en.json                 # Englisch
    routes/
      __root.tsx              # Root-Layout (AuthProvider umschließt Outlet)
      _auth.tsx               # Öffentliches Layout — leitet zu / um wenn authentifiziert
      _auth/
        login.tsx             # /login
        register.tsx          # /register
      _app.tsx                # Geschütztes Layout — leitet zu /login um wenn nicht authentifiziert
      _app/
        index.tsx             # / (Dashboard-Platzhalter)

Ausführen

just web-install    # Abhängigkeiten installieren (bun)
just web-dev        # Entwicklungsserver starten (http://localhost:5173)
just web-build      # Produktions-Build
just web-preview    # Produktions-Build-Vorschau

Import-Konventionen

Der @/-Alias verweist auf src/. Konfiguriert in tsconfig.json und vite.config.ts.

Import-Reihenfolge (Leerzeile zwischen Gruppen):

  1. react, react-dom
  2. Externe Bibliotheken (@tanstack/*, @base-ui/*, @phosphor-icons/*, i18next)
  3. App-Aliase (@/lib/*, @/stores/*, @/types/*)
  4. Gleichgeordnete Module (./constants, ./types)
  5. Styles (.module.css) — immer zuletzt

Neue Route hinzufügen

  1. Erstellen Sie eine Datei unter src/routes/. Das Vite-Plugin von TanStack Router generiert den Route-Baum automatisch.
  2. Geschützte Routen gehören unter _app/ (erfordert Authentifizierung).
  3. Öffentliche Auth-Routen gehören unter _auth/ (leitet um, wenn bereits authentifiziert).

Beispiel:

// src/routes/_app/settings.tsx → /settings (geschützt)
import { createFileRoute } from "@tanstack/react-router";

export const Route = createFileRoute("/_app/settings")({
  component: SettingsPage,
});

function SettingsPage() {
  return <div>Settings</div>;
}

Übersetzungen hinzufügen

  1. Fügen Sie Schlüssel sowohl in src/locales/ky.json als auch in src/locales/en.json hinzu.
  2. Verwenden Sie sie in Komponenten über useTranslation():
import { useTranslation } from "react-i18next";

function MyComponent() {
  const { t } = useTranslation();
  return <p>{t("namespace.key")}</p>;
}

Interpolation verwendet {{variable}}-Syntax in JSON:

{ "greeting": "Salam, {{name}}" }
t("greeting", { name: "Ali" }); // → "Salam, Ali"

Umgebungsvariablen

VariableStandardBeschreibung
VITE_API_URLhttp://localhost:9000Backend-API-Basis-URL

Vite stellt nur Variablen mit dem Präfix VITE_ bereit.

Davor
Demo-Einrichtung
Danach
CLI-Referenz