Добрый день, ищем помощника 

Проект потерял бэкенд разработчика, нужно довести до конца разработку веб-сайта (дописать/переписать зависит от пожелания подрядчика). Общее ТЗ будет в приложении, далее список того, что нужно реализовать.

Проект построен на MERN, соответственно бекенд = Node, Express, Mongo. + JWT(json web token). По токену идут любые валидации юзера. Этот функционал сейчас на бэкенде полностью работает, но нужно настроить валидацию токена для некоторых существующих запросов и для всех новых. 

В токене сейчас отправляются ID юзера, категория юзера (админ, юзер). 

1. По регистрации юзера:

•  Проверка на существующего юзера уже есть. 

•  Проверка на длину пароля и на соответствие почты юзера шаблону почты со стороны сервера вероятно нету. Её нужно сделать. (со стороны фронта есть но этого недостаточно)

•  Нужно подключить валидацию почты.

2. По входу юзер:

•  Есть проверка на правильность ввода пароля. 

•  Нету ничего по предотвращению брутфорса. Необходимо сделать защиту от брутфорса.

•  Так же нет формы сброса пароля. Её тоже нужно реализовать.

3. Создание модели "выбранные категории": 

•  За юзером уже существует, но необходимо изменить модель: ['id1', 'id2'] -> [{id1, active: false},{id2, active: true}]. Или как-либо, нужно хранить два стейта связанными с юзером (выбранная категория и параметр active).

•  Обновление данных для юзера сейчас происходит полной перезаписью. "Источником истины" является юзер агент(браузер). При каждом действии пользователя (изменил состояние модели с active: true => active:false; добавил/убрал категорию) обновляется локальная модель (Redux) и она же отправляется на сервер и полностью перезаписывает данные для юзера. Ответ сервера никак не обрабатывается, нужно настроить.

4. События:

•  Отдача ивентов с сервера сейчас происходит просто списком без сортировки и уже с пагинацией. Её нужно будет переделать. Сервер должен будет получать список активных категорий и отвечать (массивом объектов(ивентов) + закончился ли перебор ивентов или можно запросить еще). Абсолютно стандартная схема. В идеале добавить количество ивентов которые сервер отдает с каждым запросом, чтобы можно было без перестройки сервера на фронте подстраивать это число. 

•  Так же сейчас нету механизма получения выбранных для юзера категорий и их стейта (active)(при входе, например). Его нужно реализовать отдельным запросом или отправлять ответом на вход юзера вместе с токеном, например. Или другим способом на усмотрение подрядчика. 

5. Пользователь:

•  Для пользователя отсутствует модель "сохраненных ивентов". Её нужно реализовать на сервере и отдавать пользователю отдельным запросом, по которому будет сформирована страница закладок. Также нужно создать механизм добавления ивента в закладки. 

•  Сама модель ивентов вроде бы готова и работает, но там нету даты ивента. Её нужно будет добавить.

Описание всего проекта ниже:

Структура сайта

• Главная страница
• Страница со списком событий
• Личный кабинет
• Административный интерфейс

Стандартные элементы страниц

Стандартные элементы страниц – это элементы, присутствующие на всех страницах сайта.

Шапка страницы

Шапка страницы (header) – верхняя часть страницы, визуально отделенная от основного контента, содержащая навигаторы и графические элементы оформления.

Шапка страницы содержит:

• Элемент фирменного стиля сайта (логотип);
• Навигация
  • Регистрация
  • Вход в личный кабинет
  • О нас
• Пиктограммы социальных сетей

Логотип сайта является ссылкой на главную страницу сайта, на всех страницах сайта, за исключением главной страницы. На главной странице ссылкой не является.

При клике по ссылкам навигации пользователь переходит в текущей вкладке на соответствующую страницу сайта.

При клике по пиктограммам социальных сетей пользователь в новой вкладке переходит на страницу проекта в социальной сети.

При выборе в меню Регистрация или Вход в личный кабинет переходит на форму Регистрации/Входа в ЛК

При выборе в меню О нас переходит на страницу О нас

Подвал страницы

Подвал страницы (footer) – нижняя часть страницы, визуально отделенная от основного контента.

Подвал страницы содержит:

• Элемент фирменного стиля сайта (логотип)
• Копирайты
• Ссылки на условия предоставления услуг и политику конфиденциальности

Описание страниц

Главная страница

Содержание страницы:

• Шапка страницы
• Всплывающее окно с руководством по сайту (page-stop)
  • Содержит картинку с инструкцией
  • Содержит текстовое описание инструкции
  • Имеет 4 поочередных инструкции
  • На первой инструкции внизу содержит кнопку «Далее»
  • На второй и третьей инструкции внизу содержит кнопки «Назад» и «Далее»
  • На четверной инструкции внизу содержит кнопки «Назад» и «Начать»
  • Содержит крестик в верхнем правом углу для закрытия окна
