O projeto "Ao Redor dos EUA - Autorização e Registro" (Sprint 15) do curso de "Desenvolvedor Web" da TripleTen teve como objetivo criar uma aplicação web que permite aos usuários se registrar, fazer login, gerenciar fotos (adicionar, remover e curtir), e editar informações e o avatar de seus perfis. Para isso, utilizei a biblioteca React, refatorei o código de um projeto anterior e implementei páginas de registro e login com rotas protegidas, garantindo a segurança e personalização da experiência do usuário. A refatoração do código resultou em um sistema mais organizado e eficiente, melhorando a manutenção futura e a escalabilidade do projeto.
- O aplicativo foi estruturado conforme a documentação do React.
- Os cartões iniciais da página foram obtidos da Api correspondente;
- Os botões de abertura e fechamento dos popups, submit e like dos cartões utilizaram Estados e Contextos.
- O fechamento dos popups com a tecla ESC ou clicando fora deles foram refatorados;
- Uso de ref para obter acesso direto ao elemento de entrada DOM e seu valor na edição do Avatar;
- As APIs foram estruturadas em Classe.
- Os Hooks Route, Switch, withRouter e useHistory foram utilizados para navegação entre páginas;
- O componente "Protected Route" é responsável por proteger a página principal, que só pode ser acessada por meio de login de usuário registrado;
- O componente "Info tool tip" é responsável por alertar o usuário se seu registro foi bem sucedido ou não;
- A Autorização (auth.js) foi feita com base na URL fornecida pela TripleTen e utilizei o método POST para login e registro e GET para obtenção do token que permite que o usuário permaneça logado.
Front-end: HTML, CSS, flexbox, grid, BEM, JavaScript/JSX, Git/Github, Figma, Webpack, NPM, React.
-
A validação dos formulários está funcionando, porém pode ser melhorada e as mensagens de erro personalizadas;
-
Criar a parte de back-end.
Você pode acessar o site aqui.
O desgin pode ser acessado no Figma:
