O Pede Roça é um projeto inovador desenvolvido pelos estudantes do curso de Desenvolvimento de Software Multiplataforma da FATEC-Matão. Iniciado em fevereiro de 2023, o projeto é fruto de um trabalho transdisciplinar que une tecnologia, empreendedorismo e impacto social.

O objetivo do Pede Roça é criar uma ponte entre pequenos produtores rurais e artesanais de alimentos e os consumidores da região. Por meio de um aplicativo moderno e acessível, o projeto visa facilitar a comercialização de produtos frescos e de qualidade, promovendo o desenvolvimento econômico local, incentivando a agricultura familiar e fortalecendo a conexão entre produtores e a comunidade.

Com foco na experiência do usuário, o aplicativo oferece uma plataforma intuitiva, onde produtores podem cadastrar seus produtos e consumidores podem explorar uma variedade de opções, realizar pedidos e receber produtos diretamente de quem produz. Além disso, o Pede Roça busca promover a sustentabilidade e valorizar a produção artesanal e regional, criando um ecossistema de consumo mais consciente e solidário.

O Pede Roça nasceu de um esforço conjunto de cinco estudantes da FATEC-Matão: Hugo Frajacomo, Gabriel Pelicolla, Daniel Manoel, Juliana, e Julia, que, em fevereiro de 2023, uniram suas habilidades para idealizar o projeto. Nos primeiros seis meses, o grupo desenvolveu as bases do aplicativo, mas enfrentou uma redução na equipe, ficando com apenas três membros: Hugo, Gabriel e Daniel.

Com dedicação e trabalho em equipe, esses três integrantes mantiveram o projeto ativo, até que, em agosto de 2024, o time foi ampliado, permitindo uma nova fase de desenvolvimento. Com a entrada de novos talentos, a equipe foi reorganizada e as responsabilidades foram distribuídas da seguinte forma:

Ana Lívia Almeida: Engenheira de Negócios – Responsável por conectar o projeto às demandas de mercado, criar estratégias de negócio e estabelecer parcerias com produtores e clientes.

https://github.com/analivalmeida

---

Hugo Frajacomo: Arquiteto de Software e Suporte à Equipe de Desenvolvimento – Atua no planejamento técnico do projeto, garantindo a eficiência do sistema e apoiando as equipes de frontend e backend.

https://github.com/HugoFrajacomo

---

Gabriel Dall’aqua: Infraestrutura e Documentação – Cuida da arquitetura de servidores, redes e do gerenciamento de ambientes, além de assegurar que a documentação do projeto esteja clara e atualizada.

https://github.com/gabrielpelicolla

---

Samanta Barbieri: Teste de Software – Realiza testes funcionais e de qualidade, garantindo que o aplicativo atenda aos requisitos e proporcione uma experiência livre de erros para os usuários.

https://github.com/GrazySamy

---

Samara Palladino: Desenvolvimento Frontend – Responsável pela interface do aplicativo, criando experiências visuais e interativas amigáveis para os usuários.

https://github.com/SamaraPalladino

---

Paulo: Desenvolvimento Backend – Trabalha no desenvolvimento e na manutenção do sistema, garantindo a integração com o banco de dados e a funcionalidade das APIs.

https://github.com/phs-santos

O front-end deste projeto foi desenvolvido com o objetivo de criar uma interface de usuário interativa e amigável para os usuários finais. A interface permite que os usuários naveguem, interajam e utilizem as funcionalidades do sistema de forma eficiente e intuitiva.

• React: Utilizado para o desenvolvimento de interfaces interativas e componentes reutilizáveis.
• Context API: Para gerenciamento de estado global.
• Axios: Para realizar chamadas HTTP e comunicação com a API backend.
• Bootstrap: Para estilização e criação de layouts responsivos.
• Firebase: Para autenticação e armazenamento de dados.

A organização das pastas no projeto segue uma estrutura lógica para facilitar a navegação e manutenção do código.

• src: Diretório principal onde o código-fonte está localizado.
  • components: Componentes reutilizáveis da interface.
  • pages: Páginas principais que utilizam os componentes.
    • AdminPages: Contém arquivos relacionados à página de administração.
    • Home: Contém arquivos relacionados à página inicial.
  • services: Serviços para lidar com chamadas à API e lógica de negócio do front-end.
  • assets: Arquivos estáticos, como imagens, ícones e fontes.
  • styles: Arquivos de estilização global.
  • hooks: Hooks personalizados para lógica de negócios e manipulação de estado.
  • context: Contextos para gerenciamento de estado global.
  • App.css: Estilização global da aplicação.
  • App.jsx: Componente raiz da aplicação.
  • index.css: Estilização global adicional.
  • main.jsx: Ponto de entrada da aplicação.
  • normalize.css: Reset de CSS para garantir consistência entre navegadores.

