Stack: React+Vite
Frontend
The project provides users with the ability to create a digital goods store using pre-prepared templates. Each template is a set of components (for example, different footer styles, product categories, sidebars, etc.) that the user can choose and combine to create a unique store.
Example: The "Standard 1" template may contain 5 different footers, 5 options for category tabs, 5 different sidebars, and other elements. The user can customize their store by selecting components from this set, thereby creating a unique design and functionality.
What we need to do: The editor must be fully functional so that the user can make changes to the pre-prepared website template. The main requirement: during the editing process, the user must see an exact copy of their site reflecting all the changes they have already made (if they have made any).
Once the user completes the editing and clicks the "Save" button, the changes must immediately reflect on their site, that is, on their domain or subdomain. This means that all work done in the editor must be transferred to the live site immediately after saving.
Main features of the editor:
1. Text editing – the user must be able to edit any text on the page that we provide them to edit in advance (headings, descriptions, buttons, etc.).
2. Editing visual elements – tools must be provided for editing visual components:
Colors
Fonts
Images (GIF)
and more
3. Real-time visualization in the editor – changes made by the user in the editor must be instantly reflected on the screen so that the person can see how their site will look after the changes (after clicking the "save" button). We have designed a user-friendly interface that should make it as easy as possible for the user to utilize the service and create a site for selling digital goods.
4. Flexibility – the user must be able to add new elements (for example, new blocks with text, images, buttons) or modify existing ones without the need for programming. (These blocks are already pre-designed and will be laid out in the template we provide to the user)