machadogolang / fm-interactive-card Goto Github PK

Interactive Card

Desafio "Interactive Card" do frontend mentor!

Ver online

Esse projeto é sobre uma página para preenchimento dos dados de um cartão.

(voltar ao topo)

(voltar ao topo)

Esta página foi baseada no desafio do frontend mentor, você pode conferir a pagina do desafio clicando aqui.

A proposta é a seguinte:

• Quando o usuário preencher o formulário e ver a atualização dos dados do cartão em tempo real

• Exibir mensagens de erro quando o formulário for enviado se:

  • Qualquer campo de entrada está vazio

  • Os campos estão no formato errado

• Layout responsivo

• Ter os estados de ativo e foco nos elementos interativos na página

(voltar ao topo)

⚛️Next.js: Neste projeto, a integração com o Next.js foi envolvente, explorando recursos como a criação de layouts e apesar do tamanho modesto do projeto, foi uma experiência interessante.

💅 Styled Components: O seu uso foi essencial para a parte visual do projeto, mas a integração com o nextjs apresentou desafios por causa de algumas incompatibilidades com o SSR e outras funcionalidades internas. Foi possível superar esses obstáculos com soluções como a criação de um registro por exemplo, aproveitando a flexibilidade e potencial do Styled Components na criação do projeto.

💼 Formulários: Utilizei Zod e React Hook Form junto ao TypeScript para aprimorar o manuseio e validação de formulários, proporcionando uma experiência robusta e amigável no projeto.

Além disso React Number Format organizou os números do cartão sem a necessidade de reinventar a roda, mas com uma pequena luta por parte do Styled Components!

Em resumo foi possível aprender e praticar:

• Aplicação do Styled Components no Next.js
• Styled Components com TypeScript
• Validação de formulários com TypeScript

(voltar ao topo)

Após clonar, baixar ou fazer um fork, utilize o comando abaixo para instalar as dependências do projeto:

npm install

Esse projeto te permite:

• Preencher e enviar o formulário

(voltar ao topo)

💌 Para me mandar uma mensagem basta usar um dos botões abaixo!

(voltar ao topo)