Разработка конструктора Telegram Mini Apps на React

Цель проекта

Создание веб-платформы, которая позволяет пользователям визуально конструировать интерфейсы для Telegram Mini Apps и простых ботов, используя технологию drag-and-drop. Готовый проект должен преобразовываться в рабочий код и развертываться автоматически.

Ключевая функциональность

1. Визуальный редактор (Drag-and-Drop)

• Рабочее поле (холст) для размещения компонентов.
• Библиотека базовых блоков: текст, кнопки, изображения, формы ввода.
• Гибкие настройки стилей для каждого блока: шрифты, цвета, фон, отступы, границы.
• Интуитивная панель инструментов для изменения свойств элементов.

2. Генерация кода и работа с данными

• Конвертация созданного на холсте интерфейса в чистый код на React с соответствующими CSS-стилями.
• Сохранение сгенерированного кода в базе данных с присвоением уникального идентификатора (ID).
• Механизм отображения готового приложения по маршруту вида /сайт/{id}, при котором код запрашивается из БД и рендерится как полноценная Mini App.

3. Интеграция с Telegram API

• Автоматическое отображение данных пользователя Telegram (имя, username, аватар) внутри создаваемого приложения через готовые компоненты.
• Реализация функционала отправки сообщений от имени пользователя через Telegram Bot API (используя бесплатные методы).
• Возможность загрузки пользовательских изображений для использования в интерфейсе.

Технические требования

• Фронтенд (Конструктор): React.js.
• Бэкенд: На усмотрение исполнителя (Node.js, Python, PHP).
• База данных: Для хранения сгенерированного кода и метаданных проектов.
• Telegram API: Интеграция для авторизации и взаимодействия.
• Код должен быть чистым, модульным и хорошо документированным.

Дополнительные пожелания

Приветствуется добавление расширенного функционала, такого как:

• Предпросмотр создаваемого приложения в реальном времени.
• Шаблоны готовых интерфейсов для быстрого старта.
• Экспорт кода проекта для самостоятельного развертывания.
• Система управления созданными приложениями (список, редактирование, удаление).