Executando verificação de segurança...
2

Manja de FrontEnd? Que tal embarcar em um desafio comigo?

Um desafio frontend para um dev backend :3

Introdução

Olá colega! Não sei em que nível você está e muito menos se já está empregado. Mas não importa! Recentemente consegui meu primeiro freelancer e isso me deixou extremamente feliz. Um passo importante que finalmente comecei, Um site de montagem de bike em que ao selecionar as peças uma pré visualização seria mostrada tal como um jogo. Entretanto meu foco atualmente está longe de ser frontend.

Algumas escolhas técnicas (que provavelmente não foram corretas )

Devido a minha inexperiente com a área, decidi optar por um framework um pouco mais simples, nas minhas pesquisas encontrei um tal svelte 5. E achei incrivelmente "esbelto".... desculpa pelo trocadilho bosta. Uma coisa importante que acho bom esclarecer - não optei por contratar um dev frontend por um motivo em especifico, falta de verba, moro em uma cidade do interior da Bahia e digamos que as pessoas daqui não estão afim de gastar caro - E estou passando por um desafio complicado!

Malditas peças!

Estou levando uma surra! kkkkkkk Bom, qual a ideia inicial que bolei? criar componentes que seriam as peças e posicioná-las tipo um quebra cabeça! então com ela montado só trocar as imagens que ficaria tudo perfeito. No backend pegava as imagens das peças e deixava com o tamanho especifico para evitar quebrar a bike, bom... deu completamente errado!

imagem bike base

Inicialmente pareceu tudo uma maravilha, mas ao adicionar uma nova peça no sistema, um quadro eu vi o problema que isso me daria.
imagem bike quebrada

Mesmo garantindo no backend que as imagens teriam o mesmo tamanho, bom, o resultado ficou horrível, uma solução que pensei foi adicionar espécies de âncoras de posicionamento, na criação da peça, mas não sei se seria amigável o suficiente para o cliente. Alguém consegue ajudar? Alguma dica? conselho enfim, qualquer feedback ajudará bastante!

Carregando publicação patrocinada...
2

O front end está em Html, Css e JavaScript?
Se sim, cria um grid e define alguns quadrados como os pontos que a imagem será adicionado.
Z index para definir as camadas e conseguir assim sobrepor as imagens.
Rem e css calc para definir os tamanhos das imagens.
Translat e transform que também são propriedades css irão ajudar a posicionar e fixar a posição das imagens.

Mas é um projeto bem trabalhoso esse mesmo, irá precisar ficar realizando muitos testes.

1

Bom, se tratando de web meio que não tem como fugir dessas tecnologias, a diferença é que estou usando um framework chamado Svelte , então sim, estou usando HTML, CSS e JS. Verei o que posso fazer, A ideia de adicionar ancoras que dizem onde a peça devem se posicionar não sai da minha cabeça, mas gostaria de ver outros pontos de vistas e tals