joseaugustojasfarias / soulpet-front Goto Github PK

This project forked from almir-soulcode/soulpet-front-rn1

JavaScript 98.08% CSS 0.29% HTML 1.63%

soulpet-front's Introduction

SoulPet - FrontEnd

O projeto em questão é um site de petshop, que permite aos usuários gerenciar facilmente clientes, pets, produtos, serviços e pedidos, além de acessar um dashboard para visualizar estatísticas do site. Para isso, o site conta com rotas específicas para cada recurso, permitindo consultar, editar e deletar. Com uma interface de usuário intuitiva, o site oferece uma experiência agradável e eficiente para gerenciar todas as operações relacionadas ao petshop.

🚀 Começando

Com estas instruções, você será capaz de obter uma cópia do projeto em execução em sua máquina local para fins de desenvolvimento e teste.

Pré-requisitos;

Antes de prosseguir, certifique-se de ter instalado o seguinte:

1. GitBash - para clonar o repositório;

2. Banco de dados MySQL;

3. Back-end do SoulPet configurado;

Clonando o repositório e instalação;

Para clonar o repositório do SoulPet-FrontEnd, siga os passos abaixo:

1 - Abra o GitBash.

2 - Crie uma pasta em sua localização de preferência.

3 - Acesse a pasta usando o comando cd no GitBash.

4 - Execute o seguinte comando para clonar o repositório:

