Project requirements

Задание

Спринт 1

• Сверстать главную страницу по выбранному psd-макету

^{основной контент главной страницы должен быть веб-компонентом, который можно заменить другим веб-компонентом для имитации межстраничных переходов}

• Сверстать панель навигации
• Сверстать веб-компоненты, отображаемые при переходах пользователя по "страницам" приложения
• Обеспечить отображение соответствующего компонента при выборе соответствующего пункта в панели навигации

Спринт 2

• Установить json-server
• Создать базу данных зарегистрированных пользователей
• Создать веб-компонент register-user регистрации пользователя

^{Форма регистрации должна содержать кнопку для загрузки аватара пользователя}

^{• при загрузке изображения должен проверяться тип файла ( это должен быть только файл изображения ), а так же его размер
• в случае, если пользователь выбрал файл, не являющийся изображением, должно выводиться предупреждение
• в случае, если размер изображения превышает 300 Кбайт, должно выводиться предупреждение
• если тип файла и размер изображения отвечают требованиям, аватар загружается и отображается в форме регистрации}

^{При регистрации нового пользователя}

^{• аватар кодируется строкой Base64
• пароль хешируется
• данные сохраняются в базе данных
• данные для аутентификации пользователя сохраняются в куки}

^{веб-компонент должен удаляться при клике на кнопке ✖ или кнопке "Зарегистрировать" ( стиль кнопок должен быть согласован с макетом страницы )
если в куки-файле уже есть данные пользователя, форма заполняется этими данными ( кроме пароля )}

Спринт 3

• Создать веб-компонент user-sign-in аутентификации зарегистрированного пользователя посредством ввода логина и пароля
• Вставить код, запускаемый сразу после загрузки главной страницы

^{• Код должен читать куки ( если они есть ), и проверять, что такой пользователь зарегистрирован в базе данных
• Если пользователь зарегистрирован, его аватар и никнейм добавляются на главную страницу
• Если пользователь не зарегистрирован ( куки отстутствуют или пользователь не обнаружен в базе данных ), то на главной странице должны отображаться кнопки "Регистрация" и "Вход"
• Обработчик события click кнопки "Регистрация" должен отображать веб-компонент register-user
• Обработчик события click кнопки "Вход" должен отображать веб-компонент user-sign-in}

Спринт 4

Напилить код, логирующий действия пользователя

^{• лог должен сохраняться в localStorage
• в логе должна быть как минимум информация о последней посещенной пользователем "странице"
• после аутентификации пользователя должен происходить переход на последнюю посещенную им страницу}

Спринт 5

( дополнительно для тех, кто круто успевает )

• Создать базу данных товаров / услуг / маршрутов ( путешествий ) / картинок (портфолио, галерея ) / рецептов / дел ( todo-list )...
• Создать веб-компонент, отображающий контент этой базы данных
• Создать веб-компонент admin-panel

^{В админке можно добавлять / удалять / редактировать контент базы данных ( список товаров / услуг / картинок...}

---

Варианты psd-макетов