• Componentes: Nomeados com a primeira letra maiúscula e em formato PascalCase (ex.: Home.jsx, AdminPage.jsx).
• Estilos: Arquivos CSS correspondentes aos componentes, nomeados com o mesmo nome do componente seguido de .module.css (ex.: Home.module.css).
• Serviços: Nomeados de acordo com a funcionalidade que oferecem, em formato camelCase (ex.: autenticacao.service.js, carrinho_compra.service.js).

Os componentes são estruturados de forma hierárquica, onde componentes menores e reutilizáveis são importados e utilizados em componentes maiores e páginas.

• App.jsx: Componente raiz da aplicação, responsável por configurar o roteamento e fornecer o contexto de autenticação.
• main.jsx: Ponto de entrada da aplicação, onde o ReactDOM renderiza o componente App.

Para adicionar um novo componente:

1. Crie um novo arquivo na pasta components com o nome do componente (ex.: NovoComponente.jsx).
2. Crie um arquivo de estilo correspondente na mesma pasta (ex.: NovoComponente.module.css).
3. Importe e utilize o novo componente em uma página ou outro componente conforme necessário.

• Utilize comentários significativos em áreas complexas do código para facilitar o entendimento.
• Mantenha a consistência na nomeação de arquivos e pastas.
• Separe a lógica de negócios em serviços para manter os componentes limpos e focados na interface.

• A documentação do projeto pode ser encontrada no repositório, na pasta docs.
• Para configurar o ambiente local, siga as instruções no arquivo README.md do repositório.

• Documentação do React
• Documentação do Axios
• Documentação do Bootstrap
• Documentação do Firebase

• Descrição: Componente principal da página inicial, responsável por renderizar o conteúdo principal da interface.
• Relação e Dependência:
  • Pais: App.jsx
  • Filhos: Carrocel, Produtos, FooterDesktop, PlanoAssinatura
• Responsabilidades:
  • Renderizar o logotipo e o banner.
  • Gerenciar a exibição do modal de plano de assinatura.
  • Integrar componentes de produtos e carrossel.

• Descrição: Componente principal da página de administração, responsável por gerenciar e exibir as funcionalidades administrativas.
• Relação e Dependência:
  • Pais: App.jsx
  • Filhos: Componentes específicos de administração (não detalhados aqui).
• Responsabilidades:
  • Renderizar a interface de administração.
  • Gerenciar a navegação e as ações administrativas.

• Descrição: Componente de carrossel para exibir imagens ou produtos em rotação.
• Relação e Dependência:
  • Pais: Home.jsx
  • Filhos: Nenhum
• Responsabilidades:
  • Exibir itens em um carrossel interativo.

• Descrição: Componente para listar e exibir produtos.
• Relação e Dependência:
  • Pais: Home.jsx
  • Filhos: Nenhum
• Responsabilidades:
  • Renderizar a lista de produtos disponíveis.

• Descrição: Componente de rodapé para a versão desktop.
• Relação e Dependência:
  • Pais: Home.jsx
  • Filhos: Nenhum
• Responsabilidades:
  • Exibir informações de rodapé na versão desktop.

• Descrição: Componente de modal para gerenciar planos de assinatura.
• Relação e Dependência:
  • Pais: Home.jsx
  • Filhos: Nenhum
• Responsabilidades:
  • Exibir e gerenciar a assinatura de planos.

Para ilustrar a hierarquia e interação entre os componentes, utilize ferramentas como Figma ou Lucidchart para criar diagramas visuais. Aqui está um exemplo de como a hierarquia de componentes pode ser representada:

App.jsx │ ├── Home.jsx │ ├── Carrocel │ ├── Produtos │ ├── FooterDesktop │ └── PlanoAssinatura │ └── AdminPage.jsx

---

• Descrição: Utilizado para gerenciar o estado global da aplicação, como autenticação e dados do usuário.
• Dados Mantidos:
  • Autenticação do usuário.
  • Informações do usuário.
• Exemplo de Uso:
  • O estado de autenticação é gerenciado no AuthProvider e acessado em componentes filhos através do contexto.

• useState:
  • Utilizado para gerenciar estados locais em componentes individuais.
  • Exemplo: const [showModal, setShowModal] = useState(false); no componente Home.jsx para controlar a exibição do modal.
• useEffect:
  • Utilizado para efeitos colaterais, como chamadas de API ou manipulação do DOM.
  • Exemplo: useEffect(() => { ... }, [auth]); no componente App.jsx para monitorar mudanças na autenticação.

• AuthContext:
  • Descrição: Gerencia o estado de autenticação do usuário.
  • Uso: Fornece o estado de autenticação e funções relacionadas para componentes filhos.

• userAuthentication:
  • Descrição: Hook personalizado para lidar com a lógica de autenticação.
  • Uso: Simplifica a lógica de autenticação e pode ser reutilizado em diferentes componentes.

---

1. Tela de Login:
   • Objetivo: Permitir que o usuário faça login na aplicação.
   • Principais Elementos: Campos de e-mail e senha, botão de login, link para recuperação de senha.
   • Ações Disponíveis:
     • Inserir e-mail e senha.
     • Clicar no botão de login para autenticar.
     • Clicar no link de recuperação de senha para redirecionar à tela de recuperação.

