Uma aplicação construida em ReactJs e estilizado em Styled-Components e bem componentizado, com a proposta de realizar cadastros de N usuários no qual os mesmo possam se cadastrar e fazer o login para acessarem sua Agenda Tech, onde poderão salvar N contatos, editar e excluir a vontade, além de ter a possibilidade de exportar a lista de Contatos em PDF caso necessário. Possui proteção de rotas para garantir que certas paginas e interações ocorram apenas se estiver logado além de possui o AutoLogin, que salva o estado do usuário como logado enquanto permanecer logado sem ter saido da conta.
Será possível também editar as informações do Perfil do usuário além de poder deletar a própria conta caso queira.
Utilize o comando abaixo para a instalação dos pacotes de dependências necessárias para a correta inicialização do projeto
$ npm installApós a instalação das dependências, utilize o comando seguinte para iniciar a aplicação localmente.
$ npm run devObs: A rota padrão disponibilizada pelo React da aplicação quando rodado localmente é: http://localhost:5173
OBS: Como a API construida para esse projeto não está disponível online, acesse o repositório da API e siga as instruções: https://github.com/CarloslFreitas/NestJs-BackEnd-AgendaTech_Fullstack
Layout simples e bonito visando o minimo sem poluição visual, possui leves animações e loadings personalisados.
Foi utilizado a biblioteca Zod para a validação dos formulários existentes na aplicação para garantir que os dados sejam enviados corretamente.
Possui também a biblioteca Toastify para entregar melhor visualização das respostas de interação do usuário e a aplicação, retornando caixas de dialogos orientando e alertando de forma dinâmica os erros e acertos.
Assim como o Login page, também foi utilizado o Zod para a validação dos dados informado pelo usuário.
Apresenta um layout simplista e bonito com algumas animações leves.
Possui a lista de contato onde será visualizado todos os contatos registrado pelo usuário. Possui 5 Modais no total os quais servem para Visualizar os Dados do Perfil, Editar os Dados do Perfil, Exibir a Lista de contato para a exportação, Criação de Contatos e Edição dos Contatos.
Obs: Para abrir o modal de edição/exclusão de contatos, basta clica em 1 dos itens de contato da lista.
É possível atravez desse modal exportar em PDF todos os contatos registrado na conta, basta clicar no botão 'exportar contatos' e escolher o local para salvar o arquivo.