• Блок выбора контента
  • Содержит картинку категории
  • Содержит текстовую часть
  • Внизу имеет 2 кнопки с иконками
  • После нажатия на одну из кнопок показывает следующую категорию по тому же принципу
  • Когда категории заканчиваются совершается автоматический переход на страницу со списком событий
• Подвал страницы

Страница со списком событий

Содержание страницы:

• Шапка страницы
• Лента с категориями
  • Содержит иконки в зависимости от выбранных пользователем категорий на главной странице
  • Содержит иконки категорий только 1го уровня (описание логики уровней будет в функциональных требованиях)
  • Имеет возможность пролистывать категории вправо и обратно влево, если их много, и они не помещаются
  • Первая категория всегда будет «Все» и стоит по умолчанию
  • При клике на иконку категории, фильтрует блок с событиями по выбранной категории
• Блок с событиями
  • Содержит карточки событий в зависимости от выбранных пользователем категорий на главной странице
  • Карточки событий имеют изображение события и текст внизу изображения с название события
  • При клике на карточку события должно появляться всплывающее окно с детальным описание события
• Всплывающее окно с описание события (click pop-up)
  • Содержит название события
  • Содержит картинку события
  • Содержит ссылку на гугл карты с геолокацией события
  • Содержит названия категорий 2го уровня, к которым привязано событие
  • Содержит детальное текстовое описание события
  • Содержит крестик в верхнем правом углу для закрытия окна
• Всплывающее окно для регистрации (page-stop)
  • Через 30 секунд проведенных на странице должно появиться это окно
  • Окно содержит 2 кнопки: «Нет, спасибо» и «Войти»
  • В зависимости от выбора совершает переход на форму регистрации или входа в ЛК
• Подвал страницы

Личный кабинет

Содержание страницы:

• Шапка страницы
• Лента с категориями
  • Такая же, как и на странице со списком событий + новый функционал
  • Имеет одну дополнительную категорию «Сохраненное»
  • В этой категории будут события, которые пользователь сохранил для себя с помощью нового функционала на карточках событий (подробнее ниже)
  • Категория «Сохраненное» Будет теперь первой в списке категорий
• Блок с событиями
  • Такой же, как и на странице со списком событий + новый функционал
  • Карточка события имеет дополнительную иконку в верхнем правом углу с иконкой сохранения
  • При нажатии на иконку сохранения это событие попадает в раздел «Сохраненное»
  • Карточки, которые были сохранены вместо иконки сохранения должны иметь иконку убрать из сохраненного
  • При нажатии на иконку убрать из сохраненного карточка перестает находиться в категории «Сохраненное»
• Всплывающее окно с описание события (click pop-up)
  • Такое же, как и на странице со списком событий + новый функционал
  • Всплывающее окно имеет дополнительную кнопку в верхнем правом углу с надписью «Сохранить»
  • При нажатии на кнопку сохранения это событие попадает в раздел «Сохраненное»
  • События, которые были сохранены вместо кнопки сохранения должны иметь кнопку «Удалить»
  • При нажатии на кнопку «Удалить» событие перестает находиться в категории «Сохраненное»
• Подвал страницы

Формы

Данный раздел содержит информацию о структуре и функциональных особенностях контактных форм.

Форма регистрации

Действующее лицо: незарегистрированный пользователь.

Интерактивные элементы

Основной сценарий:

Пользователь заполняет поля, нажимает на кнопку «Зарегистрироваться». После нажатия на кнопку «Зарегистрироваться» в этой же вкладке открывается страница личного кабинета.

Форма входа в ЛК

Действующее лицо: зарегистрированный пользователь.

Интерактивные элементы

Основной сценарий:

Пользователь заполняет поля, нажимает на кнопку «Войти». После нажатия на кнопку «Войти» в этой же вкладке открывается страница личного кабинета.

Функциональные требования

Языковые версии

Должно быть три версии: украинская, русская и английская.

Требования к языку административного интерфейса

Язык административного интерфейса системы управления сайтами – русский.

Требования к функционалу административного интерфейса

Структурный и архитектурный интерфейс разрабатывается на усмотрение программиста.

Административный интерфейс должен позволять создавать и заполнять новые карточки с событиями (управление всеми полями в карточке), удалять карточки с событиями, управлять категориями событий 1го и 2го уровней, делать связки между категориями событий.

Должно быть выполнено следующее:

• структурированный интерфейс
• понятные названия элементов/инфоблоков
• группировка полей в элементах по логическому значению

Описание функциональных особенностей сайта

Блок выбора контента – на главной странице этот блок должен показывать категории событий, которые пользователь может либо выбрать, либо пропустить, в зависимости от нажатой кнопки. Категории сохраняются для пользователя, только в случае регистрации аккаунта.

