Esse app tem como objetivo principal cadastrar novos clientes através de um formulário multi stepper (passo a passo). Após a finalização do cadastro os clientes poderão ser listados, através do botão “listar clientes” localizado no menu lateral
O projeto está hospedado na vercel Multi Steps Forms
Para rodar esse projeto no seu computador será necessário ter o node instalado em sua máquina e também o git para clonar o repositório do projeto.
caso use o protocolo https em seu git, utilize o comando
git clone https://github.com/srsifer/mult-stap-form-challeng.git
cd mult-stap-form-challeng
npm install
npm run dev
visite http://localhost:3000/
caso use o protocolo ssh em seu git, utilize o comando
git clone git@github.com:srsifer/mult-stap-form-challeng.git
cd mult-stap-form-challeng
npm install
npm run dev
visite http://localhost:3000/
Essas foram as tecnologias utilizadas para construir esse app.
Como se trata de um simples SPA(single page application) decidi fazer a renderização do formulário dentro de um modal, para isso utilizei uma biblioteca chamada react-modal, ela traz componente de modal de simples implementação o’que me pouparia bastante tempo
Para fazer as validações dos campos utilizei uma biblioteca chamada Joi
que traz uma maneira simples e rápida de validar dados quando um dado está fora da regra descrita pelo joi podemos executar uma ação. então utilizei a biblioteca react-toatfy para renderizar pop-ups com as mensagens de erros que eu havia criado no joi
Os passos um, dois e três são responsáveis por capturar os dados e salvá-los no local storage sendo assim o quarto passo responsável por transformar esses três objetos em um e dispará lo para o estado global da aplicação(redux). logo em seguida esvaziamos o localstorage ainda no quarto passo e exibimos a mensagem de “cadastro realizado com sucesso”
Para fazer a renderização, lemos os dados que foram salvos no redux
Essa renderização é condicional, caso não tenha nenhum dado no estado global ela irá renderizar “nenhum cliente cadastrado”.
ao clicar em um cliente surgirá um modal com todos os dados do mesmo
eu optei por utilizar a biblioteca styled-Componentes, com ela é possível criar componentes de estilização que além de deixar o código mais limpo e escalável
traz um maior reaproveitamento do mesmo, além de ser mais fácil de aplicar lógica javascript dentro do css devido a sua sintaxe, o'que me possibilitou criar a barra de progresso no topo do formulário e o menu lateral
Para fazer o deploy desse projeto basta efetuar um simples push da branch master, pois a aplicação está implantada na vercel, e a mesma configura automaticamente os conceitos de CI & CD. Você pode visualizar o app através deste Link
git push origin master1 - renderização da lista de clientes salva no localestorage
2 - themas dark/light
3 - paterns de validação do campo
4 - deixar o input na coloração vermelha quando indicando o campo onde ocorreu o erro de validação