Documentação do Projeto
Quinta do Cota Website & Loja Online / E-commerce

1. Visão Geral

O projeto Quinta do Cota consiste numa plataforma digital bilingue (🇵🇹 / 🇬🇧), que integra um website institucional e uma loja online totalmente conectada. A iniciativa tem como propósito divulgar os vinhos da Quinta do Cota, partilhar a sua história e oferta de enoturismo, e proporcionar ao utilizador uma experiência de compra direta, segura e adaptada a todos os dispositivos.

2. Tecnologias Utilizadas

3. Funcionalidades Principais

🏠 Website Institucional

• Website bilingue (PT/EN) com layout responsivo
• Páginas principais:
  • Início
  • A Nossa História
  • Região
  • Castas
  • Vinhos
  • Contacto
  • Enoturismo em desenvolvimento
  • Detalhes da Casa em desenvolvimento
• Verificação de idade, aviso de cookies, imagens em parallax e transições suaves

🛒 Loja Online (E-commerce)

• Páginas principais:
  • Loja / Lista de Vinhos
  • Loja / Detalhe do Vinho
  • Loja / Carrinho
  • Loja / Checkout em desenvolvimento
  • Loja / Página de Agradecimento
• Catálogo de vinhos, gestão de stock, carrinho e checkout
• Pagamentos com Stripe (modo de teste neste momento)
• Cálculo automático de portes por país/região e regras de envio gratuito
• Emails automáticos de confirmação de encomenda (PT/EN)
• Notificação automática ao administrador do site aquando de uma nova encomenda

📬 Formulário de Contacto

• Formulário em React integrado ao backend Django (API REST)
• Campos: Nome, Email, Assunto e Mensagem, com validação front e backend
• As mensagens submetidas são gravadas na base de dados e ficam visíveis no Painel de Administração (Django Admin)
• Notificação automática por email ao administrador com todos os detalhes da mensagem

📰 Newsletter

• Subscrição por Email com confirmação (double opt-in)
• Mensagem de boas-vindas após confirmação (PT/EN)
• Notificação automática ao administrador e gestão de subscritores no painel

👤 Área de Utilizador

• Registo e login (email / Google)
• Moradas guardadas ou edição das mesmas (por opção do utilizador) e histórico de encomendas
• Eliminação da conta, caso o utilizador assim o deseje

🧾 Painel de Administração (Django)

Visão geral do painel de administração:

• Gestão de produtos, preços, stock, regiões de envio e subscritores
• Gestão de encomendas com identificação do pagamento (Stripe ID)
• Gestão completa de portes de envio, incluindo cálculo automático de custos de entrega por país e região, com opções de envio gratuito conforme regras definidas
• Receção e gestão de mensagens de contacto (base de dados + email ao administrador)
• Envio e edição de newsletters personalizadas diretamente a partir do painel administrativo
• Definição de visibilidade da loja online — opção para mostrar ou ocultar a loja conforme o estado de desenvolvimento ou manutenção
• Possibilidade de alterar o estado da encomenda (Em preparação, Enviado, Entregue, etc.), mantendo o cliente atualizado na sua página de perfil
• Relatório de clientes com possibilidade de obter informações sobre as suas compras no website

4. Diagrama da Base de Dados

Na imagem abaixo pode ver todos os módulos criados para a construção da base de dados do website.

Clique na imagem para ver o diagrama completo e interativo da base de dados.

• 👤 - Users: gestão de utilizadores, perfis e preferências.
• 🍷 - Shop: catálogo de vinhos, preços, promoções e stock.
• 🚚 - Shipping: países, regiões e opções de envio.
• 💳 - Checkout: encomendas, pagamentos e itens associados.
• 📰 - Newsletter: subscritores e campanhas de email.
• ✉️ - Contact: mensagens submetidas via formulário de contacto.

5. Diagrama da Aplicação: Comunicação entre Base de Dados, Backend e Frontend

Na imagem abaixo é possível visualizar todos os módulos criados para a construção da base de dados do website, bem como a forma como o Backend (Django) comunica com o Frontend (React) através de REST APIs.

6. Testar Pagamentos Stripe

Nota: Em modo de teste, pode simular compras sem custos. Use qualquer data de expiração futura (ex.: 12/34) e qualquer CVC (ex.: 123).

Após um pagamento bem-sucedido, é enviado um email de confirmação ao cliente. Outro email é enviado ao administrador com uma notificação, e a encomenda é automaticamente registada no painel de administração.

No exemplo abaixo pode ver como fazer uma compra em modo de teste usando o Stripe Payments.

No exemplo abaixo pode ver como fazer uma compra usando o MB WAY com um número de telefone português.

7. Testes de Navegação

Abaixo encontra-se o diagrama de verificação de todos os links e botões do website — desde o menu principal até ao checkout, incluindo o comportamento multilíngua (PT/EN) e o rodapé.

Clique na imagem para ver a tabela completa e interativa dos casos de teste.

• 🔗 - Navbar & Links: teste de navegação entre páginas principais (Início, Sobre Nós, Região, Enoturismo, Loja, Mais).
• 📜 - Scroll & Âncoras: verificação dos botões “Saber Mais” e scroll até às secções corretas.
• ✉️ - Newsletter: validação de email + reCAPTCHA antes da submissão.
• 🍇 - Páginas de Vinho: abertura da ficha do vinho, PDF técnico e produto na loja.
• 🏡 - Enoturismo: links para casa e redirecionamento para o Airbnb (nova aba).
• 🛒 - Loja e Checkout: botões Comprar / Comprar Agora / Finalizar Compra e fluxo até ao pagamento concluído.
• 🌐 - Idiomas: troca entre PT e EN com recarregamento de textos e rotas.
• 📘 - Rodapé: links para Facebook, Política de Privacidade, Termos e Cookies.