Тестовое
Требуется создать проект для стены с комментариями с возможность посмотреть сообщения, и написать своё сообщение.
Важно! Для тестового задания необходимо использовать TypeScript. Это связано в первую очередь с использованием TypeScript в нашем проекте.
Задействовать:
- React
- TypeScript
- npm/yarn
- webpack/vite
- любой store (например Redux)
В приложении к тестовому находится простенький back-end сервер.
Сервер уже заранее написан и писать свой нельзя!
Для создания main.js в Webpack используем filename в output, в Vite читаем про Library mode.
Для запуска:
- Windows: запустить mockServer_win_x64.exe
- Linux: сделать исполняемым файл mockServer_linux_x64 или mockServer_linux_arm64 если процессор на ARM
- MacOS: сделать исполняемым файл mockServer_darwin_amd64 или mockServer_darwin_arm64 если процессор на ARM
Сервер умеет загружать index.html файл при открытии страницы в браузере. В index.html находится импорт main.js (<script src="/main.js"></script>).
Именно в написании этого main.js и состоит задача.
Требования к реалиазции:
- нужно настроить сборку таким образом чтобы итоговый main.js был собран в папку front не заменяя других файлов.
- получить данные с сервера и сохранить их в стейте;
- публикация нового комментария;
- в качестве ориентира по дизайну можно использовать стену с любой соц сети;
- для большего приближения к нашей работе работе, не рекомендуется использовать JSX;
- собрать результат в front/main.js чтобы уже имеющийся html-файл смог его открыть;
- крайне важно аккуратно всё стилизовать. На UI/UX будет также сделан большой акцент при проверке задачи.
Требования к результату:
- У каждого поста должно быть имя комментатора, фотография профиля, дата публикации и собственно комментарий;
- Адаптив должен быть реализован хотя бы минимально.
- Использовать POST-запрос для написания нового комментария. Данные текущего пользователя должны использоваться при передаче нового сообщения (см подробности ниже);
Бонусные задачи:
- задействовать поля replyTo у сообщений и отразить какое сообщение на какое отвечает;
- анимации и прочие украшательства.
У back-end сервера есть следующие запросы:
- «/»: по факту главная страница. Запрос отдаёт index.html из папки front;
- «/api/json/users»: GET-запрос (получить список пользователей);
- «/api/json/messages»: GET-запрос (получить список сообщений);
- «/api/json/me»: GET-запрос (ID текущего пользователя).
- «/api/json/message»: POST-запрос(сохранить новое сообщение) В теле запроса нужно отправить ID автора сообщения «author» и текст сообщения «message»