The Gem Shop Italian-Charminator ✿

• 

  Home page, choose the base colour

• 

  receive feedback

• 

  put payment details

• 

  add charms as you wish

• 

  order management

• 

  access admin controls

• 

  login to the admin portal

• 

  see the orders of the client and make them in real life for shipping

The Gem Shop Italian-Charminator ✿

What it does It is a full-stack e-commerce app that allows customers to interactively design custom Italian charm bracelets in a live 2D preview. It’s backed by a synchronized admin portal that makes tracking, managing, and fulfilling these unique orders effortless.

How I built it

• UI & Brand: Established a playful light purple and pink aesthetic with soft, rounded typography and a custom #690B0D deployment icon.

• Client Customizer: Built the logical flow for base metal/length selection and engineered the drag-and-drop mechanics for the virtual bracelet.

• Admin & Sync: Mapped out a secure administrative dashboard with instant, bidirectional data flow to the client UI.

• Deployment: Configured database and storage connections using personal project keys to bypass university network blocks during judging.

Standout Feature: Interactive Virtual Customizer The app dynamically generates a 2D bracelet chain based on the user's selected metal and length. As users select charms, they populate the chain and can be intuitively dragged and reordered using subtle interaction handles, providing a live, state-driven preview of their exact design.

Key Integrations

• Real-time DB Listeners (WebSockets): Ensures that any catalog updates (prices, images) made in the admin portal instantly push to the client-side without a page refresh.

• Custom Photo Module: Instantly crops user uploads to a square, applies a client-side charm mask, and drops the personalized link right onto the virtual bracelet.

What's Next? Deploying this into my real-life jewelry business!

Built With

• medo