95 lines
2.9 KiB
Markdown
95 lines
2.9 KiB
Markdown
# 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. Установите зависимости:
|
||
```bash
|
||
cd frontend
|
||
npm install
|
||
```
|
||
|
||
2. Настройте переменные окружения в `.env`:
|
||
```
|
||
VITE_API_BASE_URL=http://localhost:3000
|
||
```
|
||
|
||
3. Запустите dev сервер:
|
||
```bash
|
||
npm run dev
|
||
```
|
||
|
||
4. Соберите production версию:
|
||
```bash
|
||
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` - категории текущей семьи
|