# StickerAI Front

Фронтенд для приложения генерации стикеров для Telegram. Это Telegram MiniApp, которое позволяет пользователям загружать свои фотографии, обрезать их, выбирать стиль и образ для генерации стикеров, а затем получать готовые стикеры.

## Технологический стек

- **Фронтенд**: React + TypeScript + Vite
- **Маршрутизация**: React Router
- **Стили**: CSS Modules
- **API**: REST API

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

### Требования
- Node.js 16+ и npm

### Локальная разработка
```bash
# Установка зависимостей
npm install

# Запуск в режиме разработки
npm run dev
```

### Сборка для продакшена
```bash
# Сборка проекта
npm run build

# Предпросмотр собранного проекта
npm run preview
```

## Деплой на сервер Ubuntu

### Подготовка сервера
```bash
# Обновление пакетов
sudo apt update
sudo apt upgrade -y

# Установка Git
sudo apt install -y git

# Установка Node.js и npm
sudo apt install -y curl
curl -fsSL https://deb.nodesource.com/setup_20.x | sudo -E bash -
sudo apt install -y nodejs

# Проверка установки
node -v
npm -v

# Установка PM2
npm install -g pm2
```

### Клонирование и настройка проекта
```bash
# Клонирование репозитория
git clone https://git.gymnasticstuff.uk/kazachilo/StickerAI-Front.git
cd StickerAI-Front

# Установка зависимостей
npm install

# Сборка проекта
npm run build
```

### Запуск приложения с PM2
```bash
# Запуск приложения через PM2
cd /path/to/StickerAI-Front
pm2 serve --spa dist 3000 --name sticker-app

# Настройка автозапуска PM2 при перезагрузке сервера
pm2 startup
# Выполните команду, которую выдаст предыдущая инструкция
pm2 save
```

### Обновление проекта в будущем
```bash
# Переход в директорию проекта
cd /path/to/StickerAI-Front

# Получение последних изменений
git pull

# Установка новых зависимостей (если были добавлены)
npm install

# Сборка проекта
npm run build

# Перезапуск PM2
pm2 restart sticker-app
```

## API Эндпоинты

Приложение взаимодействует с API по адресу:
- https://stickerserver.gymnasticstuff.uk - для основных операций
- https://translate.maxdev.keenetic.pro/translate - для перевода текста

## Дополнительная документация

Для более подробной информации о проекте смотрите:
- [PROJECT_OVERVIEW.md](PROJECT_OVERVIEW.md) - обзор проекта
- [ARCHITECTURE.md](ARCHITECTURE.md) - архитектура проекта