Contact Simplifier é uma aplicação feita utilizando Next.ts com intuito de simplificar o gerenciamento dos seus contatos de maneira intuitiva e flúida. Nele, é possível registrar os seus contatos de forma simples e rápida por meio do formulário de cadastro. Este projeto possui um CRUD no frontend para criar, atualizar, deletar e resgatar informações de usuário.
No frontend deste projeto foram utilizados conceitos do Next.js, entre eles Roteamento Imperativo, SSR (Server-Side Rendering), _Document Costumizado e _App Customizado
- Axios
- Eslint
- Framer-Motion
- Moment
- Next
- Nookies
- Radix Accordion
- Radix Dialog
- Radix Icons
- React-Hook-Form
- React-Loader-Spinner
- React-Query
- Sharp
- Styled-Components
- TypeScript
- Yup
Para termos total acesso a aplicação, devemos antes de fazer login, devemos nos registrar.
 |
No formulário de login você encontra um botão azul escrito Registre-se. Clique nele. |
| Após isso, um modal com formulário de registro irá aparecer na tela. É só preencher todas as informações e enviar o formulário! Lembrando que o sinal de asterisco vermelho "*" indica que os campos são obrigatórios. |  |
 |
Se algum campo não satisfazer as condições mínimas, eles ficarão com a cor vermelha (ou laranja se estiver selecionado), indicando que há algum problema na inserção deste/s dado/s |
Após o envio das informações validadas, o modal irá retornar uma resposta visual de sucesso ou de erro. Em caso de sucesso, clique no botão "Fazer Login". Em caso de erro, clique no botão "Tente, novamente". Se a aplicação estiver enfrentando problemas de conexão ou de qualquer outra natureza, você pode clicar em "Cancelar" e tentar novamente mais tarde.
 |
 |
 |
Na página inicial encontramos um formulário de login contendo campos de email e senha. |
| Ao inserir os dados os campos mudam de cor conforme a interação e validação dos dados. |  |
Se você preencheu todos os dados corretamente, é só apertar enter ou clicar no botão e esperar até que o servidor te retorne a resposta da solicitação de login.
 |
 |
Em caso de erro, um toast aparecerá na parte superiora direita da tela, para te notificar que algo deu errado.
Se tudo der certo, você será redirecionado para Dashboard!
Na Dashboard terão 3 pontos de controle (cartões) que tem funções específicas no funcionamento da aplicação. Vamos passar um a um e descobrir suas funcionalidades.
 |
Aqui é o cartão do seu perfil. Aqui você encontra suas informações básicas fornecidas no registro como: Nome, Email, Telefone, Data de ingresso. Também é possível vizualizar um ícone de lápis para editar suas informações básicas e por fim um botão "sair" para voltar á página de login. |
| Clique no ícone de edição para abrir o formulário. |  |
Aqui você encontra um formulário familiar ao formulário de login e registro. Porém este tem uma funcionalidade de campo retrátil. Basta clicar no campo que quer atualizar que ele irá aparecer abaixo.
 |
 |
 |
Atualize as informações que quiser e após isso clique em salvar! |
Semelhantemente ao formulário de registro, se a resposta da requisição for bem sucedida, será mostrada uma mensagem de sucesso. Caso contrário, será mostrada um toast de erro na parte superiora direita da tela!
 |
|
Agora vamos para o cartão de Adicionar Contatos na parte direita na tela (ou último cartão da direita para esquerda/cima para baixo).
| Aqui temos um formulário que funciona de forma idêntica aos outros. Lembrando que apenas os campos que contém o indicador "*" são obrigatórios, caso o contrário, o campo pode ser deixado vazio. |  |
Coloque as informações pertencentes ao seu novo contato e após isto clique em "salvar".
 |
Após isto, a resposta da requisição é mostrada com um toast na parte superiora direita da tela. Caso seja bem sucedido, você poderá encontrar seu novo contato listado no cartão central Meus Contatos. |
 |
 |
|
Caso algo de errado, esta sera a mensagem disparada. |
Este cartão ainda tem funcionalidades a serem desenvolvidas. Logo serão adicionadas mais opções de interação!
 |
Aqui é o cartão Meus Contatos. Aqui são listados todos os seus contatos adicionados! |
| Caso queira excluir algum contato, basta clicar na lixeira encontrada na parte direta do cartão de contato. |  |
Caso a requisição seja bem sucedida, um toast de sucesso irá aparecer no canto superior direto da tela e o contato será removido. Neste exemplo, é mostrado que o cartão de "Meus Contatos" está vazio pois só havia um contato cadastrado.
 |
 |
| Se algo der errado um toast de erro é disparado. | |
Esta aplicação também funciona perfeitamente no seu laptop, tablet ou celular! Experimente se quiser :D
No terminal, digite:
git clone git@github.com:Igorttdp/Contact-Simplifier.gitcd contact-simplifierInstale as dependências
npm install
# ou
yarn installInicialize a aplicação:
npm run dev
# ou
yarn dev
# ou
pnpm devAbra http://localhost:3000 no seu navegador para vizualizar a aplicação rodando.