family_budget/frontend/FRONTEND_README.md

Family Budget - Frontend

Фронтенд приложение для управления семейным бюджетом.

Технологии

• React 19
• TypeScript
• Vite
• React Router DOM
• Zustand (state management)
• Axios (HTTP client)
• Tailwind CSS

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

frontend/
├── src/
│   ├── api/           # API клиент для общения с бэкендом
│   ├── pages/         # Страницы приложения
│   ├── store/         # Zustand store
│   ├── types/         # TypeScript типы
│   ├── App.tsx        # Главный компонент с роутингом
│   └── main.tsx       # Точка входа
├── .env               # Переменные окружения
└── package.json

Установка и запуск

1. Установите зависимости:

cd frontend
npm install

2. Настройте переменные окружения в .env:

VITE_API_BASE_URL=http://localhost:3000

3. Запустите dev сервер:

npm run dev

4. Соберите production версию:

npm run build

Страницы

Главная страница (/)

• Выбор семьи из списка
• Кнопка для перехода в админ панель

Страница семьи (/family/:familyId)

• Отображение всех категорий семьи
• Показ оставшегося баланса для каждой категории
• Добавление расходов (вычет из остатка)
• Добавление новых категорий
• Удаление категорий
• Сброс лимита категории

Админ панель (/adminpanel)

• Авторизация администратора
• Создание новых семей
• Удаление семей
• Выход из админки

API Endpoints

Все запросы отправляются на бэкенд через Axios клиент (src/api/client.ts):

• Auth: POST /login, POST /logout
• Families: GET /families, POST /families, DELETE /families/:id
• Categories: GET /families/:id/categories, POST /families/:id/categories, etc.
• Expenses: GET /families/:id/categories/:id/expenses, POST /families/:id/categories/:id/expenses, etc.

Учетные данные по умолчанию

Согласно бэкенду, дефолтный админ:

• Username: admin
• Password: 2123

State Management

Используется Zustand для управления глобальным состоянием:

• isAdmin - флаг авторизации администратора
• selectedFamily - выбранная семья
• families - список всех семей
• categories - категории текущей семьи