Observer

Фронтенд

Стек

НапрямокВибір
ФреймворкReact 19 + React Compiler
ЗбірникVite 6
Пакетний менеджерBun (workspace monorepo)
МаршрутизаціяTanStack Router (file-based)
Отримання данихTanStack Query v5
СтилізаціяTailwind CSS v4
Headless UIBase UI (@base-ui/react)
ІконкиPhosphor Icons (@phosphor-icons/react)
i18ni18next + react-i18next
Перевірка типівTypeScript 5.7 (strict)

Структура проєкту

packages/observer-web/
  index.html
  vite.config.ts
  tsconfig.json
  vite-env.d.ts
  src/
    main.tsx                  # ініціалізація застосунку (Router + Query + i18n)
    main.css                  # точка входу Tailwind
    lib/
      api.ts                  # обгортка fetch (credentials: include, 401 auto-refresh)
      i18n.ts                 # налаштування i18next
    types/
      auth.ts                 # auth DTO, що відповідають бекенду
    stores/
      auth.tsx                # AuthProvider контекст + useAuth хук
    locales/
      ky.json                 # киргизька латиниця (за замовчуванням)
      en.json                 # англійська
    routes/
      __root.tsx              # кореневий макет (AuthProvider обгортає Outlet)
      _auth.tsx               # публічний макет — перенаправляє на / якщо автентифікований
      _auth/
        login.tsx             # /login
        register.tsx          # /register
      _app.tsx                # захищений макет — перенаправляє на /login якщо ні
      _app/
        index.tsx             # / (заглушка панелі керування)

Запуск

just web-install    # install dependencies (bun)
just web-dev        # start dev server (http://localhost:5173)
just web-build      # production build
just web-preview    # preview production build

Конвенції імпортів

Аліас @/ вказує на src/. Налаштовано як у tsconfig.json, так і у vite.config.ts.

Порядок імпортів (порожній рядок між групами):

  1. react, react-dom
  2. Зовнішні бібліотеки (@tanstack/*, @base-ui/*, @phosphor-icons/*, i18next)
  3. Аліаси застосунку (@/lib/*, @/stores/*, @/types/*)
  4. Сусідні файли (./constants, ./types)
  5. Стилі (.module.css) — завжди останніми

Додавання нового маршруту

  1. Створіть файл у src/routes/. Vite-плагін TanStack Router автоматично генерує дерево маршрутів.
  2. Захищені маршрути розміщуються у _app/ (потребують автентифікації).
  3. Публічні маршрути автентифікації розміщуються у _auth/ (перенаправляють, якщо вже автентифікований).

Приклад:

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

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

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

Додавання перекладів

  1. Додайте ключі до обох файлів src/locales/ky.json та src/locales/en.json.
  2. Використовуйте в компонентах через useTranslation():
import { useTranslation } from "react-i18next";

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

Інтерполяція використовує синтаксис {{variable}} у JSON:

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

Змінні середовища

ЗміннаЗа замовчуваннямОпис
VITE_API_URLhttp://localhost:9000Базова URL-адреса API бекенду

Vite експонує лише змінні з префіксом VITE_.

Назад
Демонстраційне налаштування
Далі
Довідник CLI