Разработка приложения онлайн конструктора на React
Фронтенд разработка веб приложения на React для сервиса SiteRemix.com. Онлайн конструктор с помощью которого пользователи смогут вносить изменения, улучшения или создавать дополнительные свойства или обновления в дизайн, структуру, интерфейс уже существующих сайтов, без написания кода.
Stack:
JavaScript, NodeJs, React, Mobx, REST, UI/UX, CSS, PostCSS
Подробности:
Есть специально разработанная библиотека RemixerJS https://remixerjs.com которая позволяет находить элементы на веб странице и менять их с помощью разных функций JavaScript -а создавая динамические CSS классы и манипулировать структуру элемента на разные события которые происходят в браузере.
Нужно доделать онлайн конструктор (далее билдер), написанный на React-е, который позволяет пользователям сервиса, загрузить через сервис любой существующий сайт, вставить в него код билдера и визуально, без написания кода, находить и менять в нем HTML элементы, вставляя в них свойства и функционал из библиотеки RemixerJS. После создания Remix-а сайта, пользователь сможет сгенерить и опубликовать JavaScript который будет включать в себя финальный, полностью функциональный JavaScript код с библиотекой RemixerJS и настройками пользователя с ремиксами элементов из билдера.
Билдер уже готов на 70%, все UI элементы уже существуют, все взаимосвязи с сервером (REST) уже готовы и работают.
Структура и модель связей в функционале приложения такая:
Remix Projects -> Groups -> Remixes -> Steps -> Step Options -> Step Types и Step Params
В каждом Remix Project -е может быть много Remix Groups. В группах можно создать много Remixes. В каждом Remix-е может быть много Remix Steps. Каждый Step имеет разный Тип. Каждый Тип имеет свойства Params и настройки.
На данном этапе нужно полностью реализовать функционал библиотеке RemixerJS в билдере. Сейчас реализовано и работают только несколько типов Steps в категории “Animation” и “Effects”, а нужно добавить еще 3 категории и все их типы. Вся документация на RemixerJS есть на английском.
Видео для понимания как работает билдер
https://www.dropbox.com/s/wqkmgdyfo4avpkb/siteremix-quick-overview.mp4