E-commerce moderno e completo desenvolvido em React para venda de computadores e eletrônicos em Angola.

🌐 Demo ao Vivo | 📖 Documentação | 🐛 Reportar Bug | 💡 Solicitar Feature

Infostore v2.0 é uma aplicação e-commerce full-stack desenvolvida com as melhores práticas modernas de desenvolvimento web. Esta é a evolução da landing page v1.0, agora transformada em uma plataforma completa de vendas online integrada com backend Django REST.

• Catálogo Completo: Navegue por produtos com imagens, descrições e preços
• Busca Avançada: Encontre produtos rapidamente com busca em tempo real
• Filtros por Categoria: Organize produtos por tipo, marca e especificações
• Carrinho de Compras: Adicione, remova e gerencie items no carrinho
• Lista de Desejos: Salve produtos favoritos para comprar depois
• Sistema de Pedidos: Acompanhe seus pedidos do início ao fim

####👤 Autenticação & Usuário

• Registro/Login JWT: Autenticação segura com tokens
• Perfil de Usuário: Gerencie seus dados pessoais
• Histórico de Pedidos: Visualize todos os pedidos realizados
• Wishlist Persistente: Lista de desejos salva na conta

• Dark Mode: Alterne entre tema claro e escuro
• 100% Responsivo: Funciona perfeitamente em mobile, tablet e desktop
• Animações Suaves: Micro-interações que melhoram a experiência
• Loading States: Feedback visual em todas as ações
• Error Handling: Mensagens de erro amigáveis e úteis

• Lazy Loading: Imagens e rotas carregadas sob demanda
• Code Splitting: Build otimizado com chunks separados
• API Caching: Cache inteligente de requisições
• Memoization: Componentes otimizados com React.memo()

• React 18 - UI Library
• React Router v6 - Client-side routing
• Axios - HTTP Client
• Context API - State Management

• Tailwind CSS 3 - Utility-first CSS
• React Icons - Icon library
• Lucide React - Modern icons

• Create React App - Build tooling
• ESLint - Linting
• PostCSS - CSS processing

• Node.js 16.x ou superior
• npm ou yarn
• Backend Django rodando (v2.0.1+)

# Clone o repositório git clone https://github.com/Emicy963/Infostore.git cd Infostore/frontend # Instale dependências npm install # Configure variáveis de ambiente cp .env.example .env # Edite .env e configure REACT_APP_API_URL # REACT_APP_API_URL=http://localhost:8000/api/v2 # Inicie o servidor de desenvolvimento npm start

O aplicativo abrirá em http://localhost:3000

# Criar build otimizado npm run build # A pasta build/ conterá os arquivos estáticos prontos para deploy

frontend/ ├── public/ # Arquivos estáticos │ ├── favicon.ico │ ├── logo.png │ ├── logo192.png │ ├── logo512.png │ └── manifest.json │ ├── src/ │ ├── components/ # Componentes React │ │ ├── common/ # Componentes reutilizáveis │ │ │ ├── Navbar.js │ │ │ ├── Footer.js │ │ │ └── ProductCard.js │ │ └── pages/ # Páginas/Views │ │ ├── Home.js │ │ ├── ProductList.js │ │ ├── ProductDetail.js │ │ ├── Cart.js │ │ ├── Login.js │ │ └── Register.js │ │ │ ├── contexts/ # Context API │ │ ├── AuthContext.js # Autenticação │ │ ├── CartContext.js # Carrinho │ │ └── ThemeContext.js # Tema (dark mode) │ │ │ ├── services/ # API & Services │ │ └── api.js # Axios instance configurado │ │ │ ├── utils/ # Utilitários │ │ └── imageHelper.js # Helpers de imagem e formatação │ │ │ ├── App.js # Componente raiz │ ├── index.js # Entry point │ └── index.css # Estilos globais │ ├── docs/ # Documentação │ ├── CONTRIBUTE.md # Guia de contribuição │ └── VERCEL_DEPLOY.md # Guia de deploy Vercel │ ├── .env.example # Template de variáveis ├── .gitignore ├── CHANGELOG.md # Histórico de mudanças ├── package.json ├── README.md ├── tailwind.config.js # Configuração Tailwind └── vercel.json # Configuração Vercel

