Тестовое задание. Внутренний чат сотрудников компании "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
рабочей директории