⚡ EletroTech

🛒 E-commerce Moderno de Eletrônicos

---

📋 Índice

• 🎯 Sobre o Projeto
• ✨ Funcionalidades
• 🛠️ Tecnologias
• 🚀 Instalação e Uso
• 📱 Demonstração
• 🏗️ Arquitetura
• 📊 Performance
• 🤝 Contribuição
• 📄 Licença

---

🎯 Sobre o Projeto

EletroTech é uma aplicação de e-commerce moderna e responsiva, desenvolvida com as mais recentes tecnologias web. O projeto simula uma loja virtual completa de produtos eletrônicos, oferecendo uma experiência de usuário excepcional com interface intuitiva e funcionalidades avançadas.

🎨 Características Principais

• Design Moderno: Interface limpa e profissional com Tailwind CSS
• Responsividade Total: Funciona perfeitamente em todos os dispositivos
• Performance Otimizada: Carregamento rápido com Vite
• Componentes Reutilizáveis: Arquitetura modular e escalável
• Gerenciamento de Estado: Context API para estado global
• Roteamento Avançado: Navegação fluida com React Router

---

✨ Funcionalidades

🛍️ E-commerce Core

• ✅ Catálogo de Produtos - Listagem completa com imagens, preços e avaliações
• ✅ Sistema de Categorias - Filtros inteligentes por tipo de produto
• ✅ Carrinho de Compras - Adicionar/remover produtos com persistência
• ✅ Produtos em Destaque - Seção especial para promoções
• ✅ Sistema de Avaliações - Feedback visual com estrelas

🎛️ Painel Administrativo

• ✅ CRUD de Produtos - Criar, editar e excluir produtos
• ✅ Gerenciamento de Estoque - Controle completo de inventário
• ✅ Interface Administrativa - Dashboard intuitivo para gestão
• ✅ Validação de Formulários - Entrada de dados segura e validada

🎨 UX/UI Features

• ✅ Design Responsivo - Adaptável a qualquer tela
• ✅ Animações Suaves - Transições elegantes e fluidas
• ✅ Loading States - Feedback visual durante carregamentos
• ✅ Error Handling - Tratamento robusto de erros
• ✅ Acessibilidade - Suporte a leitores de tela

---

🛠️ Tecnologias

Frontend Core

Styling & UI

Routing & State

Development Tools

---

🚀 Instalação e Uso

Pré-requisitos

• Node.js (versão 18+ recomendada)
• npm ou yarn

1. Clone o Repositório

git clone https://github.com/vicenteaugusto9/Eletro-tech.git
cd eletrotech

2. Instale as Dependências

npm install
# ou
yarn install

3. Inicie o Servidor de Desenvolvimento

npm run dev
# ou
yarn dev

4. Acesse a Aplicação

🌐 http://localhost:5173

Scripts Disponíveis

npm run dev      # Servidor de desenvolvimento
npm run build    # Build para produção
npm run preview  # Preview do build
npm run lint     # Verificação de código

---

📱 Demonstração

🖥️ Desktop View

• Interface completa com sidebar de categorias
• Grid responsivo de produtos
• Carrinho lateral deslizante

📱 Mobile View

• Design mobile-first
• Navegação por tabs
• Carrinho em modal

🎛️ Painel Admin

• Dashboard de gerenciamento
• Formulários de produtos
• Tabela de inventário

---

🏗️ Arquitetura

src/
├── 📁 components/          # Componentes reutilizáveis
│   ├── ProductCard.jsx     # Card de produto
│   ├── ProductForm.jsx     # Formulário de produto
│   ├── ProductTable.jsx    # Tabela de produtos
│   └── ui/                 # Componentes de UI base
├── 📁 contexts/            # Gerenciamento de estado
│   ├── CartContexts.jsx    # Contexto do carrinho
│   └── ProductContext.jsx  # Contexto de produtos
├── 📁 screen/              # Páginas da aplicação
│   ├── HomePage.jsx        # Página inicial
│   ├── AdminPage.jsx       # Painel administrativo
│   └── ProductList.jsx     # Lista de produtos
├── 📁 Router/              # Configuração de rotas
│   └── path.jsx           # Definição de rotas
└── 📁 data/               # Dados estáticos
    └── productsData.js    # Base de dados de produtos

---

📊 Performance

⚡ Métricas de Performance

• First Contentful Paint: < 1.5s
• Largest Contentful Paint: < 2.5s
• Cumulative Layout Shift: < 0.1
• Time to Interactive: < 3.0s

🚀 Otimizações Implementadas

• Code Splitting: Carregamento sob demanda
• Lazy Loading: Imagens otimizadas
• Bundle Optimization: Vite para builds rápidos
• Tree Shaking: Eliminação de código não utilizado

---

🤝 Contribuição

Contribuições são sempre bem-vindas! Para contribuir:

1. Fork o Projeto

git fork https://github.com/vicenteaugusto9/Eletro-tech.git

2. Crie uma Branch

git checkout -b feature/nova-funcionalidade

3. Commit suas Mudanças

git commit -m "feat: adiciona nova funcionalidade"

4. Push para a Branch

git push origin feature/nova-funcionalidade

5. Abra um Pull Request

📋 Padrões de Commit

Seguimos Conventional Commits:

• feat: - Nova funcionalidade
• fix: - Correção de bug
• docs: - Documentação
• style: - Formatação
• refactor: - Refatoração
• test: - Testes
• chore: - Manutenção

---

📄 Licença

Este projeto está licenciado sob a MIT License - veja o arquivo LICENSE para detalhes.

📝 Uso Livre

• ✅ Uso comercial
• ✅ Modificação
• ✅ Distribuição
• ✅ Uso privado