almir-soulcode / bibliotech-rn1 Goto Github PK

Adicione o elemento de Tooltip do React-Bootstrap nos principais botões de ação do Bibliotech: Entrar, Cadastrar, Entrar com o Google, Logout, Adicionar livro, Editar Livro, Deletar Livro, Adicionar empréstimo, Editar empréstimo, etc.

Dica: Tooltips

• No arquivo index.html, aprimore as informações de SEO, fornecendo mais informações sobre o Bibliotech;
• Altere o favicon para utilizar o logo padrão da aplicação;
• Altere todos os logos de 192, 512 e etc com o logo padrão da aplicação, conforme o dimensionamento;
• Altere os metadados em manifest.json para corresponder as mudanças;
• Robots.txt

DICA 1: Meta Tags
DICA 2: Exploring Manifest.json
DICA 3: Explorando o robots.txt

Deve haver uma nova área no Bibliotech onde os usuários podem realizar postagem abordando o tema de literatura. Cada postagem será inserida por meio de um formulário com título, texto da postagem (limite de 128 caracteres).

Task relacionada: #41 , #43

Deve haver um link na página de login com a opção "Esqueci minha senha". Ela deve abrir uma nova página onde o usuário vai digitar o email e receber em sua caixa de entrada um email para definir uma nova senha.

DICA: Email de redefinição de senha

Use este componente para indicar a posição atual da página e a hierarquia das rotas.
DICA: Breadcumbs

Na tabela de empréstimos, adicionar um Dropdown que auxilia alterar o status do empréstimo rapidamente entre: pendente, devolvido;

Tasks relacionadas: #21

Montar na home uma visualização que indique quais livros estiveram menos em empréstimos. A visualização deve ser montada em um carrossel.

Criar feature para um novo método de login por meio do Github.

Após #7
Usando o recurso de LocalStorage, salve o tema pré-definido pelo usuário e caso ele altere, mesmo que a página seja recarregada por completo o tema escolhido será definido automaticamente.

Usando as informações fornecidas pelo contexto AuthContext, exiba o nome de exibição do usuário, e caso este seja ausente use o endereço de email apenas com a parte antes do @. Por exemplo:
[email protected] -> jose.almir

O campo de categoria deverá suportar várias categorias predefinidas que devem ser selecionadas na hora do registro. A propriedade de categoria do livro deverá ser um array a partir de então.

Com base nos campos do Bootstrap. Crie nos campos de senha a lógica de ocultar e mostrar a senha ao clicar em um botão próximo ao input.

Deve haver uma página pública no Bibliotech que mostra um quiz com algumas perguntas sobre literatura. No fim o quiz deve mostrar a pontuação total obtida pela pessoa.

Criar feature para um novo método de login por meio do Facebook.

Mesmo estando logado na aplicação podemos abrir a rota de /cadastro. Proteja ela usando o esquema similar ao que está no /login.

Após a #5, adicione uma galeria de cards que mostram estatísticas de cada livro:

• Quantos empréstimos foram realizados para aquele livro;
• Quantos desses empréstimos estão pendentes;
• Quantos desses empréstimos foram devolvidos;

DICA: Explore manipular os dados das duas coleções, filtrando, contando e etc.

Após o cadastro por meio de email/senha, podemos checar se a conta deste usuário foi verificada ou não. Caso não tenha sido o usuário não deve ter acesso ainda as rotas principais, deve ser redirecionado para uma tela onde ele poderá clicar para receber um email de confirmação (é importante deslogar o usuário em seguida para que ele logue novamente).

Adicione a página da Home, após #4, a tabela que mostra os últimos 5 empréstimos realizados e tenha uma coluna estimando o tempo de maneira escrita, conforme tabela abaixo:

Dica 1: Ordenar e limitar dados com o Cloud Firestore
Dica 2: timeago-react

Deve haver uma página pública em que os blogs inseridos em #42 , são expostos para todas pessoas visualizarem.

Tasks relacionadas: #42 , #43

Crie uma área para adicionar e visualizar novos autores conforme as áreas de livros e empréstimos, eles devem ter nome e email.