Crie arquivo .env na raiz do frontend:

# Backend API URL REACT_APP_API_URL=http://localhost:8000/api/v2 # Opcional: URL de media se diferente # REACT_APP_MEDIA_URL=http://localhost:8000/media/ # Opcional: Debug mode # REACT_APP_DEBUG=true

O frontend espera que o backend esteja em:

• Development: http://localhost:8000
• Production: Configure via REACT_APP_API_URL

Importante: Configure CORS no backend para aceitar requests do frontend.

• Produtos: Servidos do backend via /media/product_img/
• Categorias: Servidos do backend via /media/category_img/
• Logos/Icons: Em /public/

Problema: Imagens não carregam (404)

Soluções:

1. Verifique REACT_APP_API_URL em .env
2. Confirme backend está rodando
3. Verifique CORS no backend
4. Reinicie dev server após mudar .env

Deploy automático com GitHub:

# Via Vercel CLI npm install -g vercel vercel # Ou use botão

Guia completo: docs/VERCEL_DEPLOY.md

• Netlify: Suportado
• GitHub Pages: Requer configuração adicional
• AWS S3 + CloudFront: Suportado

# Desenvolvimento npm start # Inicia dev server (localhost:3000) # Build npm run build # Build de produção # Testes npm test # Roda testes (se configurado) # Linting npm run lint # Verifica código # Formatação npm run format # Formata código (se configurado)

Contribuições são muito bem-vindas! 🎉

1. Fork o projeto
2. Crie uma branch (git checkout -b feature/NovaFeature)
3. Commit suas mudanças (git commit -m 'feat: adicionar NovaFeature')
4. Push para branch (git push origin feature/NovaFeature)
5. Abra um Pull Request

Veja CONTRIBUTE.md para detalhes.

• 🐛 Correção de bugs
• ✨ Novas funcionalidades
• 📱 Melhorias de UX/UI
• 📖 Documentação
• 🌐 Traduções
• ⚡ Otimizações de performance

• Filtros avançados de produtos
• Comparação de produtos
• Recomendações personalizadas
• Compartilhamento de wishlist
• Profile page completo
• Order tracking em tempo real

• Chat ao vivo
• Sistema de cupons/descontos
• Programa de fidelidade
• Multi-idioma (PT/EN/FR)
• PWA offline support

• App mobile (React Native)
• Pagamentos integrados
• Sistema de notificações
• Dashboard do vendedor

Encontrou um bug ou tem uma sugestão?

• 🐛 Reportar Bug
• 💡 Solicitar Feature

Desenvolvedor: Anderson Cafurica

• 📧 Email: andersonpaulo931@gmail.com
• 💼 LinkedIn: Anderson Cafurica
• 🐙 GitHub: @Emicy963
• 📱 WhatsApp: +244 928 301 450

Este projeto está sob a licença MIT. Veja LICENSE para mais informações.

• React Team - Framework incrível
• Tailwind Labs - CSS utility framework
• Vercel - Hosting e deployment
• Unsplash - Imagens de alta qualidade
• Comunidade Open Source - Pelo suporte contínuo

• ✅ v1.0.0 - Landing page HTML (Deprecated)
• ✅ v2.0.0 - React E-commerce (Current)
• 🚧 v2.1.0 - Em desenvolvimento

Se este projeto te ajudou, considere:

• ⭐ Dar uma estrela no GitHub
• 🐛 Reportar bugs
• 💡 Sugerir melhorias
• 🤝 Contribuir com código
• 📢 Compartilhar com outros