Switch to English version?

Yes

Переключитись на українську версію?

Так

Переключиться на русскую версию?

Да

Przełączyć się na polską wersję?

Tak

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.