"PlanctonicsChat"

Тестовое задание. Внутренний чат сотрудников компании "Planctonics"

О приложениии

Демо PlanctonicsChat.

• При старте приложения загрузка первичных данных из JSON файлов: список "авторизованных" юзеров и сообщений чатов из папки 'public/db'
• Данные авторизации и текущего чата в LocalStorage.
• Первый старт - Warning - требуется авторизация. Браузерный prompt по клику на "Кто здесь?" в шапке (для демо первично ввести Вася, Маруся или Moder).
• При вводе "неавторизованного" имени просмотр чатов и кнопка отправки сообщений блокируются.
• В левой колонке отображается список пользователей, за исключением прошедшего авторизацию. Подсвечивается имитация пользователей "онлайн". Статус задан в файле users.json.
• В приложении 2 чата - рабочий "Work" и "Flood" для неформального общения.
• После успешной авторизации в правой колонке выводится список сообщений выбранного чата: слева чужие, справа свои.
• Для "своих" сообщений есть кнопки удаления и редактирования.
• Пользователь Moder имеет возможность редактировать/удалять любые сообщения.
• При перезагрузке приложения сообщения чатов берутся из LocalStorage, авторизация пользователя и последний выбранный чат сохраняются.

Стек технологий

• Модульная структура;
• ReactHooks, StyledComponents, ContentProvider;
• Адаптивная кроссбраузерная верстка Grid/Flex;
• Сборка с помощью Create React App;
• Деплой готовой сборки на Firebase Hosting;
• Используется LocalStorage.

Как установить?

• Скопировать содержимое репозитория в рабочую папку
• В терминале выполнить команду npm install
• Затем дополнительно установить StyledComponents командой npm install styled-components
• После установки модулей запустить development mode командой npm start
• Открыть http://localhost:3000 для просмотра в браузере
• Для сборки приложения команда npm run build. Готовый проект будет в папке build рабочей директории