Gil Alves

Aplicação

O projeto "Complex Form" é uma exploração aprofundada e implementação de técnicas avançadas de React, incluindo useReducer e useContext. O projeto apresenta um formulário seguro de várias etapas, completo com regras robustas de validação em ambos os níveis de campo e etapa.

Desafio

É um projeto de estudo, logo me desafiei em conceitos e tecnologias ainda não exploradas como useReducer (muito semelhante ao Redux) e o Contexto API do React para gerenciar estado global. Acredito que o maior desafio foi estruturar os dados de certa forma que funcionasse no mundo real de uma aplicação, que fosse capaz de ser rigido em validação mas permissivo em usabilidade, e que também pudesse ser validado por steps ou o formulário inteiro.

Logo além de ser robusto em regras ele também é facil de integrar com um backend, enviado dados só no final do formulário ou a cada step, ambos são facilmente possiveis.

Desenvolvido

• Função avançada de formulário de várias etapas
• Sistema de gerenciamento de estado seguro e estruturado
• Validação em nível de campo
• Validação em nível de step
• Permite navegação entre as etapas, mas a conclusão de todas as etapas é necessária para finalizar o formulário
• Variedade de campos personalizados, incluindo campo de número de telefone internacional com seleção de código do país e formatação automática do número, campo de upload de imagem com função de pré-visualização integrada, campo de "Tags" de perfil do usuário com geração automática de estrutura de dados, etapa de entrada de endereço equipada com busca baseada em API e funcionalidade de auto-completar, etapa de seleção de plano com "radio cards"...
• Manipulação elegante de erros com toasts e erros de campo inline
• Campos de nome de usuário e senha com regras de validação rigorosas, garantindo a segurança da conta

Desfecho e Melhorias

Atualmente, estou planejando algumas melhorias para o projeto:

• Transição da API de solicitação de endereço para uma solução que suporte ambientes locais e de produção (atualmente não da pra pesquisar o endereço em produção devido ao uso de API gratuita)
• Expansão da seleção de tipos de campos personalizados para demonstrar ainda mais as capacidades de manipulação do formulário
• Melhorar a experiência do usuário para campos com várias ou complexas validações, como os campos de nome de usuário e senha
• Refinar ainda mais o design da UI/UX para uma interação do usuário mais suave e envolvente