Messenger - приложение для обмена
мгновенными сообщениями

📝 Описание проекта:

Приложение сконфигурировано при помощи шаблона create-react-app --template typescript

Адаптировано под:

• 📱 mobile, tablet
• 💻 laptop
• 🖥️ desktop

Cтэк:

• TypeScript
• React
• React Router
• Firebase
• Recoil
• Styled Components

⚙️ Описание функциональности

Содержание

• Авторизация
• Восстановление пароля
• Главная страница
• Беседы
• Уведомления
• Тема интерфейса
• Удаление беседы
• Выход
• Мобильная версия

Авторизация

При запуске приложения будет доступна страница авторизации. На ней можно авторизоваться через учетную запись Google, либо через ранее созданный аккаунт. Если аккаунта еще нет, можно зарегистрироваться используя любой e-mail к которому у вас есть доступ. Пароль можно указать любой. После успешной регистрации, необходимо будет указать имя пользователя по которому вас смогут находить другие пользователи:

Также, при указании имени пользователя, опционально можно установить аватар:

Восстановление пароля

В случае, если вы забыли пароль, на странице авторизации необходимо выбрать «Забыли пароль», далее указать почту, на которую зарегистрирован аккаунт. На эту почту придет письмо с ссылкой для изменения пароля:

Главная страница

На основной странице будет доступен сам чат. Через поле поиска можно найти определенного пользователя и создать с ним беседу, после чего можно начинать с ним переписку. Список текущих бесед сортируется по времени создания беседы, либо если имеется, то по времени получения последнего сообщения:

Беседы

При клике на беседу будет открыто окно диалога, где можно отправлять сообщения. При наличии непрочитанного сообщения, слева от беседы будет отображен синий индикатор. После прочтения сообщения вашим собеседником будет отображен текст «Прочитано»:

Уведомления

При получении нового сообщения на странице появится уведомление, кликнув по которому можно перейти в чат с отправителем:

Также при создании новой беседы с вашим участием будет отображено уведомление:

Тема интерфейса

В приложении доступны две темы: светлая и темная. При запуске приложения автоматически будет применена тема которая установлена на вашем устройстве. С помощью переключателя темы в правом верхнем углу можно установить только светлую тему или только темную, при повторном входе в приложение, автоматически будет применена тема, которую вы установили ранее или ваша системная тема:

Удаление беседы

Беседу можно удалить кликнув на иконку с корзиной рядом с полем ввода, после подтверждения удаления текущая беседа и все связанные с ней сообщения будут удалены:

Выход

Мобильная версия

Приложение адаптировано под комфортное использование на мобильном телефоне: