A Livrasilia é uma plataforma SPA de gestão de estoque e base de clientes criada para o projeto final do curso de Desenvolvimento Web Full Stack da Resilia Educação. Criada com um front-end em React.js consumindo uma API Rest desenvolvida em Node.js.
- React.js
- Npm
- Insomnia/Postman
- Hooks personalizados
- Styled-Components
- React-Router-Dom
- Animação CSS
- Axios
- Figma
- Heroku
- Vercel
- Canva
- Jira
No terminal de sua escolha, clone o repositório:
git clone https://github.com/juliapradob/projeto-modulo5.gitVá até o diretório do projeto:
cd projeto-modulo5Instale as dependências:
npm install Inicie o servidor local:
npm startO site em funcionamento pode ser acessado aqui.
Para entrar na plataforma, utilize os seguintes dados de login:
E-mail: gestao@livrasilia.com.br
Senha: livrasilia123
A aplicação será inicializada na URL http://127.0.0.1:5173/ na página de login, e as rotas de cada página foram definidas através do react-router-dom. As entidades utilizadas da API Livrasilia foram a de Clientes e Livros, os endpoints da API podem ser acessados na documentação da API e nos arquivos de requisições na pasta services.
Após realizar o login, o usuário será redirecionado a página inicial de rota /home, nesta página será selecionado qual categoria vai ser gerenciada: Clientes ou Livros.
http://127.0.0.1:5173/clientes
http://127.0.0.1:5173/livros
Ao clicar no botão Adicionar cliente o usuário é direcionado para a página:
http://127.0.0.1:5173/cria-cliente
Para o cadastro bem-sucedido de novos clientes, siga as instruções a seguir:
| Parâmetro | Tipo | Requisitos |
|---|---|---|
| nome | string |
Obrigatório. Precisa conter de 3 a 50 caracteres. |
string |
Obrigatório. Precisa estar no formato email@email.<alguma coisa> |
|
| telefone | number |
Obrigatório. Precisa ser no formato: DDD + 9 números |
| CPF | number |
Obrigatório. Deve conter 11 números |
Ao clicar no botão Adicionar livro o usuário é direcionado para a página:
http://127.0.0.1:5173/cria-livro
Para o cadastro bem-sucedido de novos livros, siga as instruções a seguir:
| Parâmetro | Tipo | Requisitos |
|---|---|---|
| nome | string |
Obrigatório. Precisa conter de 1 a 5633 caracteres |
| autor | string |
Obrigatório. Precisa conter mais que 2 caracteres |
| gênero | string |
Obrigatório. Precisa conter mais que 3 caracteres |
| valor | number |
Obrigatório. Precisa ser um número inteiro |
Para editar itens cadastrados, selecione o botão Editar em Ações que irá redirecionar o usuário para uma nova página com a seguinte composição na rota:
(URL)/edita-cliente/(número do ID)
http://127.0.0.1:5173/edita-cliente/1
Nota-se que o campo de ID não pode ser editado.
(URL)/edita-livro/(número do ID)
http://127.0.0.1:5173/edita-livro/1
Para deletar itens, basta clicar no botão Deletar em Ações na tabela. Um alerta de confirmação irá aparecer na tela e o usuário poderá confirmar ou cancelar a operação.
Caso confirmada a operação, uma mensagem de sucesso aparecerá na tela.
Você pode buscar por clientes ou livros específicos através da busca no site utilizando o atributo "nome" como referência.
Caso ocorra algum erro na aplicação um alerta de erro com uma mensagem aparecerá na tela. Em exemplo, ao cadastrar um cliente, caso algum campo não tenha sido preenchido corretamente, a seguinte mensagem irá aparecer:
Para outros erros o procedimento é o mesmo.
- Vite - Ferramenta front-end utlizada na inicialização do projeto React.
- React.js - Biblioteca javascript utlizada para interface do projeto.
- React Router - Pacote para auxiliar na navegação entre as páginas com rotas.
- Styled-components - Documentação da biblioteca que possibilita escrever códigos CSS dentro do JavaScript.
- Axios - Cliente HTTP utilizado para fazer as requisições da API.
- Node.js - Ambiente de execução JavaScript.
- Livrasilia API - API REST utilizada no back-end do projeto.