React Dragons
Resumo do projeto
O projeto consiste em uma aplicação que contém sistema de login e cadastro, uma lista de dragões, onde a partir desta você pode ver mais detalhes do mesmo, editá-lo e/ou deletá-lo, e também no header há a opção de adicionar um novo dragão. A seguir entrarei em detalhes sobre cada parte do projeto.
Tecnologias/bibliotecas utilizadas
- ReactJS
- Typescript
- Firebase
- Firebase hooks
- Express
- React Router
- Styled Components
- TailwindCSS
- twin.macro
- React Hook Form
- Yup
- Webpack
- Babel
- React Testing Library
- Jest
Páginas e/ou telas da aplicação:
Página de autenticação
Ao entrar pela primeira vez no site, o usuário verá o formulário de login, caso não tenha conta, pode clicar no link “Clique aqui!”. Ao fazer isso, uma animação ocorrerá e o formulário de cadastro ficará visível. Além disso, tem a opção de entrar por meio do sistema OAuth 2 com uma conta do google.
Vale salientar que para o sistema de autenticação foi utilizado o Firebase juntamente com React Firebase Hooks.
Tanto o formulário de login, quanto o de cadastro são validados com a combinação do React Hook Form e da biblioteca Yup. Com isso o usuário recebe um feedback se os campos preenchidos cumprem os requisitos, se a conta foi criada com sucesso e/ou se o email colocado já tem uma conta cadastrada. Caso o login seja realizado, o usuário é automaticamente redirecionado para a lista de dragões.
autenticacao.mp4
Layout padrão
O layout padrão presente nas funcionalidades da aplicação quando o usuário está autenticado consiste num header que apresenta a logo do projeto, um botão que redireciona para a página de adicionar um dragão, e um botão para fazer a desautenticação.
Lista de dragões
Esta página mostra todos os dragões vindos da API, individualizados em um card que contém:
- Nome
- Foto (padrão para todos pois a API disponibilizada não fornece imagem)
- Botão “Ver mais detalhes” que redireciona para os detalhes do dragão
- Botão “Editar” que redireciona para a tela de editar alguns dados do dragão
- Botão “Deletar”
Vale salientar que logo abaixo do header tem uma barra de pesquisa, que a cada caractere inserido nela, a lista é filtrada de acordo com o texto do usuário.
Além disso, se nenhum dragão estiver cadastrado e/ou nenhum dragão corresponder ao filtro da barra de pesquisas, a mensagem “Nenhum dragão encontrado!” será exibida no lugar da lista.
Lista.de.dragoes.mp4
Página de detalhes do dragão
Esta página mostra os seguintes dados do dragão:
- Nome
- Tipo
- Nº de identificação
- Foto
Também há o botão “Ver todos os dragões” que redireciona para a lista de dragões.
Página de editar dragão
Esta página apresenta um formulário com os campos “Nome” e “Tipo” do dragão, ambos já iniciam preenchidos com os dados do dragão a ser editado.
O formulário é validado com React Hook Forms e Yup, que tornam ambos os campos obrigatórios.
Caso o formulário seja submetido (por meio da tecla enter ou clicando no botão “Salvar”), aparecerá a mensagem de sucesso “Dados alterados com sucesso” durante 3 segundos.
Por fim, há o botão “Voltar” que redireciona para a lista de dragões.
editar.mp4
Página de adicionar dragão
Esta página apresenta um formulário com os campos “Nome” e “Tipo” do dragão.
O formulário é validado com React Hook Forms e Yup, que tornam ambos os campos obrigatórios.
Caso o formulário seja submetido (por meio da tecla enter ou clicando no botão “Adicionar”), aparecerá a mensagem de sucesso “Dragão adicionado com sucesso!” durante 3 segundos.
Por fim, há o botão “Voltar” que redireciona para a lista de dragões.
adicionar.mp4
Página Not Found
Ao ser redirecionado para essa página, o usuário verá uma mensagem informando que a pesquisa dele não corresponde a nenhuma funcionalidade da aplicação, em seguida é disponibilizado um botão para voltar para a rota padrão (”/”).
Página Not Authorized
Ao ser redirecionado para essa página, o usuário verá uma mensagem informando que ele não tem autorização para acessar tal funcionalidade da aplicação, em seguida é disponibilizado um botão para voltar para a rota padrão (”/”).
Tela Loading
Essa tela será mostrada em momentos cuja a aplicação está carregando dados, como por exemplo na requisição da lista de dragões, ou nos detelhes de algum dragão específico.
loading.mp4
Rotas Protegidas
As rotas da aplicação estão disponíveis conforme o estado do usuário (autenticado ou não).
O que determina se o usuário está logado ou não é a presença de um token no localstorage, esse token é automaticamente criado e salvo quando o login é feito (com email e senha ou por meio do google)
Para usuários não autenticados:
- Página padrão ( / ) → redireciona para a rota /auth
- /auth → mostra a página de autenticação
- /dragons e qualquer outra relacionada com /dragon→ redireciona para a rota /not-authorized
- /not-found → mostra a página Not Found
- /not-authorized → mostra a página Not Authorized
- Qualquer outra url →redireciona para /not-found
Para usuários autenticados:
- Página padrão ( / ) → redireciona para a rota /dragons
- /auth → redireciona para a rota /dragons
- /dragons → mostra a página Lista de Dragões
- /dragon/:id →mostra a página de detalhes do dragão com o id correspondente, se não houver dragão com tal id, mostra a página Not Found
- /dragon/edit/:id →mostra a página de editar do dragão com o id correspondente, se não houver dragão com tal id, mostra a página Not Found
- /dragon/add →mostra a página de adicionar dragão
- /not-found → mostra a página Not Found
- /not-authorized → mostra a página Not Authorized
- Qualquer outra url →redireciona para /not-found
TailwindCSS | twin.macro + styled components
Para a estilização da aplicação, o objetivo foi juntar os benefícios ofertados pelo TailwindCSS com a organização e css-in-js que o styled components oferta. Para tal integração funcionar da maneira esperada, a biblioteca twin.macro foi utilizada.
Testes
Com React Testing Library e Jest, o projeto foi configurado para fazer uma cobertura de testes para a parte dos views, e nesses componentes componentes a cobertura foi de 100%.
Webpack
Vale salientar que toda a configuração de desenvolvimento e de build da aplicação foi feita “a mão” com webpack, babel, dentre outras configurações, não tendo sido utilizado ferramentas que preparam o ambiente automaticamente, como por exemplo “create-react-app”.
Docker
No projeto há presente um Dockerfile, para a correta execução siga os seguintes passos:
- Instalar e configurar o Docker na sua máquina.
- Com o terminal aberto na pasta root do projeto, rode o comando:
docker build -f Dockerfile -t react-dragons .
- Após terminar o processo de build, execute o seguinte comando para rodar a versão de produção do projeto na porta 3000 do localhost:
docker run -p 3000:3000 react-dragons
- Agora a aplicação estará disponível na porta 3000 do seu localhost.
Deploy
Foi feito deploy da aplicação no Heroku por meio do HerokuCLI com Docker, você pode conferir o resultado clicando aqui, ou por meio do link: https://react-dragons.herokuapp.com/
Enviroment Variables
Configuração Firebase (essas informações são concedidas nas configurações do projeto firebase)
FIREBASE_API_KEY
FIREBASE_AUTH_DOMAIN
FIREBASE_PROJECT_ID
FIREBASE_STORAGE_BUCKET
FIREBASE_MESSAGING_SENDER_ID
FIREBASE_APP_ID
Aplicação
REACT_APP_API_PATH → Caminho para chamada da api, para desenvolvimento recomenda-se colocar a url direto (ex: www.exemplo.com/api/v1/dragon), em produção recomenda-se colocar um caminho (ex: /api/dragon) pois um servidor express faz proxy com a API.
API_URL → serve apenas para produção, sendo a URL da API que o servidor fará proxy (ex: www.exemplo.com)
Como rodar o projeto
- Clonar repositório (git clone https://github.com/dedecanton/desafio-front-dragon.git)
- Entrar na pasta do projeto
- Instalar as dependências ( rodar npm i no terminal do projeto )
- Criar arquivo .env no root do projeto, e configurar as variáveis de ambiente.
- Para rodar em ambiente de desenvolvimento, rode o script npm run dev
- Para rodar em ambiente de produção, rode o script npm build, em seguida, npm start
Possível erro com login firebase
Caso você tenha configurado as informações do firebase, porém a funcionalidade de fazer login não está funcionando corretamente, provavelmente o domínio que está rodando a aplicação não tem autorização de autenticação, você pode adicioná-lo à lista de de domínios autorizados na aba “Authentication” no firebase.
