Esse Boilerplate tem como finalidade entregar os principais recursos necessários para se iniciar um projeto frontend com React e Typescript.

Sabemos que cada caso é um caso, cada projeto demanda uma necessidade diferente, será necessário adicionar outras libs, ou até mesmo remover alguma que não está sendo utilizada, mas em um mundo perfeito, tentando abrangir a maior parte dos projetos, esse boilerplate que eu criei é a minha escolha.

Vite hoje é sem dúvidas a melhor escolha para se iniciar um projeto frontent, além de moderno, sua principal característica é a velocidade de compilação, o que leva ao desenvolvedor uma produtividade incrível, Vite utiliza por de baixo dos panos o Rollup, que na minha opinião possui uma configuração muito simples.

Projetos profissionais utilizam o Typescript para desenvolvimento, com ele o desenvolvedor tem mais segurança para desenvolver localizando mais rapidamente os bugs e dando mais manutenibilidade ao projeto.

Tailwind CSS é um framework CSS que me lembra muito o Bootstrap, porém melhorado, depois de instalado e configurado basta adicionar as classes necessárias para ver o resultado em tela, por exemplo utilizando a classe flex, o tailwind já converte para display: flex;, esse é só um exemplo das facilidades que o tailwind entrega. Vale lembrar que o Tailwind não entrega componentes prontos como por exemplo o MUI, a criação do componente em si continua a cargo do desenvolvedor.

React Router Dom é uma lib que gerencia o roteamento da aplicação e que dificilmente fica de fora de qualquer projeto que tenha mais de uma rota.

EsLint tem como objetivo padronizar o código entre diversos desenvolvedores no mesmo projeto. Vale lembrar que para o EsLint funcionar corretamente nesse projeto, são necessários algumas configurações no Vs Code do desenvolvedor.

Prettier formata e corrige seu código de acordo com as regras do EsLint, por isso ambos utilizados em conjunto são uma verdadeira mão na roda para qualquer desenvolvedor. Assim como o EsLint, para o Prettier funcionar corretamente são necessários algumas configurações no Vs Code do desenvolvedor.

Vitest é uma alternativa ao Jest, além de ter sido criado pela equipe do Vite, ele promete ser mais rápido que seus concorrentes, nesse boilerplate já deixei ele todo configurado para além de testar também gerar os coverages, para executar os testes bastar executar o comando npm run vitest.

Sonarqube é uma ferramenta de inspeção de qualidade de código, nesse projeto já está configurado para ser executado através do comando npm run sonar e colher as informações corretas, o desenvolvedor deve apenas fazer as alterações necessárias de acordo com o seu próprio Sonarqube.

Utilizando o recurso Dark Mode do Tailwind, já deixei configurado um hook para alteração do modo escuro na aplicação, para fazer a alteração nas classes o desenvolvedor deve utilizar o seletor dark:.

Internacionalização é fundamental em projetos de multiplas linguagens, utilizando a lib i18n eu já deixei configurado um hook para alteração da linguagem da aplicação, deixei como exemplo 2 linguagens completas sendo o pt-BR e o en e mais uma linguagem com apenas uma tradução que é a de.

Aplicação com linguagem EN

Aplicação com linguagem PT-BR

Aplicação com Tema Claro

Vitest Coverage

Sonarqube