Используемые технологии: PUG (Jade), Vue.js, Node.js, Express.js.
Задание: Создать четыре страницы, для отображения юзеров и их подробной информации. Все страницы должны быть абсолютно респонсивны под любые разрешения экранов. Вся структура проекта готова и вся работа должна осуществляться только в папке «views». Весь UI на твой вкус.
Структура страницы едина для всех: Header (Navbar must have, остальное по желанию), Main, Footer.
Navbar links: Home, Users, New User.
1-я Страница (Home)
Любое письмо, приветствующее юзера, выровненное по центру экрана.
2-я Страница (Users List)
Отобразить на странице карточки всех юзеров, с выбором количества отображения (10, 25, 50). Если количество юзеров превышает допустимое количество на странице, то должна быть страничная навигация. Карточка должна содержать поля: аватар, никнейм, имя и фамилия. При нажатии на карточку происходит открытие страницы с подробной информацией.
API Endpoint: /api/get-users/
3-я Страница (User Page)
Страница должна содержать всю доступную информацию насчет юзера.
API Endpoint: /api/get-user/*id*/
4-я Страница (Add New User Page)
Страница должна содержать форму, для добавления нового юзера. Требования: структура формы должна быть абсолютно такой же, какой является структура юзера, кроме добавления аватара юзера. В POST запросе надо отправить один объект с именем newUser, в котором заполнены все поля нового юзера. На этой странице нужно встроить Vue.js (!) и сделать обработку/валидацию и отправку формы через Vue.js.
API Endpoint: /api/new-user/
Перед началом работы нужно установить все пакеты:
npm install
Для запуска сервера нужно ввести команду:
npm run start
Для запуска сервера с автоперезагрузкой нужно ввести команду:
npm run dev