| public | ||
| src | ||
| .gitignore | ||
| API_DOCUMENTATION.md | ||
| ARCHITECTURE.md | ||
| ava.jpg | ||
| eslint.config.js | ||
| generation_request (7) — копия.json | ||
| generation_request (7).json | ||
| index.html | ||
| package-lock.json | ||
| package.json | ||
| PROJECT_OVERVIEW.md | ||
| README.md | ||
| TG miniapps API official.md | ||
| TG_bot_API_official_stickers.md | ||
| tsconfig.app.json | ||
| tsconfig.json | ||
| tsconfig.node.json | ||
| vite.config.ts | ||
| workflow_stickerV1_base64_ws.json | ||
| документация sdk telegram.md | ||
| описание проекта первый промпт.txt | ||
StickerAI Front
Фронтенд для приложения генерации стикеров для Telegram. Это Telegram MiniApp, которое позволяет пользователям загружать свои фотографии, обрезать их, выбирать стиль и образ для генерации стикеров, а затем получать готовые стикеры.
Технологический стек
- Фронтенд: React + TypeScript + Vite
- Маршрутизация: React Router
- Стили: CSS Modules
- API: REST API
Установка и запуск
Требования
- Node.js 16+ и npm
Локальная разработка
# Установка зависимостей
npm install
# Запуск в режиме разработки
npm run dev
Сборка для продакшена
# Сборка проекта
npm run build
# Предпросмотр собранного проекта
npm run preview
Деплой на сервер Ubuntu
Подготовка сервера
# Обновление пакетов
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
Клонирование и настройка проекта
# Клонирование репозитория
git clone https://git.gymnasticstuff.uk/kazachilo/StickerAI-Front.git
cd StickerAI-Front
# Установка зависимостей
npm install
# Сборка проекта
npm run build
Запуск приложения с PM2
# Запуск приложения через PM2
cd /path/to/StickerAI-Front
pm2 serve --spa dist 3000 --name sticker-app
# Настройка автозапуска PM2 при перезагрузке сервера
pm2 startup
# Выполните команду, которую выдаст предыдущая инструкция
pm2 save
Обновление проекта в будущем
# Переход в директорию проекта
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 - обзор проекта
- ARCHITECTURE.md - архитектура проекта