Bookstore / livraria (web / frontend side adaptation) - Imersão Alura Javascript de 100 horas

Website / frontend do projeto Livraria (Imersão Alura). Aqui está o lado da API / backend: https://github.com/Goliass/imersivo_100h_javascript_expert_full_stack__04_api_rest__nodejs_ts_postgresql_docker

• Informações adicionais / créditos: projeto web (frontend) que o professor do módulo 4 (Angelo Evangelista dos Santos) obteve do módulo 3 da Imersão, e adaptou para exemplificar uma integração mockada com o projeto visto no módulo 4 em si (backend / API).
  • O que eu fiz foi substituir a integração mockada por requisições "reais" ao backend / API, e também algumas refatorações e / ou melhorias mínimas (workarounds) em UI (interface do usuário) e UX (user experience).
    Para mais detalhes, favor conferior os commits.

Funcionalidades

• Implementadas:

  • Cadastro de usuários (Criar conta)
  • Login / Logout (botão Entrar / sair)
  • Listagem, inclusão e exclusão de categorias
  • Listagem, inclusão e exclusão de editoras (publishers)
  • Listagem, inclusão, alteração e exclusão de autores / usuários
  • Listagem, inclusão, alteração e exclusão de livros

• Não implementadas (apenas fazem parte da interface):

  • Lembrar de mim
  • Esquecimento da senha
  • Login com Google
  • Exibição de detalhes do livro
  • Termos de uso
  • Política de privacidade
  • Enviar mensagem
  • Newsletter

Como configurar / executar localmente

• Importante: para executar este projeto, será necessário ter o lado da API / backend configurada e executando localmente.
  • após configurar e executar o backend, anote seu endereço/URL (será utilizado posteriormente, ex: http://localhost:3333)

Aplicação

• instale:
  $ npm install

• crie um arquivo .env com o seguinte conteúdo:

  # URL/endereço da API / backend em execução (anotado anteriormente, abaixo exemplo)
  NEXT_PUBLIC_API_BASE_URL=http://localhost:3333
  
  

• execute a aplicação $ npm run dev

  • [info] para pará-la
    $ teclas Ctrl C

Verificando se está executando

• no terminal, no link exibido após "Local:":

  • pressione ctrl + clique no link
  • OU
  • copie o link e abra-o no navegador

• se exibir a página de login (para informar e-mail e senha), está executando corretamente.

Se cadastrando e fazendo login

• na página de login exibida (ou algo como http://localhost:3000/login), clique em "Criar conta" (http://localhost:3000/register)

• preencha os campos e clique em "Criar Conta"

• se o cadastro ocorrer com sucesso, acontecerá um redirecionamento para a página de login

• na página de login exibida (ou algo como http://localhost:3000/login), informe o email e a senha, e clique em Entrar

• se email e senha corretos, será exibida a página inicial (ou algo como http://localhost:3000/home)

Cadastrando categorias, editoras, autores (usuários) e livros

• Inicialmente um usuário cadastrado consegue apenas visualizar as categorias, editoras, usuários e livros. Para ele poder cadastrar, alterar e excluir, este precisa ser habilitado no lado da API / backend (pesquisar por "maintenance" no readme desta API).
  • Após a configuração no lado da API / backend, se o usuário estiver logado no site, basta deslogar (clicar em "Sair"), fazer login novamente e clicar nas opções do menu para as opções de inclusão, alteração e exclusão correspondentes serem exibidas.
  • Ordem de cadastros sugerida:
    • Categoria
    • Editora
    • Autor (usuário)
    • Livro

Exemplo em produção (site)

• URL: https://imersivo-100h-javascript-expert-ful.vercel.app