Um catálogo de produtos moderno e responsivo desenvolvido com HTML5, CSS3 e JavaScript vanilla. O projeto oferece uma experiência completa de navegação e busca de produtos com interface intuitiva e design profissional.
O catálogo funciona totalmente no navegador e não requer instalação de dependências. Basta servir os arquivos através de um servidor web local.
- Interface moderna e responsiva
- Filtros dinâmicos em tempo real
- Modal de detalhes dos produtos
- Sistema de busca inteligente
- Busca Inteligente: Pesquise por nome, descrição ou categoria
- Filtros Avançados:
- Filtro por categoria (Eletrônicos, Roupas, Casa & Jardim, etc.)
- Faixa de preço personalizável (mínimo e máximo)
- Ordenação por nome, preço e avaliação
- Resultados em Tempo Real: Filtros aplicados instantaneamente
- Totalmente Responsivo: Adaptado para desktop, tablet e mobile
- Modal de Detalhes: Visualização completa das especificações
- Indicadores Visuais: Badges para ofertas, produtos novos e status
- Sistema de Avaliações: Exibição de estrelas e notas dos produtos
- Loading States: Indicadores visuais durante carregamento
- Design limpo e profissional
- Gradientes e sombras modernas
- Animações suaves
- Ícones Font Awesome
- Layout em grid responsivo
catalogo/
├── index.html # Página principal
├── styles.css # Estilos CSS
├── script.js # JavaScript da aplicação
├── products.json # Dados dos produtos
└── README.md # Documentação
- Navegador web moderno (Chrome, Firefox, Safari, Edge)
- Servidor web local (devido às políticas CORS para arquivos JSON)
# Navegue até o diretório do projeto
cd c:\Copilot\Github\novas\catalogo
# Python 3.x
python -m http.server 8000
# Acesse: http://localhost:8000# Instale o serve globalmente (se ainda não tiver)
npm install -g serve
# Execute o servidor
serve .
# Acesse: http://localhost:3000- Instale a extensão "Live Server" no VS Code
- Abra o projeto no VS Code
- Clique com o botão direito em
index.html - Selecione "Open with Live Server"
# PHP (se instalado)
php -S localhost:8000
# Usando o servidor IIS Express (Windows)
# Configure um site local apontando para a pasta do projetoOs produtos são armazenados no arquivo products.json e seguem esta estrutura:
{
"id": 1,
"name": "Nome do Produto",
"description": "Descrição detalhada do produto",
"category": "Categoria",
"price": 999.99,
"oldPrice": 1199.99, // Opcional - para exibir promoções
"rating": 4.5, // Avaliação de 0 a 5
"image": "URL da imagem do produto",
"badge": "sale", // "sale", "new" ou null
"inStock": true, // Status de disponibilidade
"specifications": { // Especificações técnicas (opcional)
"Marca": "Samsung",
"Modelo": "Galaxy S23",
"Cor": "Preto"
}
}- Eletrônicos: Smartphones, tablets, notebooks
- Roupas: Vestuário masculino e feminino
- Casa & Jardim: Móveis, decoração, utensílios
- Livros: Literatura, técnicos, educacionais
- Esportes: Equipamentos e acessórios esportivos
- Abra o arquivo
products.json - Adicione um novo objeto seguindo a estrutura acima
- Use um ID único (próximo número sequencial)
- Salve o arquivo - as mudanças serão refletidas automaticamente
- Pesquisa em Tempo Real: Resultados atualizados conforme você digita
- Busca Inteligente: Procura em nome, descrição e categoria
- Case Insensitive: Não diferencia maiúsculas de minúsculas
- Highlight de Resultados: Termos pesquisados destacados
- Dropdown dinâmico com todas as categorias disponíveis
- Opção "Todas as categorias" para visualizar todos os produtos
- Contador de produtos por categoria
- Campo para preço mínimo e máximo
- Validação automática de valores
- Formatação de moeda (R$) em tempo real
- Filtro combinado com outros critérios
- Padrão: Ordem original do arquivo JSON
- Nome (A-Z): Alfabética crescente
- Nome (Z-A): Alfabética decrescente
- Preço (Menor): Do menor para o maior valor
- Preço (Maior): Do maior para o menor valor
- Avaliação: Produtos mais bem avaliados primeiro
O catálogo é totalmente responsivo e se adapta a diferentes tamanhos de tela:
- Desktop: Layout com sidebar de filtros e grid de produtos
- Tablet: Layout similar ao desktop com ajustes de espaçamento
- Mobile: Layout em coluna única com filtros no topo
- Abra o arquivo
products.json - Adicione um novo objeto seguindo a estrutura existente
- Certifique-se de usar um ID único
- Salve o arquivo
As categorias são extraídas automaticamente dos produtos. Para adicionar uma nova categoria, basta incluir produtos com essa categoria no JSON.
Os estilos estão organizados no arquivo styles.css com seções bem definidas:
- Reset e base
- Header
- Filtros
- Grid de produtos
- Modal
- Responsividade
Sistema de notificações para ações do usuário (ex: adicionar ao carrinho).
Exibe informações completas do produto incluindo:
- Imagem em tamanho maior
- Descrição completa
- Especificações técnicas
- Avaliações
- Ações (adicionar ao carrinho, favoritos)
Indicadores visuais durante o carregamento dos dados.
Tratamento de erros ao carregar os produtos.
- Sistema básico de catálogo
- Filtros e busca
- Interface responsiva
- Modal de detalhes
- Sistema de avaliações
- 🛒 Sistema de carrinho de compras
- ❤️ Lista de favoritos persistente
- 📊 Filtro por faixa de avaliação
- 🔄 Comparação entre produtos
- 🔗 Compartilhamento de produtos (redes sociais)
- 📖 Histórico de produtos visualizados
- 🔔 Sistema de notificações
- 🎨 Temas escuro/claro
- 🔐 Sistema de autenticação de usuários
- ⭐ Sistema de avaliações e comentários
- 🔍 Busca avançada com filtros combinados
- 🌐 Integração com APIs de pagamento
- 📱 PWA (Progressive Web App)
- Melhorias na acessibilidade (ARIA labels)
- Testes automatizados (Jest, Cypress)
- Otimização de performance
- Internacionalização (i18n)
- Modo offline com Service Worker
- HTML5: Estrutura semântica e acessível
- CSS3: Estilos modernos com Flexbox e Grid Layout
- JavaScript ES6+: Funcionalidades interativas e manipulação do DOM
- Font Awesome 6.0: Biblioteca de ícones moderna
- Fetch API: Carregamento assíncrono de dados
- CSS Animations: Transições e animações suaves
- Vanilla JavaScript: Sem dependências de frameworks
- Modularização: Código organizado em funções específicas
- Event-Driven: Programação baseada em eventos
- Responsive Design: Mobile-first approach
- Progressive Enhancement: Funcionalidades incrementais
- LocalStorage: Persistência de preferências do usuário
- JSON: Formato de dados estruturados
- CORS-Ready: Preparado para APIs externas
- SEO-Friendly: Estrutura semântica otimizada
Contribuições são sempre bem-vindas! Veja como você pode ajudar:
- Abra uma issue descrevendo o problema
- Inclua passos para reproduzir o erro
- Mencione seu navegador e versão
- Adicione screenshots se aplicável
- Fork o projeto
- Crie uma branch para sua feature (
git checkout -b feature/AmazingFeature) - Commit suas mudanças (
git commit -m 'Add some AmazingFeature') - Push para a branch (
git push origin feature/AmazingFeature) - Abra um Pull Request
- Mantenha o código limpo e bem comentado
- Siga as convenções de nomenclatura existentes
- Teste suas mudanças em diferentes navegadores
- Atualize a documentação se necessário
- Frontend: Melhorias na interface e UX
- Performance: Otimizações de carregamento
- Acessibilidade: Suporte a tecnologias assistivas
- Documentação: Melhorias no README e comentários
- Testes: Implementação de testes automatizados
Este projeto está licenciado sob a MIT License - veja o arquivo LICENSE para detalhes.
- ✅ Uso comercial permitido
- ✅ Modificação permitida
- ✅ Distribuição permitida
- ✅ Uso privado permitido
- ❌ Sem garantias ou responsabilidades
Desenvolvido com ❤️ para demonstrar funcionalidades modernas de catálogo web
Última atualização: 17 de junho de 2025