🛍️ Infostore Frontend v2.0 - E-commerce React Application

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

📋 Sobre o Projeto

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.

🎯 Principais Funcionalidades

🛒 E-commerce

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

🎨 Interface & UX

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

⚡ Performance

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()

🚀 Tecnologias

Core

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

Styling & UI

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

Development

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

📦 Instalação e Configuração

Pré-requisitos

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

Instalação

# 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

Build para Produção

# Criar build otimizado
npm run build

# A pasta build/ conterá os arquivos estáticos prontos para deploy

📁 Estrutura do Projeto

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

⚙️ Configuração

Variáveis de Ambiente

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

Backend Integration

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.

🖼️ Imagens & Assets

Estrutura de Imagens

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

Guidelines

Tipo	Dimensões	Formato	Localização
Produto	800x800px	JPG/PNG	Backend media
Categoria	1200x400px	JPG/PNG	Backend media
Logo Header	256x256px	PNG	`/public/logo.png`
Favicon	Multi-size	ICO	`/public/favicon.ico`
PWA Icons	192x192, 512x512	PNG	`/public/`

Troubleshooting Imagens

Problema: Imagens não carregam (404)

Soluções:

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

🚀 Deploy

Vercel (Recomendado)

Deploy automático com GitHub:

# Via Vercel CLI
npm install -g vercel
vercel

# Ou use botão

Guia completo: docs/VERCEL_DEPLOY.md

Outros Provedores

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

🧪 Scripts Disponíveis

# 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)

🤝 Como Contribuir

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

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

Veja CONTRIBUTE.md para detalhes.

Áreas para Contribuição

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

📊 Roadmap

v2.1.0 (Próximo Release)

v2.2.0

v3.0.0

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

🐛 Bug Reports & Feature Requests

Encontrou um bug ou tem uma sugestão?

🐛 Reportar Bug
💡 Solicitar Feature

📞 Contato & Suporte

Desenvolvedor: Anderson Cafurica

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

📄 Licença

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

🙏 Agradecimentos

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

📈 Status do Projeto

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

🌟 Mostre seu Apoio

Se este projeto te ajudou, considere:

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

Desenvolvido com ❤️ em Angola para o mundo 🇦🇴

⬆ Voltar ao topo

Name		Name	Last commit message	Last commit date
Latest commit History 162 Commits
docs		docs
src		src
.env.example		.env.example
.gitignore		.gitignore
CHANGELOG.md		CHANGELOG.md
LICENSE		LICENSE
README.md		README.md
package.json		package.json
postcss.config.js		postcss.config.js
tailwind.config.js		tailwind.config.js
vercel.json		vercel.json

License

Emicy963/Infostore

Folders and files

Latest commit

History

Repository files navigation