PWA-конструктор Telegram для SMM

Описание

Разработал PWA-приложение для SMM-специалистов, имитирующее интерфейс списка чатов Telegram на iPhone.

Идея проекта заключалась в создании инструмента, с помощью которого SMM-специалист может быстро подготовить визуализацию переписок для контента, презентаций и демонстрации рабочих сценариев. Вместо использования реального Telegram пользователь получает управляемый интерфейс, в котором можно самостоятельно создавать и редактировать содержимое чатов.

Проект был выполнен как коммерческий заказ. Помимо непосредственной разработки, я самостоятельно прорабатывал техническую реализацию и пользовательские сценарии, поскольку приложение создавалось как специализированный инструмент, а не как обычный корпоративный сайт.

В результате получился автономный веб-инструмент, который можно использовать непосредственно в браузере или установить на смартфон как PWA.

Решение

Приложение разработано на React + TypeScript с использованием Vite и PWA-технологий. Основной задачей было максимально точно воспроизвести визуальное и поведенческое восприятие Telegram на iPhone, сохранив при этом возможность полностью управлять отображаемыми данными.

Я реализовал собственный конструктор чатов, позволяющий формировать содержимое интерфейса без подключения к Telegram. Пользователь может создавать диалоги, задавать имена и изображения контактов, добавлять сообщения и указывать время их отправки. Для формирования реалистичного списка предусмотрены готовые наборы имён и аватаров, а числовые показатели интерфейса могут автоматически генерироваться.

Отдельное внимание уделил воспроизведению структуры Telegram: реализовал переключение между чатами и сторис, поиск, папки и список диалогов, а также поведение интерфейса при прокрутке. Мобильная версия адаптирована под особенности небольшого экрана, включая фиксированные элементы интерфейса и изменение отображения отдельных блоков во время скролла.

Для переноса созданных сценариев между устройствами реализовал импорт и экспорт состояния приложения в JSON. Благодаря этому пользователь может сохранить подготовленные данные, перенести их на другое устройство и продолжить работу без серверного хранения.

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

После завершения разработки приложение было размещено на Vercel и настроено как устанавливаемое PWA-приложение. Пользователь может добавить его на главный экран смартфона и запускать практически так же, как обычное мобильное приложение.

Результат

В результате был создан готовый коммерческий PWA-инструмент для подготовки визуального контента в формате Telegram.

Приложение позволяет создавать и редактировать реалистичные списки чатов, управлять содержимым диалогов и сохранять готовые сценарии в JSON для дальнейшего использования. Благодаря PWA приложение можно использовать как на компьютере, так и непосредственно на смартфоне.

Проект был выполнен как самостоятельная коммерческая разработка и передан заказчику в готовом к использованию виде.

Моя роль: Frontend Developer

Стек: React, TypeScript, Vite, PWA, JSON, Vercel.

После завершения первоначального проекта я продолжил развивать идею самостоятельно. На основе исходного решения приложение было переосмыслено как отдельный продукт TeleMock: обновлён интерфейс, расширены возможности конструктора и создана самостоятельная продуктовая версия.