Задача
Собрать по макету рабочий мессенджер: список диалогов, переписка, разделы контактов и настроек, демо-переписка с имитацией живого собеседника.
Что сделал
- Начальные данные рендерю прямо в страницу через PHP и прокидываю в JS одним объектом — приложение поднимается сразу, без лишнего запроса на старте
- Состояние и настройки держу в localStorage: при загрузке поднимаю сохранённое, если его нет или оно битое — откатываюсь на сид
- Ответы собеседника эмулирую таймером: индикатор «печатает…», задержка, контекстный ответ — реакция на вопрос, приветствие, «спасибо»
- PHP-эндпоинты завернул так, что при недоступном сервере фронт отвечает сам — приложение работает и офлайн
- Разложил вёрстку на всех ширинах: на телефоне это master-detail, диалог выезжает через transform. Поймал классический баг с overflow — flex без min-width:0 распирал строку, вычистил по всей цепочке
- Тёмная тема на CSS-переменных, поиск с подсветкой, фильтры, звук уведомлений на Web Audio, экранирование ввода перед вставкой в DOM
Результат
- Мессенджер без единой внешней зависимости и сборки. Транспорт развязан с UI — подменить имитацию на реальный API или WebSocket можно, не трогая интерфейс.