O Projeto Livraria é um frontend desenvolvido com React e Vite, projetado para consumir uma API Livraria, desenvolvida com NestJS. A aplicação proporciona uma interface moderna para o gerenciamento de Usuários, Roles (Direitos de Acesso), Produtos, Autores, Editoras e Categorias. Além disso, implementa autenticação segura via JWT (JSON Web Token), protegendo as rotas e garantindo a segurança da aplicação.
- Autenticação por Usuário e Senha: Sistema de login seguro para controlar o acesso de usuários.
- Gestão de Direitos de Acesso (Roles): Controle granular de permissões para diferentes tipos de usuário.
- Validação de Token JWT: Proteção de rotas e verificação de tokens para garantir a segurança nas requisições.
- CRUD de Usuários: Operações para criação, leitura, atualização e exclusão de perfis de usuários.
- CRUD de Produtos: Gerenciamento de produtos no catálogo da livraria.
- CRUD de Autores: Gestão de informações sobre autores.
- CRUD de Editoras: Gestão das editoras dos produtos.
- CRUD de Categorias: Organização dos produtos em diferentes categorias.
| Item | Descrição |
|---|---|
| Servidor | Node.js |
| Linguagem de Programação | TypeScript |
| Biblioteca | React.js |
| Build Tool | Vite |
| Estilização | Tailwind CSS |
Antes de iniciar, verifique se as seguintes ferramentas estão instaladas em sua máquina:
- Node.js (v16+)
- Yarn
- Backend da API NestJS: A API do backend deve estar em execução. Acesse o repositório da API aqui.
Clone o repositório para o seu ambiente local:
git clone https://github.com/usuario/livraria-react.git
cd livraria-reactInstale as dependências necessárias com o Yarn:
yarn installCertifique-se de que a URL da API NestJS está configurada corretamente em seu arquivo de configuração ou .env. O valor padrão é:
http://localhost:4000Inicie o servidor de desenvolvimento:
yarn devA aplicação estará disponível no endereço: http://localhost:5173
A estrutura do projeto segue o padrão recomendado para aplicações React com gerenciamento de estado:
src/
│
├── components/ # Componentes reutilizáveis
├── contexts/ # Gerenciamento de estado global (ex: autenticação)
├── models/ # Estrutura de dados da aplicação
├── pages/ # Páginas da aplicação
├── routes/ # Definição das rotas da aplicação
├── services/ # Integração com a API (requisições HTTP)
├── utils/ # Funções auxiliares (ex: alertas, helpers)
└── App.tsx # Componente principal da aplicação
- O usuário realiza o login utilizando e-mail e senha.
- A aplicação envia uma requisição à API, que retorna um token JWT.
- O token é armazenado na Context API para ser utilizado em futuras requisições autenticadas.
- A aplicação verifica os direitos de acesso do usuário, conforme suas permissões.
- Nas rotas protegidas, o token JWT é validado antes de conceder o acesso aos recursos.
- Token Expirado ou Inválido: Caso o token expire ou seja inválido, o usuário será redirecionado automaticamente para a página de login.
- Controle de Acesso: Se o usuário não tiver permissão para acessar uma rota, ele será redirecionado ou verá uma página de erro.
Abaixo estão algumas das funcionalidades que serão implementadas no futuro:
- Carrossel de Imagens: Exibição de imagens de produtos de forma interativa.
- Simulador de Carrinho de Compras: Função para simular a compra de produtos.
- Curtidas em Produtos: Adicionar a possibilidade de curtir produtos.
- Busca de Produtos: Implementar um campo de busca na página inicial para localizar produtos.
- Atualização de Perfil: Permitir que os usuários atualizem suas informações de perfil.
- Formulário de Contato: Implementar um formulário de contato para interação com os usuários.
- Listagem de Produtos por Categoria: Exibir produtos filtrados por categorias específicas.