Разработка конструктора 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: Интеграция для авторизации и взаимодействия.
  • Код должен быть чистым, модульным и хорошо документированным.

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

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

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