Feira Solidária – Frontend

Aplicação React (Vite) que compõe a interface do projeto Feira Solidária — uma plataforma de doação e recebimento de produtos. Este repositório implementa autenticação, rotas protegidas, listagem e cadastro de itens, consumo da API e uma UI responsiva com Tailwind CSS.

---

Sumário

• Feira Solidária – Frontend
  • Sumário
  • Visão Geral
  • Protótipo (Figma)
  • Funcionalidades
  • Tecnologias
  • Equipe
  • Requisitos e Configuração
    • 1. Clonar o Repositório
    • 2. Configurar Variáveis de Ambiente
    • 3. Instalar Dependências
    • 4. Executar em Desenvolvimento
    • 5. Endpoints e Integração com Backend
  • Estrutura de Pastas
  • Padrões de Código e Commits
  • Dicas de Desenvolvimento

---

Visão Geral

O frontend oferece páginas de Login, Cadastro, Perfil, Página Inicial, Busca, Doação e Carrinho, além de componentes reutilizáveis como Navbar, Footer, Modais e Cards de Produto. A autenticação usa AuthContext com persistência em localStorage, e as chamadas HTTP utilizam Axios.

Protótipo (Figma)

👉 Acessar Protótipo

Funcionalidades

• Página Inicial (Hero) com chamada à ação e últimos itens doados
• Autenticação (login/cadastro) com rotas protegidas
• Cadastro de Produtos com seleção/adição de Categorias
• Listagem e Detalhe de Itens com modal
• Carrinho para receber doações
• UI Responsiva com Tailwind CSS

Tecnologias

• React 19 + Vite
• React Router DOM
• Axios
• Tailwind CSS
• Font Awesome / Lucide React (ícones)

Equipe

• Sabrinne — sabrinnesousa — Página Inicial
• Isis — isislavor — Página de Login
• Francisco Antonio — fcooantonio — Página de Perfil
• Sarah — sarahCavalcantev — Cadastro de Usuário
• Breno — breno-wesley — Cadastro de Itens
• João Afonso — westjoao12 — Busca de Itens
• João Guilherme — jguii — Carrinho de Itens

---

Requisitos e Configuração

1. Clonar o Repositório

git clone https://github.com/isislavor/feira-solidaria.git
cd feira-solidaria

2. Configurar Variáveis de Ambiente

Crie um arquivo .env baseado no .env.example com a URL do backend, por exemplo:

VITE_API_BASE_URL=http://localhost:3000

3. Instalar Dependências

npm install

4. Executar em Desenvolvimento

Abra dois terminais:

• Frontend

  npm run dev

• (Opcional) JSON Server — apenas se estiver usando src/services/db.json em paralelo ao backend

  npm run server

Acesse a aplicação em: http://localhost:5137 (ou porta mostrada pelo Vite).

5. Endpoints e Integração com Backend

O frontend consome a API do backend Feira Solidária. As chamadas são feitas via src/services/api.js. O token JWT é armazenado em localStorage e enviado automaticamente pelo interceptor de requisições quando existir.

---

Estrutura de Pastas

feira-solidaria/
├─ public/                # Arquivos públicos (index.html, favicon, etc.)
├─ src/
│  ├─ components/         # Componentes reutilizáveis (Navbar, Footer, Modais, Cards)
│  ├─ context/            # Contextos globais (Auth, Carrinho)
│  ├─ pages/              # Páginas (Home, Login, Cadastro, Perfil, Doação, Busca, Carrinho)
│  ├─ services/           # Integração com API (api.js, usuarioService.js, produtoService.js, categoriaService.js)
│  ├─ style/              # Estilos (Tailwind + CSS legado a migrar)
│  ├─ App.jsx             # Componente raiz de rotas
│  └─ main.jsx            # Bootstrap do React Router e Providers
└─ package.json

---

Padrões de Código e Commits

• Commits semânticos (ex.: feat:, fix:, refactor:, docs:)
• Padrões de estilo: preferir Tailwind; CSS legado será gradualmente migrado
• Componentização: priorizar componentes desacoplados e reutilizáveis

---

Dicas de Desenvolvimento

• Autenticação: use useAuth() para acessar currentUser e token. Ao logar, salve { usuario, token } no localStorage.
• Rotas Protegidas: utilize um PrivateRoute (ou guard na definição do router) para redirecionar usuários não autenticados.
• Acessibilidade: valide contraste das cores dos botões e textos, principalmente em modais e cartões.
• Responsividade: priorize classes utilitárias do Tailwind (grid, flex, gap, sm:, md:, lg:) para breaks limpos.

---

Repositório em que está o backend da Feira Solidária

https://github.com/fcooantonio/feira-solidaria-backend.git

Observação: este frontend foi projetado para trabalhar em conjunto com o backend da Feira Solidária. Certifique-se de que o backend esteja rodando e acessível na URL configurada no .env.