Разработать прототип сервиса - Full Stack JS (MERN)

Terra - это сервис для психотерапевтов и их клиентов, чтобы создавать и проходить упражнения в интерактивном режиме во время или после сессии. В прототипе в качестве упражнения будет только выбор карт из загруженного набора, но в будущем будут добавлены другие упражнения, это первая итерация.

Я ожидаю, что это будет MERN (Mongo Express ReactJS NodeJS, отлично если на TypeScript) приложение, которое можно будет просто развернуть на сервере по созданной исполнителем инструкции (как установить зависимости, собрать, запустить) и поддерживать в будущем.
По дизайну/верстке пока можно использовать Bootstrap или другие схожие современные готовые UI фреймворки.

Интерактивный макет: https://invis.io/ZJVWQDQ345K
ТЗ в гугл доке со скриншотами: https://docs.google.com/document/d/1m2XKEMaFaSthtu...

Копипаста:

Сервис состоит из следующих экранов:

Окно авторизации
Список заданий
Список упражнений
Создание/редактирование задания
Создание/редактирование упражнения
Экран терапевта - Просмотр результата задания
Экран клиента - Запущенное упражнение
Экран клиента - Просмотр результата задания

Список основных терминов приложения:

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

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

Упражнение - это абстрактное название задачи, которую будет выполнять тот или иной клиент какого-то терапевта во время или после сессии (как домашнее задание). На текущий момент все упражнения будут создаваться терапевтом и будут связаны с выбором карт из заранее собранного набора, но в будущем задания могут быть совсем разных типов (например “закончи предложения”, “нарисуй ...” и тп) и могут быть куплены у сервиса. Возможно повторное использование одного упражнения во многих заданиях (с кастомизацией при создании задания).

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


Подробнее про каждый экран:

Окно авторизации

Это окно входа пока только для существующего терапевта. В БД руками будет внесена почта и пароль (в бд должен храниться хеш scrypt от пароля), при авторизации почта и пароль передаются на сервер, там вычисляется хеш и проверяется с хешем из базы. В случае их равенства пользователя перенаправляет на экран “2 - Список заданий”.


Список заданий

На этом экране терапевт видит таблицу с ранее созданные заданиями и их статусы: выполненные (зеленые), запущенные (желтые) и созданные (белые).
Терапевт может создать упражнение после нажатия на кнопку “Создать”. После этого он попадает на экран “4 - Создание или редактирование задания”, где выбирает упражнение, вводит имя клиента и прочую информацию и возвращается в список заданий. Когда задание только создано, то оно получает статус “Созданное” и отображается в таблице с белым фоном. После создания терапевт передает ссылку на задание нажатием кнопки “Скопировать ссылку” (ссылка на каждое задание уникальное), когда клиент заходит на страницу с заданием, то задание получает статус “Запущенное”. При этом терапевт больше не может менять задание и если даже придет запрос на изменение через API, то оно не должно быть сохранено. Когда клиент выполнит все необходимые шаги задания, то задание получает статус “Завершенное”. У такого упражнения появляется кнопка “Результаты”, по нажатию на которую терапевт может посмотреть выбор и ответы клиента (в режиме read only).
Также тут должна быть пагинация, по 10 заданий на страницу, отсортированных по дате создания (новые сверху).
Кроме того над таблицей есть фильтр, по нажатию на который можно фильтровать задания по статусу. По умолчанию все кнопки активны - значит будут отображаться все задания. Если деактивировать например кнопку “Запущенные”, то запущенные задания пропадут. Кнопки имеют такой же цвет фона, что и задания в таблице и являются также подсказкой для пользователя по цветам и их смыслам.
Обновление таблицы заданий должно обновляться с Server Side Events, то есть когда клиент открыл страницу задания и сделал какое-то действие (не просто открыл, а например уже выбрал одну карту), то в таблице заданий терапевта она должна обновить свой статус без обновления страницы.


Список упражнений

На этом экране терапевт видит созданные им упражнения, может создать новое, изменить существующее или создать задание из упражнения.
При нажатии в хедере на ссылки Задания и Упражнения происходит переход на соответствующий список.
При нажатии на кнопку “Создать” терапевт переходит на экран “5 - Создание/редактирование упражнения”. При нажатии на кнопку “Создать задание” терапевт переходит на экран “4 - Создание или редактирование задания”.
Тоже должна быть пагинация, 10 на страницу, сортировка по дате создания, сначала новые.


Создание/редактирование задания

Форма создания нового задания. Если переход был произведен из списка упражнений, то в пункте упражнение должен быть выбран пункт соответствующего упражнения, на котором было нажато “Создать задание”. Текст упражнения и количество карт для выбора должно быть взято из упражнения, но на этом экране пользователь может изменить их для своего задания. Все поля не могут быть пустыми, количество >= 1. При выборе упражнения если название пустое или такое же, как у предыдущего упражнения (если пользователь его не менял), то оно должно замениться на название упражнения. По кнопке создать задание создается и происходит переход в список заданий.


Создание/редактирование упражнения

Форма создания нового упражнения. Название не может быть короче 3 символов. Текст упражнения может быть пустой. Самое интересное здесь - пикер картинок, должно быть можно выбирать их в диалоговом окне или перетаскивать драг н дропом откуда-то. После этого надо чтобы можно было поменять их порядок или удалить какие-то, добавить новые. Отображать их лучше в виде плиток одинакового размера. При нажатии кнопки создать происходит переход в список упражнений.


Экран терапевта - Просмотр результата задания

После выполнения задания клиентом терапевт переход в список заданий, видит выполненное, нажимает на “Результаты” и попадает на этот экран. Тут должна быть read only информация со всеми полями по заданию и view результатов такая же, как у клиента.


Экран клиента - Запущенное упражнение

Самый сложный по UI логике экран. Это экран задания, на который попадает клиент, когда переходит по ссылке задания из сообщения терапевта. Тут он видит название задания, текст с инструкцией, coverflow carousel из картинок карт, ниже панель куда надо их перетащить и кнопка “Закончить”. Соответственно клиент должен выбрать N карточек и перетащить их с помощью drag n drop в специальную зону, где создается карточка содержащая эту картинку и поле ввода описания почему именно эта карта. После выбора требуемого N карт активируется кнопка “закончить” и клиент переходит на экран “8 - Экран клиента - Просмотр результата задания”. Теперь задание получает статус выполненного и его результат теперь может посмотреть и терапевт. Если клиент заходит повторно по ссылке задания, которое он уже выполнил, он должен сразу попадать на страницу просмотра результата.
Если клиент не закончил с заданием (зашел посмотреть или что-то потыкал и ушел) и закрыл вкладку (или по timeout бездействия), то статус задания должен вернуться из “Запущенное” в “Созданное”, а все элементы должны стать заблокированными и появиться диалог с требованием обновить страницу. Все эти изменения с помощью Server Side Events должны обновляться в таблице заданий терапевта.


Экран клиента - Просмотр результата задания

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