Fluxograma:

1. Tela de Cadastro:
   • Objetivo: Permitir que novos usuários se registrem na aplicação.
   • Principais Elementos: Campos de nome, e-mail, senha, confirmação de senha, botão de cadastro
   • Ações Disponíveis:
     • Preencher os campos de cadastro.
     • Clicar no botão de cadastro para criar uma nova conta.

Fluxograma:

1. Tela Inicial (Home):
   • Objetivo: Exibir o conteúdo principal e opções de navegação.
   • Principais Elementos: Banner, carrossel de produtos, lista de categorias, rodapé.
   • Ações Disponíveis:
     • Navegar pelas categorias.
     • Visualizar detalhes dos produtos.
     • Acessar o carrinho de compras.

Fluxograma:

1. Tela de Busca:
   • Objetivo: Permitir que o usuário busque produtos específicos.
   • Principais Elementos: Campo de busca, lista de resultados.
   • Ações Disponíveis:
     • Inserir termos de busca.
     • Visualizar e selecionar produtos dos resultados.

Fluxograma:

1. Tela de Categorias:
   • Objetivo: Exibir produtos por categoria.
   • Principais Elementos: Lista de categorias, lista de produtos.
   • Ações Disponíveis:
     • Selecionar uma categoria.
     • Visualizar produtos da categoria selecionada.

Fluxograma:

1. Tela de Detalhes do Produto:
   • Objetivo: Exibir informações detalhadas sobre um produto.
   • Principais Elementos: Imagem do produto, descrição, preço, botão de adicionar ao carrinho.
   • Ações Disponíveis:
     • Adicionar o produto ao carrinho.
     • Voltar para a lista de produtos.

Fluxograma:

1. Tela de Perfil:
   • Objetivo: Permitir que o usuário visualize e edite suas informações pessoais.
   • Principais Elementos: Campos de informações pessoais, botão de editar.
   • Ações Disponíveis:
     • Editar informações pessoais.
     • Salvar alterações.

Fluxograma:

1. Tela de Favoritos:
   • Objetivo: Exibir produtos favoritos do usuário.
   • Principais Elementos: Lista de produtos favoritos.
   • Ações Disponíveis:
     • Visualizar detalhes dos produtos favoritos.
     • Remover produtos dos favoritos.

Fluxograma:

1. Tela de Carrinho de Compras:
   • Objetivo: Exibir produtos adicionados ao carrinho e permitir a finalização da compra.
   • Principais Elementos: Lista de produtos no carrinho, botão de finalizar compra.
   • Ações Disponíveis:
     • Remover produtos do carrinho.
     • Finalizar compra.

Fluxograma:

1. Tela de Histórico de Pedidos:
   • Objetivo: Exibir o histórico de compras do usuário.
   • Principais Elementos: Lista de pedidos anteriores.
   • Ações Disponíveis:
     • Visualizar detalhes dos pedidos.

Fluxograma:

---

Antes de começar, certifique-se de ter os seguintes softwares instalados em sua máquina:

• Node.js: Recomendado a versão LTS mais recente. Baixar Node.js
• npm: Geralmente vem junto com o Node.js. Verifique a versão com npm -v.
• Git: Para clonar o repositório. Baixar Git

---

Para clonar o repositório do projeto, abra o terminal e execute o seguinte comando:

bash git clone https://github.com/seu-usuario/seu-repositorio.git

---

• Nomes de Variáveis: Utilize camelCase para variáveis.

  let minhaVariavel = 10;

• Nomes de Constantes: Utilize UPPER_CASE para constantes.

  const MINHA_CONSTANTE = 100;

• Nomes de Componentes: Utilize PascalCase para componentes React.

  function MeuComponente() { return

  Olá, mundo!
  ; }

• Pastas: Utilize kebab-case para nomes de pastas. src/ components/ pages/ services/

• Componentes React: Utilize PascalCase.js para nomes de arquivos de componentes React. src/ components/ MeuComponente.js

---

Utilize branches para cada feature, bug fix, ou hotfix, com convenções de nomenclatura.

• Exemplo para feature: feature/nome-da-feature
• Exemplo para bug fix: bugfix/descricao-do-bug

Mantenha a branch main ou master sempre estável e limpa para o desenvolvimento.

---

• Inclua um título descritivo.
• Adicione uma descrição detalhada das mudanças.

• Código rodando localmente e sem erros de lint.
• Adicionar screenshots ou GIFs, se aplicável, para ilustrar as mudanças visuais.
• Todo PR deve ser revisado por pelo menos um desenvolvedor antes de ser mesclado.

---

As revisões de código são essenciais para manter a qualidade e consistência do código.

• Verificar conformidade com o guia de estilo.
• Avaliar a legibilidade e clareza do código.
• Sugerir potenciais melhorias de performance e uso de melhores práticas.

Utilize comentários no PR para fazer sugestões e solicitar mudanças, se necessário.

---