Esse é um projeto de formulário para cadastro de clientes. Onde é utilizado o firestore do Firebase para persistência de dados, o que permite a utilização da aplicação mesmo “offline”. E quando for realizada a reconexão automaticamente os dados em memória transitória serão migrados.
Nesse projeto foi utilizado grande parte dos recursos da biblioteca React sendo esse useState, useEffect, useRef e a ContextAPI. Também, foi utilizado a biblioteca Formik integrada com o Yup, inputmask e cep-promise para ajudar a lidar com as validações e estados dos campos do formulário. As principais validações são:
- Verificar se é um e-mail valido;
- Adiciona validação de tamanho mínimo de dígitos e mascara de formatação no telefone, CPF/CNPJ e CEP.
- Verificação de CPF/CNPJ é valido.
- Busca automática de endereço por CEP.
Na parte de estilização foi utilizada a biblioteca de componentes Chakra UI, onde fornece componentes customizáveis, com acessibilidade e responsivos. Também foi utilizado animações utilizando o framer-motion. Toda a aplicação está 100% responsiva para todos os principais dispositivos. Além foi adicionado suporte PWA.
- Next
- React
- TypeScript
- Firebase
- Chakra UI
- Babel
- ESLint
- Prettier
- Semantic-release
- Lint-staged
- Commitizen
- Commitlint
- Husk
- Next PWA
- Plop JS
Primeiramente clone o repositório para sua maquina ou faça o "download" em formato ZIP e descompacte. Para realizar a clonagem do repositório utilize o comando:
git clone git@github.com:PedroHenry-Santos/form.git
Após basta instalar as dependências utilizando o gerenciador de pacote de sua preferência. Conforme abaixo:
yarn install
ou
npm install
E utilizar o comando:
yarn dev
ou
npm dev
Lembrando que será necessário criar uma conta no Firebase e um projeto para disponibilizar o serviço do Firestore. Para isso basta criar um arquivo .env ou .env.local (crie as mesmas variáveis do arquivo .env.example) e coloque as credenciais do firebase.
Agora você pode acessar localhost:3000 do seu navegador. Obs.: Os dados cadastrados podem ser acessados por todos, portanto no campo de CPF/CNPJ não informe o seu documento verdadeiro, utilize um valor "fake" gerando aqui.
Caso queira ajudar a implementar novas funcionalidade nessa aplicação, poderá seguir o roteiro de funcionalidades a seguir. Ou também poderá propor sua própria funcionalidade.
Para isso basta seguir o roteiro em CONTRIBUTING.
Para um acompanhamento do que já foi ou será feito, click aqui.
Para saber sobre as versões deste código consulte o CHANGELOG detalhado.