Aplicação Web React para gerência do site da doceria VZ Dolci
Website luxuoso para a doceria VZ Dolci, especializada em doces artesanais premium como panna cotta, pão de mel, crema cotta e muito mais.
Desenvolvido com React seguindo princípios de Clean Architecture, SOLID e boas práticas de desenvolvimento profissional.
- ✨ Design luxuoso com paleta de cores em roxo profundo e dourado
- 🍰 Catálogo de produtos com descrições detalhadas, ingredientes e preços
- 📖 Seção "Sobre Nós" com história, missão e valores da VZ Dolci
- ❓ FAQ com perguntas frequentes
- 📱 Sistema de pedidos integrado com WhatsApp
- 🛒 Carrinho de compras funcional com Context API
- 📞 Informações de contato (WhatsApp, telefone, loja física)
- 📱 Design totalmente responsivo para mobile, tablet e desktop
- 🚀 SPA (Single Page Application) com React Router
- 📊 Integração com Vercel Web Analytics para análise de visitantes
- ⚡ Vercel Speed Insights para monitoramento de performance
- React 18 - Library para construção de interfaces
- React Router DOM - Navegação entre páginas
- Vite - Build tool moderna e rápida
- CSS3 - Estilização com variáveis CSS
- ESLint - Linting e qualidade de código
- Vercel Analytics - Web analytics para rastreamento de visitantes
- Vercel Speed Insights - Monitoramento de performance em tempo real
O projeto segue os princípios de Clean Architecture com separação clara de responsabilidades:
src/
├── domain/ # Camada de Domínio (Regras de Negócio)
│ ├── entities/ # Entidades do domínio
│ │ ├── Product.js # Entidade Produto
│ │ └── CartItem.js # Entidade Item do Carrinho
│ └── usecases/ # Casos de uso
│ ├── AddToCartUseCase.js
│ └── CalculateCartTotalUseCase.js
│
├── application/ # Camada de Aplicação
│ ├── contexts/ # Contextos React
│ │ └── CartContext.jsx # Gerenciamento de estado do carrinho
│ └── hooks/ # Custom Hooks
│ └── useProducts.js # Hook para gerenciar produtos
│
├── infrastructure/ # Camada de Infraestrutura
│ └── repositories/ # Repositórios de dados
│ └── ProductsRepository.js
│
└── presentation/ # Camada de Apresentação (UI)
├── components/
│ ├── common/ # Componentes comuns
│ │ ├── Header.jsx
│ │ └── Footer.jsx
│ └── features/ # Componentes específicos
│ ├── Home/
│ ├── Products/
│ ├── FAQ/
│ └── Contact/
├── pages/ # Páginas da aplicação
│ ├── HomePage.jsx
│ ├── ProductsPage.jsx
│ ├── AboutPage.jsx
│ ├── FAQPage.jsx
│ └── ContactPage.jsx
└── styles/ # Estilos globais
└── global.css
- Separação de Camadas: Domain, Application, Infrastructure, Presentation
- Dependency Rule: Dependências apontam sempre para dentro (domain não depende de nada)
- Independência de Framework: Lógica de negócio isolada do React
- Single Responsibility: Cada componente/classe tem uma única responsabilidade
- Open/Closed: Componentes abertos para extensão, fechados para modificação
- Liskov Substitution: Uso de interfaces e abstrações
- Interface Segregation: Interfaces específicas e focadas
- Dependency Inversion: Depender de abstrações, não de implementações concretas
- DRY (Don't Repeat Yourself): Reutilização de código
- KISS (Keep It Simple, Stupid): Simplicidade no design
- Separation of Concerns: Separação clara de responsabilidades
- Node.js 16+
- npm ou yarn
# Instalar dependências
npm install
# Configurar variáveis de ambiente
# Copie o arquivo .env.example para .env e preencha com seus dados
cp .env.example .env
# Executar em modo de desenvolvimento
npm run dev
# Build para produção
npm run build
# Preview da build de produção
npm run preview
# Executar linting
npm run lintA aplicação estará disponível em http://localhost:5173
O projeto utiliza variáveis de ambiente para armazenar informações sensíveis como números de telefone e WhatsApp.
-
Copie o arquivo
.env.examplepara.env:cp .env.example .env
-
Edite o arquivo
.enve preencha com suas informações reais:VITE_WHATSAPP_NUMBER=5511999999999 VITE_PHONE_DISPLAY=(11) 99999-9999 VITE_STORE_ADDRESS=Rua Exemplo, 123 - São Paulo, SP
-
Importante: O arquivo
.envnão deve ser commitado no Git. Apenas o.env.exampledeve estar no repositório. -
Para deploy na Vercel, configure as variáveis de ambiente no painel de configurações do projeto.
VITE_WHATSAPP_NUMBER: Número do WhatsApp no formato internacional (ex: 5511999999999)VITE_PHONE_DISPLAY: Número de telefone formatado para exibição (ex: (11) 99999-9999)VITE_STORE_ADDRESS: Endereço da loja física (opcional)
O projeto está configurado para deploy na Vercel e inclui o arquivo vercel.json para garantir que o roteamento client-side funcione corretamente.
Single Page Applications (SPAs) como esta usam client-side routing. Quando você acessa uma rota como /produtos diretamente ou atualiza a página (F5), o servidor precisa ser configurado para sempre retornar o arquivo index.html, permitindo que o React Router gerencie a navegação.
O arquivo vercel.json configura a Vercel para reescrever todas as rotas para /index.html:
{
"rewrites": [
{
"source": "/(.*)",
"destination": "/index.html"
}
]
}Isso resolve o erro 404 que ocorria ao:
- Acessar uma rota diretamente (ex:
https://seusite.com/produtos) - Atualizar a página (F5) em qualquer rota diferente da home
Para outras plataformas de hospedagem, você precisará configurar rewrites/redirects similares:
Netlify: Crie um arquivo _redirects na pasta public:
/* /index.html 200
Apache: Adicione ao .htaccess:
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html [L]
</IfModule>Nginx: Configure no arquivo de configuração:
location / {
try_files $uri $uri/ /index.html;
}{
id: number,
name: string,
description: string,
price: number,
ingredients: string,
story: string,
emoji: string
}{
product: Product,
quantity: number
}O site utiliza uma paleta luxuosa e sofisticada definida em CSS Variables:
- --primary-color: #5A2A83 (Roxo Elegante - sofisticação e luxo)
- --secondary-color: #D4AF37 (Dourado - luxo e prestígio)
- --accent-color: #B2AC83 (Khaki Suave - elegância e requinte)
- --dark-bg: #2C1B2E (Roxo Escuro - rico e sofisticado)
- --light-bg: #FFFCEC (Creme Claro - suavidade e leveza)
Edite src/infrastructure/repositories/ProductsRepository.js e adicione novos produtos ao array.
Atualize os números de telefone e WhatsApp editando o arquivo .env:
VITE_WHATSAPP_NUMBER=5511999999999
VITE_PHONE_DISPLAY=(11) 99999-9999
VITE_STORE_ADDRESS=Seu endereço aquiAjuste as variáveis CSS em src/presentation/styles/global.css
- Crie o componente da página em
src/presentation/pages/ - Adicione a rota em
src/App.jsx - Atualize o Header com o novo link
Para adicionar testes ao projeto:
# Instalar dependências de teste
npm install --save-dev @testing-library/react @testing-library/jest-dom vitest
# Executar testes
npm run test- Adicionar testes unitários e de integração
- Implementar backend real com API REST
- Adicionar autenticação de usuários
- Implementar sistema de pagamento
- Adicionar imagens reais dos produtos
- Implementar sistema de avaliações
- Adicionar internacionalização (i18n)
GPL-3.0 License - Veja o arquivo LICENSE para mais detalhes.