Техническое задание: Читалка Корана для Telegram Mini App

Цель проекта

Разработать интерактивное мини-приложение (Telegram Mini App) на React, которое позволяет пользователям слушать чтение Корана с визуальным сопровождением - синхронной подсветкой текущего слова в тексте.

Основные функциональные требования

  • Платформа: Приложение должно быть реализовано на React и развернуто как Telegram Mini App.
  • Ядро функционала: Аудиоплеер для воспроизведения записей Корана.
  • Ключевая фича: Синхронная подсветка (визуальное выделение) слова, которое звучит в текущий момент времени.
  • Подготовка контента: Необходимо разметить аудиофайлы и тексты, создав точные таймкоды (timestamps) для синхронизации.
  • Контентная база: Минимальный объем - подготовить библиотеку записей для 3-5 разных чтецов (кари).

Этапы работ

  1. Разработка архитектуры и интерфейса приложения на React.
  2. Создание и интеграция аудиоплеера с управлением (воспроизведение, пауза, перемотка, выбор суры/аята).
  3. Реализация механизма синхронной подсветки текста на основе таймкодов.
  4. Обработка и разметка аудиозаписей: привязка временных меток к каждому слову в тексте.
  5. Подготовка и загрузка контентной библиотеки (аудио + тексты с таймкодами) для нескольких чтецов.
  6. Тестирование, отладка синхронизации и публикация в виде Telegram Mini App.

Технические детали

  • Фронтенд: React (предпочтительно с использованием современных хуков и состояний).
  • Интеграция с Telegram WebApp API.
  • Для работы с аудио и таймкодами необходимо выбрать подходящие библиотеки или реализовать кастомное решение.
  • Важно обеспечить плавную работу и точную синхронизацию даже при нестабильном интернет-соединении.

Адаптивная верстка модального окна

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