Para desenvolver o projeto para o teste de Front-End da Leadster utilizei as tecnologias propostas pela mesma, como: Nextjs, typescript e styled-components.
Fora do que foi proposto resolvi utilizar a biblioteca Radix para a criação do modal, ela permite criar componentes sem estilos pré definidos porém com uma acessibilidade excelente.
Como não havia uma API para comunicação resolvi utilizar um arquivo json para cadastrar os dados, também optei por utilizar os vídeos e thumbnails do YouTube para não ser necessário a instalação de uma biblioteca de video player e tornar o desenvolvimento um pouco mais simples.
Foi criado um arquivo de tema padrão do styled-components para separar as cores do projeto.
Na hora de estruturar as pastas resolvi separar em vários componentes para serem reaproveitados caso o projeto venha a crescer.
Primeiro, execute o servidor de desenvolvimento:
npm run dev
# or
yarn dev
# or
pnpm devPara executar os testes:
npm test
# or
yarn test
# or
pnpm test