Приложение для мгновенного обмена сообщениями с функциями обмена текстом и фотографиями
Приложение построено на языке TypeScript и библиотеке React, собрано на Vite. Для взаимодействия с WebSocket используется библиотека Socket.IO. Общение с REST API сервером происходит при помощи React-Query. В качестве внешнего стейт-менеджера выступает Zustand, так же для решения большого количества задач используется React Context. Для качественного взаимодействия с формами был выбран React Hook Form. Маршрутизация на проекте реализована через библиотеку React Router Dom. UI-кит приложения построен с помощью CSS-фреймворка Tailwind и библиотеки Radix Primitives, для анимации используется Framer Motion
После клонирования необходимо создать .env файл в корне проекта, с тремя переменными:
- VITE_API_URL - ссылка на REST API сервер
- VITE_SOCKET_URL - ссылка на WebSocket сервер
- VITE_IMAGES_URL - ссылка на сервер с изображениями
Обратите внимание что для работы приложения необходим messenger-server
Запуск в режиме разработки производиться при помощи команды
$ yarn devДля регистрации пользователю необходимо ввести имя, почту и пароль. К паролю есть требования, без которых пользователь не может зарегистрироваться. После ввода данных на почту пользователю отправляется код с помощью которого он подтверждает что почта действительно принадлежит ему. Попадая на основную страницу у пользователя уже имеется чат, в который он может сохранять важную для него информацию
В настройках пользователь может выбрать язык интерфейса, тему, а так же изменить данные своего профиля, а именно - имя, фамилию, информацию о себе, уникальное имя пользователя и аватарку
Поиск производится по почте, либо, если пользователь указал свой уникальный username, по уникальному имени пользователя. В окне с диалогом пользователь видит аватарку, имя и статус своего собеседника (онлайн, оффлайн, печатает...). Также у пользователя есть возможность посмотреть подробно профиль своего собеседника. Если пользователь не заблокирован, то он может отправить сообщение (текст или фото или текст и фото), по желанию пользователь может двойным нажатием на сообщение или нажав правой кнопкой мыши и выбрав в контекстном меню "ответить" выделить ответ на конкретное сообщение
Нажав правой кнопкой по сообщению и выбрав "переслать" пользователь может переслать сообщения из одного чата в другой, при этом будет видно кто изначально отправил это сообщение независимо от того сколько раз оно было переслано. Если пользователю надоело с кем-то общаться он может заблокировать этого человека и тот не сможет ему присылать сообщения, при этом тот кто заблокировал тоже не сможет присылать сообщения тому кого заблокировал. Также у пользователя есть возможность удалить чат, он может удалить его как только для себя так и для обоих
На этой гифке изображается то, каким образом работает разблокировка пользователя. После того как пользователь был разблокирован у обоих собеседников появилась возможность отправлять сообщения. Также на этой гифке демонстрируется то как работает удаление чата только для одной стороны, как видно у одного пользователя пустой чат, а у другого вся история сообщений сохранилась.
Если у пользователя есть важные чаты, которые нужно всегда хранить под рукой он может их закрепить, также у него есть возможность изменять порядок закрепленных сообщений. Закрепленные чаты выстраиваются в зависимости от того порядка, который выставил пользователь, остальные же, в зависимости от того, когда было отправлено последнее сообщение
Нажав правой кнопкой по сообщения и выбрав в контекстном меню "закрепить" пользователь может закрепить сообщение в чате. Нажав на закрепленное сообщение пользователь перейдет к нему
Нажав на дату в чате перед пользователем появляется календарь, с помощью которого он может перемещаться по чату. Нажав кнопку "К дате", в календаре, пользователь перенесется к первому найденному сообщению в этот день или же, если в этот день не было сообщений, к первому найденному сообщению после этого дня
Пользователь может ответить на определенное сообщение и его собеседник будет видеть конкретно на какое сообщение ему ответили. Если нажать на плашку, которая показывает на какое сообщение был ответ, то вы перенесетесь к этому сообщению.