Skip to content

Latest commit

 

History

History
101 lines (67 loc) · 4.38 KB

README.md

File metadata and controls

101 lines (67 loc) · 4.38 KB
Raw

Проект I_messenger

Приложение 'Чат'

Посмотреть этот проект

О проекте


Screen Shot

Проект i-messenger был выполнен как тестовое задание:

Макет

Реализовать приложение "Чат".

Описание:

  1. Чат, в котором есть сообщение от других пользователей (реализовать через заглушку), а также ваши. При наведении появляется возможность "ответить";
  2. Все свои сообщения добавляются в форму под чатом, которая содержит:
  • кнопки форматирования текста и кнопку сброса всех примененных к тексту фильтров
  • инпута для ввода имени
  • инпута для ввода сообщения, к которому могут быть применены фильтры
  1. Сделал появление "ответить" только при наведении на сообщение;
  2. Возможность ответа на чужое сообщение.

Условия:

  1. Приложения должно быть реализовано на React, TypeScript (без использования сторонних библиотек);
  2. Надо перерисовать;
  3. Код оформить на GitHub с документацией по запуску.

Использованные технологии

  • React
  • TypeScript
  • SCSS
  • WYSIWYG (собственный)
  • Figma
  • Методология БЭМ (Nested БЭМ)
  • Адаптивная верстка
  • Синтаксис ES6
  • REST API
  • Динамическая валидация форм
  • Webpack
  • Проект подключен к серверу и размещен в интернете с использованием GitHub Pages

Установка

1. Клонируйте репозиторий командой:

git clone git@github.com:script696/i_messenger.git

2. Установите пакеты командой:

npm i

3. Доступные скрипты:

npm start

Запуск приложения в режиме разработки.
Откройте http://localhost:3000 чтобы увидеть результат в браузере.

Страница обновится автоматически при внесении изменений.

Как это можно использовать

  1. При нажатии на кнопку со стрелкой в левом верхнем углу откроется/закроется меню навигации
  2. При нажатии на кнопки меню будет осуществлен переход между страницами приложения (реальзована только одна страница - 'Чат')
  3. При наведении на сообщение появится кнопка ответить, при нажатии на которую текст сообщения появится в нижней части экрана
  4. Для форматирования текста, введенного в поле 'Сообщение' предусмотрен WYSIWYG редактор собственной разработки, с 6 кнопками.
  5. При нажатии кнопку с изображением бумажного самолета в нижней части экрана сообщение отправится в чат

Что планируется улучшить

Сделать бэк часть для хранения сообщений пользователей сприменением.

Авторы