As a voting event organizer, I want to personalize my voting page with custom colors, logo, header, and streaming URL, so that I can align the voting experience with my brand and provide a cohesive event experience for participants.

Acceptance Criteria:

1. Popup Creation:

• When accessing the customization feature, a popup should appear with fields to input logo, select colors, enter header image, provide streaming URL, and custom subdomain.

2. Design Integration:

• Upon uploading a logo, it should be displayed in the designated area of the popup (same for header & streaming). If the user clicks the "X" next to each, it returns to the previous version.
• Selected colors should be applied to the preview section of the popup to reflect the chosen color scheme.
• Only show the images preview if the image type is valid (same with streaming), otherwise show the error (filetype/url not valid)
• After entering the subdomain URL, we should check if its correct & available (unique). Show the check icon if everything is correct, show the cross icon and the error if not.

3. Image Upload:

• Uploaded logo and any other images should be stored in a secure image storage system and easily accessible.

4. Metadata Storage:

• Upon completion of customization, all provided information including logo, colors, header text, streaming URL, and additional information should be saved into the metadata field associated with the voting page.

5. Preview and Save:

• After making changes, a preview option should allow the organizer to see how the customized voting page will appear to participants (in a new tab, with a dummy text if title/description is not provided, the provided title/description if it's already filled).
• Upon confirming satisfaction with the customization, the organizer should be able to save the changes.

6. Integration with Voting Page:

• The saved customization settings should be applied to the voting page in real-time, ensuring that participants see the personalized design when accessing the page.

Definition of Done:

• The customization popup is implemented and accessible to event organizers.
• Organizers can upload images, select colors, input text, and provide URLs within the popup.
• Uploaded images are securely stored and accessible for use.
• All provided customization information is saved into the metadata field associated with the voting page.
• A preview option allows organizers to visualize the customized voting page.
• Changes made in the customization popup are successfully applied to the voting page.
• The feature is thoroughly tested and documented for future reference.

Related:

• Image Upload and CDN
• Subdomain configuration and deploy
• Metadata storage

Design reference (Before & After filling the information)

Proposed Libraries:

• Color picker: https://casesandberg.github.io/react-color/ (Swatches mode)
• Streaming: https://www.npmjs.com/package/react-player
• Image Uploader/Storage/CDN: https://github.com/Pixboost (self-service or free plan)