Esta é uma solução para o desafio Noz Books.
-
Usuário e senha para logar na aplicação.
-
12341234
-
Observação: Só é possível testar o app em ambiente de desenvolvimento, pois o endpoint fornecido não é seguro (HTTPS), tornando o login impossível de ser feito.
Os usuários devem ser capazes de:
- Visualizar o layout ideal para o aplicativo, dependendo do tamanho da tela do dispositivo.
- Visualizar os estados de foco para todos os elementos interativos na página.
- O usuário não poderá entrar na página de livros sem estar logado.
- O usuário é automaticamente redirecionado para a página de livros se anteriormente ele já tiver feito login.
- Identificar campos de Input em relação à e-mail e/ou senha obrigatório.
- Identificar campos de Input em relação à senha e/ou email incorretos.
- Botão de loading ao clicar no botão de Entrar.
- Visualizar erro e sucesso ao logar e deslogar através do React-toastify
- Visualizar Esqueleto da página enquanto a requisição é feita na API.
- Visualizar os livros de forma dinâmica ao trocar as página.
- Limite de 12 livros por página.
- Visualizar o botão de troca de página ná primeira e última página, os botões deveram estar desabilitados em ambos os casos.
- Visualizar o Modal e que o mesmo abre no livro em que ele foi clicado.
- Visualizar a intereção no botão EXIT do header, ao ser clicado o mesmo é redirecionado para página de login e não pode voltar para a página de livros sem realizar novamente um login.
- Login Desktop
- Login Tablet
- Login Mobile
- Login Mobile Incorreto
- Login Mobile Validação
- Books Desktop
- Books Tablet
- Books Mobile
- Solução URL: https://github.com/fernandorcoelho/noz-books
- Site URL: https://noz-books.vercel.app/
- NextJS
- Typescript
- Axios
- React-hook-form
- Yup
- Middleware
- Nookies
- OAuth
- UseFirstRender
- Framer-motion
- Styled-Components
- Design responsivo
- React-toastify
Pretendo continuar fazendo projetos de desafios entre outros para melhorar meus conhecimentos em NextJS e TypeScript e outras tecnologias.
-
Developer Mozilla - A documentação do Developer Mozilla é essencial para compreender as funções e conseguir aplicar as mesmas no projeto.
-
Documentação do Typescript utilizada para realizar a tipagem da propriedades.
-
Utilizado para fazer o formulário de inserção dos inputs.
-
Utilização do yup para formatação do formulário.
-
NextJS Middleware - Documentação utilizada para utilização do Middleware
-
Hook-First-Render - Documentação utilizada para aplicação do hook first Render.
-
NextAuth - Documentação utilizada para aplicação da Autenticação.
- Linkedin - @michelwene