Esse projeto foi desenvolvido para o desafio #boraCodar 13 da Rocketseat. Nele foi implementado um formulário para preenchimento dos dados de um cartão de crédito com o objetivo de estudar microinterações e como elas impactam na experiência do usuário. Desse modo, forma implementadas máscaras, validações e feedbacks os inputs do formulário, preview em tempo real do preenchimento do cartão e animação de flip do cartão para preview do campo CVV ao disparar os eventos de hover no preview do cartão e focus no campo CVV do formulário.
Para isso foram utilizadas tecnologias como ReactJS e Vite para o desenvolvimento do projeto, TailwindCSS para a estilização da interface, React Hook Form e Zod para validação do formulário e Radix para acessibilidade com o componente Tooltip.
É importante notar que a aplicação não salva e não envia nenhuma informação para nenhum servidor remoto. De todo modo, não é recomendável que seja inserido nenhum dado real de cartão de crédito.
Instale as dependências do projeto:
pnpm iExecute o projeto:
pnpm devEste projeto está licenciado sob o MIT. Consulte a licença para mais informações.