Frontend Dev for Bead Bracelet Configurator
Budget: £18 – £36 GBP
Interactive Bead Bracelet Configurator
The Mission I am looking for a sharp frontend developer to build a custom interactive bead bracelet configurator. This isn't a basic UI job; it requires solid logic for dynamic circular distribution and custom mathematical calculations. You can see exactly what we are building on Figma here: https://www.figma.com/design/mOAPuxwjegBeB9ySI75V54/Bracelet_Configurator_UI?node-id=1-340&t=VoIYanfk1fLTss6y-0
The Core Logic The configurator starts empty and populates beads as the user selects them from a sidebar. These beads must arrange themselves perfectly along a circular path without overlapping. Most importantly, the "Wrist Size" isn't a simple addition of diameters—it uses a specific compensation formula based on bead size that I have already documented. You will also need to handle drag-to-delete interactions and mobile-friendly long-press tooltips.
Technical Specs The entire tool must be data-driven. This means loading bead info (names, prices, diameters, and image URLs) from a JSON file rather than hard-coding anything. When the user finishes their design and hits "Add to Cart," the system should fire a custom event outputting a JSON object with the final configuration. We are looking for a clean, standalone build using HTML, CSS, and vanilla JS or a very lightweight framework. No backend is required for this phase.
How to Win This Bid This is a 5-day project, so I need someone who can hit the ground running. Please start your proposal with the phrase Logic First so I know you actually read this. Don't just send a generic portfolio—tell me briefly how you would approach the circular distribution logic for varying bead sizes. If you have built something similar involving Canvas or SVG math, please show me.
The Mission I am looking for a sharp frontend developer to build a custom interactive bead bracelet configurator. This isn't a basic UI job; it requires solid logic for dynamic circular distribution and custom mathematical calculations. You can see exactly what we are building on Figma here: https://www.figma.com/design/mOAPuxwjegBeB9ySI75V54/Bracelet_Configurator_UI?node-id=1-340&t=VoIYanfk1fLTss6y-0
The Core Logic The configurator starts empty and populates beads as the user selects them from a sidebar. These beads must arrange themselves perfectly along a circular path without overlapping. Most importantly, the "Wrist Size" isn't a simple addition of diameters—it uses a specific compensation formula based on bead size that I have already documented. You will also need to handle drag-to-delete interactions and mobile-friendly long-press tooltips.
Technical Specs The entire tool must be data-driven. This means loading bead info (names, prices, diameters, and image URLs) from a JSON file rather than hard-coding anything. When the user finishes their design and hits "Add to Cart," the system should fire a custom event outputting a JSON object with the final configuration. We are looking for a clean, standalone build using HTML, CSS, and vanilla JS or a very lightweight framework. No backend is required for this phase.
How to Win This Bid This is a 5-day project, so I need someone who can hit the ground running. Please start your proposal with the phrase Logic First so I know you actually read this. Don't just send a generic portfolio—tell me briefly how you would approach the circular distribution logic for varying bead sizes. If you have built something similar involving Canvas or SVG math, please show me.
Related categories:
PHP
JavaScript
CSS
HTML
jQuery / Prototype
JSON
Frontend Development
SVG
Mobile Development
Figma