upd: Еще актуально!

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

Бэкенд будет предоставлен к началу работы над заданием.

Примерный вид (стиль копировать не нужно) (upd: картинка не влезла, откройте её отдельно):




Описание:

• Сам редактор текста с подсветкой для кода нужно взять в виде готового пакета (к примеру, monaco или аналоги). Но нужно добавить к нему дополнительную функциональность:
• Два tab’а: Code для ввода кода и Output для просмотра вывода программы, которая была запущена.
• Dropdown-кнопка с тремя вариантами Compile, Run, Submit, для отправки программы на выполнение. Все три варианта пока делают одно и то же.
• Связь backend’ом по Websocket и получение вывода программы в ответ.
• Текст программы отправляется в json с кодированием в base64, ответ приходит в json, и часть ответа в base64.
• Контроль за состояниями, относительно сборки пользовательской программы: idle, ожидаем ответа от сервера, компиляция, программа запущена. Отображение некоторых из состояний в виде текста на странице.
• Контекстное меню с 3-мя опциями: “Reset code”, “Toggle hidden code”, “Copy to buffer”, “Submit feedback / Report an error” и их реализация.
• Toggle hidden code: Сокрытие кода по специальным тегам (часть кода не показывается в редакторе).
• Submit feedback: Отправлять заполнять текстовый feedback в какую-либо бесплатную систему.
• Dismissive danger alert с текстом ошибки, если происходит проблема на сервере.
• Сохранение кода в local storage.
• Если программа выводит слишком много текста, то он компонент должен прекратить его вывод.
• Тестовая страница с двумя экземплярами редактора кода.

Особенности работы:

• следует использовать современные code style guides.
• приветствуется использование bootstrap’ов.

Пожалуйста, укажите вашу стоимость (я указал рандомную оплату) и примерные сроки.