Pré-Visualização 🔎

Sobre 📘

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.

Estruturação de Projeto e Tecnologias 👩🏻‍💻📂

No frontend deste projeto foram utilizados conceitos do Next.js, entre eles Roteamento Imperativo, SSR (Server-Side Rendering), _Document Costumizado e _App Customizado

Tecnologias / Bibliotecas

• 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

Como Funciona 🔨

Registro

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.

Login

	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!

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.

Editando informações Pessoais

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!

Criando Novos Contatos

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.

Gerenciando contatos

Aviso

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.

Funcionalidades extras

Esta aplicação também funciona perfeitamente no seu laptop, tablet ou celular! Experimente se quiser :D

Como rodar o APP Localmente

No terminal, digite:

git clone [email protected]:Igorttdp/Contact-Simplifier.git

cd contact-simplifier

Instale as dependências

npm install

# ou

yarn install

Inicialize a aplicação:

npm run dev
# ou
yarn dev
# ou
pnpm dev

Abra http://localhost:3000 no seu navegador para vizualizar a aplicação rodando.