O Rodapé deverá estar presente em todas as rotas que não fazem parte da aplicação principal (Root).

Com base em #41 e #42 , crie uma página onde o usuário controla as postagens que ele mesmo fez. Ele só pode ser capaz de apagar as postagens criadas por ele mesmo.

Crie uma nova página de Ajuda para o Bibliotech, ela deve utilizar componentes da biblioteca React-Bootstrap. Ela deve ter conteúdo válido e não apenas estrutura (use lorem se necessário).

Deve haver obrigatoriamente:

• Accordions;
• Carousel;
• e etc;

Quando há muitos registros na listagem, pode se tornar complicado para o usuário navegar por tantos registros verticalmente. Adicione o recurso de paginação para que mostre uma quantidade fixa de empréstimos por vez, e seja possível avançar entre as "páginas".

DICA 1: Paginar dados com cursores de consulta
DICA 2: Pagination Bootstrap

Defina um novo contexto para definir o tema claro/escuro da aplicação globalmente. Pesquise e veja métodos comuns de como aplicar tema escuro no React. Deve haver um botão no Menu que ao ser clicado alterna entre os temas. Toda a aplicação deve manter consistência visual.

Tasks relacionadas: #30

Crie uma página de venda (estilo landing page) para o Bibliotech, esta página é pública, todos podem acessar.

Devem haver os componentes:

• Carousel,
• Cards,
• Modal e etc;

Ter um novo espaço para notificar problemas que estão acontecendo na aplicação. É um formulário com título e descrição do problema que deve ser salvo no banco de dados. Caso a #28 tenha sido feita, adicionar um novo problema ao banco de dados com título: "Rota indefinida" e a descrição seria: "Acesso a rota /das", por exemplo, ao clicar em reportar.

Após #13 , adicione a possibilidade do usuário definir uma nova foto de perfil realizando o upload de uma nova imagem.

DICA: Atualizar perfil de usuário

Possibilite na área de livros, alternar entre a visualização da tabela e uma visualização em grade de cards dos livros. Deve haver um botão que alterna entre as duas vistas.

Na área de livros, possibilite um campo de busca por título e ISBN. Ao tempo que o usuário digita as informações no campo a busca deverá ser efetuada e mostrada na tabela.

DICA: É possível utilizar os métodos de filter ou find

No momento do cadastro de um novo usuário, seja por email/senha ou outros provedores, crie um novo documento com as informações centrais daquele usuário numa coleção de usuários. O ID do documento deve ser o user.uid por questões de praticidade.

Todo sistema possui restrições quanto ao acesso aos dados, e o Firebase não é diferente. Alguns recursos só podem ser acessados se determinadas regras forem cumpridas. As regras são:

• Coleção de livros: leitura, inserção, atualização e remoção (apenas usuários autenticados);
• Coleção de empréstimos: leitura, inserção, atualização e remoção (apenas usuários autenticados);
• Upload de imagens: subir imagens (apenas usuários autenticados);
• Coleção de blogs (caso exista): leitura (todos), inserção (apenas usuários autenticados), atualização e remoção (apenas o usuário que criou o blog);
• Outras possíveis coleções: avaliar se faz sentido ela ser pública ou não.
  OBS: Para entregar esta task deve ser criado um arquivo no projeto chamado firebase.rules.

Deve haver uma área na aplicação que permita o bate-papo entre usuários em tempo real.

Aplicar à página principal da aplicação conteúdos que remetem a uma página principal da aplicação. Mostrar em cards informações gerais do sistema:

• Total de empréstimos;
• Total de livros cadastrados;
• Total de empréstimos pendentes x devolvidos;

Dica: Utilize as funções filter e propriedade length para montar as visualizações acima.

Ao invés de expandir o Collapse ao clicar no Navbar Toggle, deve se abrir um componente Offcanvas com as opções do Menu, aproximando-se mais ainda de um dispositivo móvel.

DICA: Offcanvas

Criar campo active de valor boolean, ao invés de deletar de vez do banco marcar como active = false. Lembrar que ao fazer isso, todas as listagens de livros do projeto devem ser atualizadas para filtros que considerem active = true.

