Приложение 'Fullstack Разработчик'
Для работы приложения необходимо клонировать бэкенд из репозитория
API
Приложение разработано по тестовому заданию:
Тестовое задание:
Задание рассчитано на 4-8 часов выполнения
Back End
Сервер на NodeJS должен работать в качестве файлового сервера (выдавать файлы для работы Frontend-части) и принимать/отдавать данные по API (3 эндпоинта):
- POST для добавления нового сообщения
- POST для отправки следующего числа и получения среднего между ним и предыдущим в ответ
- GET для получения информации обо всех предыдущих числах и расчётах
Front-End
Две страницы:
- Доска сообщений с рендером предыдущих на стороне сервера (SSR) и формой добавления нового сообщения.
- Средние числа. Ввод числа в простую форму, отправка запроса на сервер, получение среднего числа в ответ, вывод результата над предыдущими. Рендер на стороне клиента (CSR).
На всех страницах стили - предельно простой легко читаемый минимализм. Без изысков. Адаптив не нужен, но информация должна помещаться на экране по умолчанию.
Страница Доска сообщений
- при входе на страницу сервер формирует и выдаёт HTML-разметку с включением данных уже полученных сообщений (на старте сервера там одно захардкоденное сообщение)
- каждое сообщение на экране состоит из значений полей text и author
- кроме прошлых сообщений на странице находится форма размещения нового сообщения c теми же полями и кнопкой "разместить сообщение"
- при отправке сообщения выполняется обновление страницы после которого новое сообщение должно появиться рядом с предыдующими (первым или последним - в зависимости от порядка сортировки)
- сервер может хранить сообщения в массиве в памяти и/или (необязательно) в файле
Страница Средние числа
- пользователь вводит число в форму, сам отмечает, если число отрицательное и/или дробное (например галочками)
- при нажатии кнопки "отправить и получить среднее" выполняется отправка запроса к серверу на второй API-эндпоинт
- запрос и обработка ответа на клиенте посредством JavaScript без перезагрузок страницы
- сервер в ответ присылает предыдущее число, последнее принятое от пользователя и среднее между ними
- клиент выводит их под формой новой строкой (из неё должно быть понятно, где что)
- данные предыдущих расчётов сдвигаются вниз
- при входе/обновлении страницы приходящая от сервера HTML-разметка не содержит данных о предыдующих расчётах...
- сразу после построения DOMa клиент отправляет запрос на третий эндпоинт, по получении ответа на который под формой выводится история предыдущих присланных и вычисленных чисел
Обязательно
- сдача работы в виде ссылки на репозиторий на GitHub или аналог, убедительная история коммитов
- все три страницы содержат ссылки для удобного перехода на две другие (и переход выполняется независимо от адреса локального или на хостинге) и на свой репозиторий проекта
- сервер не должен падать при запросах на получение отсутствующих файлов или на непредусмотренные API-эндпоинты
- React
- TypeScript
- SCSS
- Синтаксис ES6
- REST API
- Mодульная архитектура
Запуск приложения в режиме разработки.
Откройте http://localhost:3000 чтобы увидеть результат в браузере.
Страница обновится автоматически при внесении изменений.
- Никита Семенов - Web Developer - Никита Семенов - **