Доработка прототипа веб-сервиса Full Stack (TypeScript, React, Mongo)

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

Работа над сервисом уже начата, это веб приложение, использующее TypeScript React Mongo. По верстке пока используется React-Bootstrap. Работа в Git репозиториях.

Оплата по частям после приема каждого экрана.

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

Эти экраны уже реализованы почти полностью:

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

Эти экраны необходимо сделать с нуля:

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

Подробнее про каждый экран, который нужно сделать/доделать:

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

Обновление таблицы заданий должно обновляться с Server Side Events, то есть когда клиент открыл страницу задания и сделал какое-то действие (не просто открыл, а например уже выбрал одну карту), то в таблице заданий терапевта она должна обновить свой статус без обновления страницы.

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

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


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

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


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

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