Skip to content

Igorttdp/Contact-Simplifier

Repository files navigation

Pré-Visualização 🔎

Contact-Simplifier Dashboard


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.

Botão de registro 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. Botão de registro
Página de Login 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.


Registro bem sucedido Registro falhou



Login

Página de 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. Página de Login

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.


Página de Login Página de Login

Em caso de erro, um toast aparecerá na parte superiora direita da tela, para te notificar que algo deu errado.

Error


Se tudo der certo, você será redirecionado para Dashboard!



Dashboard


Error

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.

Cartão de perfil 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. Editar informações

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.


Formulário de atualização retraído Formulário de atualização com campo de senha aberto
Atualizando nome 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!

Atualizado com sucesso Erro

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. Erro

Coloque as informações pertencentes ao seu novo contato e após isto clique em "salvar".

Formulário de 'novo contato' preenchido 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.
Cadastro concluído Contato adicionado no cartão 'Meus Contatos'.
Erro 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!


Cartão de 'Meus Contatos' 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. Cartão de 'Meus Contatos'

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.

Cartão de 'Meus Contatos' Cartão de 'Meus Contatos'
Se algo der errado um toast de erro é disparado. Erro



Funcionalidades extras

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

Dashboard versão laptop/tablet


Dashbard versão mobile



Como rodar o APP Localmente

No terminal, digite:

git clone git@github.com: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.