[git clone https://github.com/JoseAugustoJasfarias/soulpet-front]

5 - Depois de clonar o repositório, instale as dependências do projeto:

[npm install]

6 - Inicie o servidor local:

[npm start]

7 - Back-end rodando.

8 - Adicione dados utilizando as funções disponíveis no projeto.

Você pode adicionar dados utilizando as funções disponíveis no projeto rodando.

📦 Implantação

Tenha o back-end e adicione o projeto de em um local de hospodagem 24h com banco de dados, adquira um dominio e poderá deixar 100% disponivel para clientes.

🛠️ Construído com

React - O framework web usado
Node.js - Gerente de Dependência

✨ Dependências usadas

axios: "^1.3.6",
bootstrap: "^5.2.3",
bootstrap-icons: "^1.10.4",
date-fns: "^2.30.0",
react-bootstrap: "^2.7.4",
react-dom: "^18.2.0",
react-hook-form: "^7.43.9",
react-hot-toast: "^2.4.0",
react-router-dom: "^6.10.0",
react-scripts: "5.0.1",
web-vitals: "^2.1.4"

✒️ Autores

Mencione todos aqueles que ajudaram a levantar o projeto desde o seu início

Lucas Damasceno - Desenvolvedor full-stack/documentação - Lucas Damasceno
Jose Augusto - Desenvolvedor full-stack - José Augusto
Lais Belo - Desenvolvedora full-stack - Lais Belo
Victoria Dourado Scapini - Desenvolvedora full-stack - Victoria Scapini
Lucas Velsch - Desenvolvedora full-stack - Lucas Velsch

soulpet-front's People

Contributors

soulpet-front's Issues

[SPT-7] Criar documentação para os repositórios de front-end e back-end em Markdown.

Crie um arquivo README.md na raiz dos repositórios front-end e back-end.

Escreva uma introdução para o arquivo README.md que descreva o objetivo da aplicação, os principais recursos e funcionalidades, bem como uma visão geral da arquitetura.

Escreva uma seção de pré-requisitos para a aplicação, que descreva todas as dependências, como as bibliotecas e o ambiente de desenvolvimento, necessários para executar a aplicação.

Escreva uma seção de instalação, que descreva passo a passo como configurar e executar a aplicação, incluindo os comandos necessários para instalar as dependências, configurar as variáveis de ambiente, executar os scripts de inicialização, etc.

Escreva uma seção de utilização, que descreva como utilizar a aplicação, incluindo a lista de endpoints da API, as rotas disponíveis, os recursos e os parâmetros necessários para realizar as operações.

Adicione um arquivo LICENSE.md que especifique a licença da aplicação.

O desenvolvedor deve dar manutenção periódica a esta task para garantir ao final que ela é consistente.

[FE-17] Integrar a inserção de Pedidos

Criar uma tela com formulário onde as informações sobre o novos pedidos são preenchidas para inserção de Pedidos. Todos os campos devem ser validados adequadamente. O produtos selecionados do pedidos devem ser campos dinâmicos.

Dica: useFieldArray

Depende de: BE-20

[FE-14] Integrar a atualização de Agendamentos

Depende de: BE-16

[SPT-10] Implementar paginação de Pets

Atualiza a listagem de Pets, para que organize os pets em páginas, onde é possível avançar e retroceder, bem como selecionar uma página específica para visualizar os dados. Faça as modificações no front-end e back-end necessárias.

Depende de: FE-1

[FE-7] Integrar a inserção de Produtos

Criar uma tela com formulário onde as informações sobre o Produto são preenchidas para inserção de Produto. Todos os campos devem ser validados adequadamente.

Depende de: BE-3.

[FE-1] Integrar a listagem de Pets

Criar uma tela onde apareçam todos os Pets com a opção de ir para Editar e Deletar.
Também deve haver um link para uma página de detalhe do Pet.

[FE-5] Integrar a listagem de Produtos

Criar uma tela onde apareçam todos os Produtos com a opção de ir para Editar e Deletar. Deve fazer uso dos filtros de nome e categoria.

Depende de: BE-2.

[FE-10] Integrar a atualização de Serviços

Depende de: BE-12

[FE-21] Integrar o detalhamento de um Pedido

Crie uma nova página para detalhar as informações de um pedido, ela deve mostrar as informações do pedido, do produto e do cliente. A página deve ser linkada a opção detalhes na listagem de pedidos.

Depende de: FE-18

[SPT-1] Criar implementação para upload de foto do Pet

No model de Pet, deve ser atualizado um novo campo, não obrigatório com o link da foto do Pet. Na tela de inserir e atualizar Pet deve ser atualizado para que haja a possibilidade de escolher uma foto do sistema de arquivos para o Pet. A tela de update também deve ser ajustada.

Depende de: FE-3 e FE-4.

OBS: Utilizar Firebase Storage.

[FE-16] Integrar a remoção de Agendamentos

Depende de: FE-15 e BE-17

[FE-20] Integrar a remoção de Pedidos

Ao clicar para deletar um Pedido, o usuário deve ser indagado a confirmar a ação. Utilizar um modal para confirmar e atualize a lista de Pedidos após a remoção.

Depende de: BE-22 e FE-18

[FE-18] Integrar a listagem de Pedidos

Criar uma tela onde apareçam todos os Pedidos com as opções Editar e Deletar e Detalhes. Crie a opção filtrar por cliente, e para isso crie um campo para selecionar o nome do cliente. Além disso, crie também a opção filtrar por produto, e para isso crie um campo para selecionar o nome do produto. Crie também um botão para reiniciar os filtros.

Depende de: BE-19

[FE-19] Integrar a atualização de Pedidos

Criar uma tela com formulário onde as informações sobre o pedido são preenchidas para atualização de Pedido. Todos os campos devem ser validados adequadamente.

Depende de: BE-21

[SPT-9] Implementar uma tela de Dashboard do Sistema

Crie no front-end uma tela que mostra as quantidades de informações do sistema:

Total de clientes cadastrados;
Total de pets cadastrados;
Total de produtos cadastrados (quando existir);
Total de serviços cadastrados (quando existir);
Total de agendamentos cadastrados (quando existir).

Criar uma rota GET /dashboard que contabiliza todos estes dados para o front-end.

O desenvolvedor deve dar manutenção periódica a esta task para garantir ao final que o tratamento é consistente.

[FE-15] Integrar a listagem de Agendamentos

Criar uma tela onde apareçam todos os Agendamentos com a opção de ir para Editar e Deletar.

Depende de: BE-14

[SPT-8] Implementar seleção de cidade e estado baseado na API de localização do IBGE

Atualmente, a aplicação tem um campo de endereço que exige que os usuários digitem manualmente suas cidades e estados. Para melhorar a usabilidade e a precisão dos dados, será implementado um novo recurso que permite aos usuários selecionar suas cidades e estados a partir de uma lista de opções, que serão consumidas através da API de localização do IBGE. O campo cidade deve ficar desabilitado até que o usuário selecione o estado. As cidades devem aparecer baseado no estado selecionado.

Dica: API de localizações do IBGE

Todos os dados da tabela Cliente e quantos pets cada cliente possui;

[FE-11] Integrar a listagem de Serviços

Criar uma tela onde apareçam todos os Serviços com a opção de ir para Editar e Deletar.

Depende de: BE-10