Messenger

Messenger

Роль: Full-Stack Разработчик Стек технологий: React, Node.js, Express, MongoDB (Mongoose), Socket.IO, JWT Auth, CSS3.

Описание проекта Полнофункциональное веб-приложение для обмена сообщениями в реальном времени. Проект спроектирован с упором на мгновенный отклик, современный пользовательский интерфейс и отзывчивость (Responsive Design). Архитектура построена на базе REST API для управления данными и WebSocket-соединений для передачи сообщений без задержек.

Ключевой функционал:

Real-Time коммуникация: Мгновенная отправка и получение сообщений, синхронизация истории переписки между клиентами с использованием Socket.IO.
Продвинутое управление сообщениями: Возможность редактирования и удаления отправленных сообщений с мгновенным обновлением интерфейса у всех участников чата.
Статусы прочтения: Реализована логика отслеживания прочтения сообщений (индикация "двух галочек") с помощью Intersection Observer API (сообщение помечается прочитанным, когда попадает в область видимости).
Система статусов пользователей: Отслеживание статуса присутствия в сети (Online / Offline) в режиме реального времени.
Аутентификация и безопасность: Регистрация и авторизация пользователей с использованием JWT-токенов.
Кастомизация профиля: Загрузка и обновление аватара пользователя напрямую через интерфейс (с конвертацией изображений в Base64).
Современный UI/UX: Кастомный дизайн с использованием мягких теней (в стиле неоморфизма), интерактивными микроанимациями (вдавливание кнопок и сообщений при клике) и адаптивной версткой для мобильных устройств.
Технические особенности реализации:

Оптимизация рендеринга: Использование React Query (TanStack) для кеширования запросов, управления состоянием сервера и мгновенного (оптимистичного) обновления UI при редактировании или удалении данных.
Управление состоянием сокетов: Написаны кастомные React-хуки (useChat, useSocketEvent) для инкапсуляции логики подписок на события веб-сокетов и изоляции бизнес-логики от компонентов представления.
БД и архитектура Backend: Спроектирована масштабируемая схема данных в MongoDB. Разделены слои контроллеров, сервисов и роутеров для поддержания чистоты кода и принципов SOLID.