GithubHelp home page GithubHelp logo

frontend-web-agenda-'s Introduction

Projeto Fron End - WebAgenda

💻 Projeto Desafio deste projeto que se resume em uma aplicação de uma web agenda, onde o usuário tem como a finalidade inserir dados como:

  • Nome
  • Sobrenome
  • Data de Nascimento
  • E-mail
  • Endereço
  • Telefone

Foi feito o deploy deste Projeto que está hospedado em: https://webagenda.netlify.app/ Projeto está funcionando e em comunicação perfeita com o Back End que se encontra hospedado em Link da API :https://web-agenda.herokuapp.com/ Projeto Criado com React utilizando suas dependências e dependências de terceiros para criação da aplicação onde foi feito o consumo da API que foi criada no projeto do Back End. A Primeira página consiste na página de Login, onde o usuário falar login e sua autenticação irá passar por um processo de criptografia, onde toda essa configuração foi feita no Projeto "backend-agenda-web" que se encontra em meu Repositório no GitHub. Para este projeto utilizei dependências como:

  • React-Icones- para estruturar os ambientes com ícones
  • React-router-dom, para realizar todo roteamento das páginas.
  • Utilizei as ferramentas AuthContex e useContex para iniciar um processo de validação da senha, também utilizei a função localstorage para salvar o token do usuário em sua máquina.
  • Este processo de validação teve sua configuração de Token para expirar com 7 dias.

Para rodar este projeto será necessário clonar os arquivos do meu repositório no Github. No ambiente de desenvolvimento, basta instalar as dependências que se encontram no package.json Foram Criado a tela principal onde irá constar uma tabela que irá listar todos os contatos inseridos no MongoDB, foi incrementado um botão para iniciar um preenchimento de um formulario que irá adicionar novos contatos e em seguida já será listado. #Página de Login:

Para acessar a Página de Login, bastar informar os seguintes usuários:

  • Usuário: [email protected]
  • Senha: 123456 Este login automaticamente fica com o token salvo no localStorage do navegador, e tem sua expiração em 7 dias. A página inicial só irá funcionar caso o token esteja no salvo no Browser, caso contrário automaticamente a página redireciona para a página de Login.

###Página inicial Adicionar novos contatos, função que irá listar estes novos contatos na página inicial

Adicionar novos contatos, função que ira listar estes novos contatos na pagina inicial

#Conclusão. Estou concluindo este projeto que foi um grande desafiador para mim. A cada projeto vivencio novas experiencias e irei adquirindo novas oportunidades, espero que gostem e estarei disposição de todos para quaisquer eventualidades.

frontend-web-agenda-'s People

Contributors

ffernandescs avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.