DICA: Consultas simples

Com base em #19 , no cadastro de livros, o campo autor deve ser convertido para um campo de seleção para relacionar o livro e o autor dele (refatore o que for necessário).

Ao clicar na capa do livro, deve-se abrir a imagem em mais detalhes, sobrepondo a página atual, mas sem sair dela. A ideia é fazer um efeito parecido a quando abrimos como um modal, mas sem bordas apenas uma opção de fechar.

Após #16 , adicionar nova alteração no Menu para exibir a foto de perfil do usuário. Caso não exista usar um placeholder de avatar de usuário.

Mesmo logado na aplicação ao abrirmos a aplicação ou realizarmos F5, a página de login aparece por alguns milésimos de segundo. Corrigir para que haja um estado prévio de carregamento da aplicação antes de renderizar as rotas.

Esta task depende de #2 . Ao abrirmos a página é desejável mostrar uma tela introdutória do sistema (componente Splash), enquanto o status de autenticação está pendente (conforme imagem de demonstração abaixo).

Dica: Use a função setTimeout para criar um "delay" maior na tela de Splash antes de mostrar o restante da aplicação.

Crie uma riquíssima página de Not Found com recursos para voltar para alguns pontos possíveis da aplicação.

Ao clicar em Reportar deve-se abrir um modal indicando que houve a notificação para os desenvolvedores (apenas visual). Caso #20 tenha sido feita antes, leia o conteúdo da task para aplicar o envio da notificação do problema para o banco de dados.

DICA 1: Button Group
DICA 2: Modal

Você deve aplicar as alterações necessárias para que possa adicionar cores e configurações personalizadas ao seu projeto com React + Bootstrap. Essas estilizações devem estar em concordância para que o projeto seja visualmente consistente.

DICA: Material do Teachable sobre React-Boostrap

No cadastro de empréstimos adicione o campo data de entrega. Agora baseado na data de entrega do livro caso a data limite tenha passado o status do livro deve ficar vermelho com o conteúdo "atrasado"

Na área de livros, na coluna de ações, adicione um botão para ver mais detalhes sobre um livro específico. Deve-se abrir um modal de informações.

DICA: Modals

Crie uma área de perfil do usuário. Nela ele será capaz de acessar e alterar algumas informações do Authentication:

• Email;
• Senha;
• Display Name;
• Extra: Deletar a conta de usuário;

DICA 1: Atualizar perfil de usuário
DICA 2: Atualizar email
DICA 3: Atualizar senha

Quando temos um erro do Firebase, podemos tratar ele via catch e mostrar algum feedback para o usuário. Nas chamadas de autenticação em login, cadastro e etc mostre no Toast uma mensagem em português para cada erro em específico. Inspecione o erro.code, e aplique uma estratégia para reutilizar o código em diferentes páginas:

const errors = {
  "auth/wrong-password": "Senha incorreta",
  "auth/user-not-found": "Usuário inexistente",
  "auth/weak-password": "Senha fraca",
  "auth/too-many-requests": "Muitas requisições realizadas",
  "auth/email-already-in-use": "Conta já registrada com este email",
};

export const firebaseError = (code) => errors[code] ?? "Um erro ocorreu";
// Uso 
const mensagem = firebaseError("auth/wrong-password"); // "Senha incorreta"
const mensagem2 = firebaseError("codigo invalido"); // "Um erro ocorreu"

Ao clicar no nome do Livro, devemos abrir uma nova página que mostra em mais detalhe o livro em particular. Exemplo de rota com parâmetro:
/livros/Njz8jGFWBqlNkddIrM2s

Crie uma nova página de Política de Privacidade para o Bibliotech, ela deve utilizar componentes da biblioteca React-Bootstrap. Ela deve ter conteúdo válido e não apenas estrutura (use lorem se necessário).

Devem haver obrigatoriamente os componentes:

• Tabs;
• ListGroup;
• Accordions;
• e etc;

Com base em #43, implemente a possibilidade de outros usuários realizarem a ação de like em uma postagem de Blog, essa quantidade deve ser atualizada toda vez que alguém der um like.