113 lines
3.2 KiB
Markdown
113 lines
3.2 KiB
Markdown
# 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) - архитектура проекта
|