Категории событий имеют 2 уровня иерархии: верхнеуровневая категория и дочерняя с более детальными вариантами событий. Сперва пользователь должен выбрать/пропустить по очереди все варианты из первого уровня категорий. Затем ему предлагается на выбор все подкатегории (2го уровня) тех категорий 1го уровня, которые он выбрал в предыдущем шаге. Подкатегории тех категорий 1го уровня, которые пользователь пропустил - не должны попадать во второй шаг.

После того как пользователь выберет/пропустит все категории должен быть выполнен переход на страницу со списком событий, на которой в блоке событий будут отображены карточки событий, которые соответствуют прежде выбранным категориям.

Таким образом у базы данных должны храниться все события, которые мы вносим через админ панель. У каждого события должна быть проставлена категория, на основании которой это бытие будет попадать в выборку, которую определил пользователь.

В другой таблице в базе должна храниться иерархия событий, которую также можно редактировать через админ панель (картинки тоже). Она должна использоваться для выбора на главной странице сайта.

Аккаунт – пользователь должен иметь возможность создавать учетную запись.

Отдельная таблица должна содержать аккаунты пользователей и сохранять их выбор, что в дальнейшем будет использоваться для персонализации карточек и событиями в личном кабинете.

Также внутри личного кабинету будет дополнительный функционал в виде сохраненных карточек событий.

Нефункциональные требования

Контент

Кто предоставляет контент – заказчик своими силами генерирует его и предоставляет исполнителю.

Дизайн

Для разработки сайта создаются прототипы, на основе которых осуществляются последующие работы по дизайну.

Стилистическое оформление сайта основывается на имеющемся макете дизайна.

Требования к верстке

1. Верстка страниц сайта должна корректно (без визуальных и технических ошибок) отображаться и быть кроссбраузерной в следующих браузерах:
   • Mozilla Firefox версии 45+;
   • Microsoft Edge версии 25.10586+;
   • Google Chrome версии 49+;
   • Apple Safari версии 8+

на операционных системах Windows и Mac OS, с включенной графикой при разрешении экрана пользователя от 1280 точек, в ширину, и выше. Ширина экрана должна определяться макетом.

2. Верстка страниц сайта должна корректно (без визуальных и технических ошибок) отображаться на мобильных устройствах в операционных системах iOS 9+, Android 5+, Windows Phone 8.1+.
3. Верстка сайта должна соответствовать утвержденному сторонами дизайну.

Требования к разработке сайта с позиций поискового продвижения

Общее

• Сайт должен соответствовать требованиям поисковых систем Yandex и Google по удобству просмотра на мобильных устройствах. Требования отображены на странице https://developers.google.com/search/mobile-sites/mobile-seo?hl=ru.

Текст

• Необходимо размещать текст в виде текста (а не картинок). Желательно, чтобы доступ к тексту не был затруднен различными дизайнерскими решениями – был доступен сразу, а не открывался по клику/наведению и т.п. Текст не должен скрываться java-скриптами.
• Текст на сайте должен быть легко читаем, отформатирован, не должен содержать орфографических ошибок.
• Все страницы сайта должны содержать уникальный текст.
• В тексте страницы должен присутствовать 1 заголовок с тегом H1, который должен включать ключевые по смыслу слова/фразы, заголовков с тегом H2 в тексте может быть 2, и они тоже должны включать ключевые слова/фразы. Нельзя помещать весь текст страницы в тег заголовка.
• Заголовки должны хотя бы частично соответствовать навигации.

Изображения

• Alt-атрибут должен быть прописан у всех картинок. Alt должен включать продвигаемые слова на конкретной странице. Нельзя вставлять более 7 слов в alt-атрибут. Что касается изображений, они должны быть уникальными.
• Следует использовать только популярные расширения изображений (JPEG, GIF, PNG, и BMP).
• Изображение может открываться отдельной страницей без текста, но только в том случае, если данное изображение присутствует как на стандартной странице, так и открывается отдельно в увеличенном виде.

Мета-теги

• Должна быть предусмотрена возможность редактирования мета-тегов и добавления текста.
• Тега <title> должен соответствовать содержимому страницы и включать в себя основные поисковые запросы, должен включать не более 64 слов.
• Мета-тег <description> должен представлять собой краткое и точное описание содержания страницы (с использование ключевых слов) в размере 2-х - 3-х предложений, не должен совпадать с тегом <title>.
• Мета-теги должны содержать в себе вхождение брендового ключевого слова.

Дальнейшие действия

После согласования и утверждения проект сайта передается в разработку. Любые дополнительные пожелания к функционалу потребуют отдельного согласования и могут повлечь изменение календарного плана и бюджета проекта.

Так же разработчику предоставляется макет дизайна страниц для мобильной и десктопной версии сайтов, user journey map и набор категорий событий.

На данный момент нехватает только функционала по возврату, фильтрации интересов.