O projeto "Ao redor dos EUA - Autorização e Registro" consistiu na criação de uma página web onde os usuários podem se registrar, fazer login, adicionar, remover e curtir fotos, bem como editar informações e o avatar de seu perfil. O objetivo é utilizarmos a biblioteca React para criação do aplicativo, refatorar o código do projeto anterior e adicionar uma página de registro e login (com rotas protegidas), bem como a criação de um servidor com uma API e autenticação de usuário. Como resultados, espera-se um código mais limpo e modular, melhor usabilidade e integração eficiente entre frontend e backend.
- 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. -Manipulação de banco de dados; -Instalção e utilização do ESLint; -Criação de uma API própria; -Criação de Esquemas e Modelos (GET, POST, DELETE para os cartões; GET e POST para usuários); -Criação de rotas e controladores; -Instalação e conexão com o MongoDb; -Manipulação de Erros.
Back-end: JavaScript, NODE, Express. 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;
-
O design pode ser melhorado.
Você pode acessar o site aqui.
O desgin pode ser acessado no Figma:
