Tecnologias

As principais tecnologias utilizadas para desenvolvimento deste projeto foram:

Documentação

Vitepress

Fiquei muito feliz com a relevância da documentação no teste. Isso é algo que reparo ser muito pouco valorizado. Testes hoje em dia me passam a sensação que querem mais que você saiba decorado uma solução algoritimica (que dá pra achar com facilidade em duas boas pesquisas no Google) do que realmente entender como a pessoa tranalha no dia a dia.

Então estou considerando essa como uma oportunidade de demonstrar um cenário ótimo de como uma documentação deveria funcionar num projeto. O VitePress me parece a ferramenta excelente pra isso, pois na minha visão toda a documentação deve estar diretamente no repoositório. Apesar de existirem ferramentas excelentes hoje em dia no próprio GitHub, ou soluçoes comuns em emrpesas como o Confluence, ao meu ver a documentação estar próxima a nível de arquivos ao código facilita demais a sua manutenção e desenvolvimento, permitido a independencia do repositório a ferramenta de gestão empresarial. Além disso, existem outras vantagens como o acesso offline.

O VitePress adiciona apenas uma dependência de desenvolvimento no projeto, sendo totalmente desacoplado da estrutura.

PS: não é coincidência que muitos dos links de referência das libs e frameworks aqui listados usam o Vitepress.

Aplicação

Nuxt 3 e Vue 3

Estes requisitos foram de fácil escolha pois fazem parte do requisito do projeto. No entanto, acho importante reforçar a qualidade dos frameworks, que ao meu ver hoje em dia tem o melhor custo-benefício em relação a valocidade de desenvolvimento e qualidade de projeto. Hoje em dia, tranquilamente, Vue e Nuxt são a minha preferência para construção de aplicações.

Tailwind

Tem quem torça o nariz até hoje, no entanto, para quando não se tem uma biblioteca de UI própria e/ou design system definido, o Tailwind é excelente pra fazer algo bonito e funcional que saia rápido.

Fabric.js

A escolha do uso do Fabric.js como framework de manipulação se deveram a alguns fatores.

O primeiro e principal deles é pensando no tipo de funcionamento que o próprio Brand Studio da Pupila possui. Ainda que o teste fale sobre algo equivalente ao Figma, o Brand Studio, a ferramenta a ser emulada, está mais para uma forma de organizar e ordernar os elementos no canvas do que no fato de desenhar em um software de design de interface.

Isso também influneciou na decisão de como a Toolbar funciona, onde você insere diretamente um tipo de Shape no Canvas e depois o manipula, ao invés de "desenhá-lo".

O outro motivo foi de fato ligado a escolha de como o projeto funciona com mais de um Renderer. Inicialmente, cogitei utilizar o Konva.js, mas a forma com que a implementação funcionava no Vue não encaixava na proposta.

Por fim, o Fabric.js pareceu o mais extensível e com mais funcionalidades "esperadas" que já vem diretamente implementadas no framework. Tanto que eu nivelei para baixo o seu funcionamento para encaixar com a forma que o Renderer via Canvas nativo funciona com a sua implementação mais básica.

Um ponto negativo é que a documentação do Fabric é uma zona completa. Há bastante conteúdo, até por ser uma lib relativamente mais antiga, mas ele está espalhado em diferentes sites e formatos.

Pinia

Pinia não é um nome conhecido em mercado para quando se fala de ferramentas de mercado para gestão de estados. Ainda que seja tecnicamente possível usar ferramentas como Zulstand, ou até não usar nada, usando apenas o que o Nuxt já oferece (simplesmente usando funções puras e a reatividade do Vue), o Pinia é totalmente integrado ao ecossistema do Vue e caminha junsto com o desenvolvimento do próprio framework.

vitest

O vitest é algo do tipo "é ele que é bom". Teste unitário com Vue é o nome dele que vem em mente e só isso.

Playwright

O Playwright é uma das ferramentas que mais gosto como todo, então em testes end-to-end não dá pra usar outra coisa. Uso o Playwright pra todo tipo de automação que consigo a partir dq web.

Outros

pnpm

O pnpm é meu gerenciador de pacotes favorito. Ele traz um meio termo bom entre velocidade e otimização de espaço de disco.

uuid

Pacote para gerar identificadores únicos. Apesar de conseguir gerar diretamente com a API Crypto do JavaScript, acho que esse tipo de lib num contexto pra garantir consistência e retrocompatibilidade.

@nuxt/icon

Biblioteca de ícones. Além de ser fácil de usar e ter uma quantidade de ícones consideráveis, ajuda a demonstrar o conceito de modules do Nuxt.

concurrently

Minha ferramenta favorita para gestão de processos concorrentes. Ela permite levantar o projeto em dev e essa documentação em paralelo, e adiciona uma tag a cada linha do output no terminal, associada ao seu respectivo processo.