{"id":28943099,"url":"https://github.com/gabriellglrs/dscommerce-react","last_synced_at":"2026-05-10T16:34:05.206Z","repository":{"id":296920568,"uuid":"994989193","full_name":"gabriellglrs/Dscommerce-React","owner":"gabriellglrs","description":"Projeto Frontend desenvolvido em React, integrado com a API backend do sistema DSCommerce. Interface responsiva para navegação e consumo dos dados de produtos, categorias e pedidos.","archived":false,"fork":false,"pushed_at":"2025-07-21T00:41:23.000Z","size":275,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-07-28T10:50:13.381Z","etag":null,"topics":["axios-react","react","react-hooks","react-router-dom","typescript","useeffects","usestate"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/gabriellglrs.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2025-06-02T19:48:01.000Z","updated_at":"2025-07-21T00:41:27.000Z","dependencies_parsed_at":"2025-07-01T00:29:22.398Z","dependency_job_id":null,"html_url":"https://github.com/gabriellglrs/Dscommerce-React","commit_stats":null,"previous_names":["gabriellglrs/dscommerce-react"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/gabriellglrs/Dscommerce-React","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gabriellglrs%2FDscommerce-React","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gabriellglrs%2FDscommerce-React/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gabriellglrs%2FDscommerce-React/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gabriellglrs%2FDscommerce-React/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/gabriellglrs","download_url":"https://codeload.github.com/gabriellglrs/Dscommerce-React/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gabriellglrs%2FDscommerce-React/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32863774,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-10T13:40:02.631Z","status":"ssl_error","status_checked_at":"2026-05-10T13:40:02.145Z","response_time":54,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["axios-react","react","react-hooks","react-router-dom","typescript","useeffects","usestate"],"created_at":"2025-06-23T04:41:05.811Z","updated_at":"2026-05-10T16:34:05.198Z","avatar_url":"https://github.com/gabriellglrs.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cimg width=100% src=\"https://capsule-render.vercel.app/api?type=waving\u0026color=4C89F8\u0026height=120\u0026section=header\"/\u003e\n\n\u003cimg width=\"1584\" height=\"396\" alt=\"LinkedIn cover - 29\" src=\"https://github.com/user-attachments/assets/d1c05723-0bec-4ce7-8dee-1ef8c95ebf3e\" /\u003e\n\n\u003cbr\u003e\n\u003cbr\u003e\n\n# 🛒 DSCommerce - Frontend React\n\n![React](https://img.shields.io/badge/React-18.x-61DAFB?logo=react\u0026logoColor=white)\n![TypeScript](https://img.shields.io/badge/TypeScript-5.x-3178C6?logo=typescript\u0026logoColor=white)\n![Vite](https://img.shields.io/badge/Vite-5.x-646CFF?logo=vite\u0026logoColor=white)\n![CSS3](https://img.shields.io/badge/CSS3-1572B6?logo=css3\u0026logoColor=white)\n\nUma aplicação de e-commerce moderna e responsiva desenvolvida com React e TypeScript, oferecendo uma experiência completa de compras online.\n\n## 📸 Preview\n\n![image](https://github.com/user-attachments/assets/0a09e933-4e31-46f0-b043-6a0e522d28ca)\n![image](https://github.com/user-attachments/assets/d4ae16f9-2eba-4d1d-a97f-ca355ba4b14c)\n![image](https://github.com/user-attachments/assets/18c48b75-7028-4757-a28d-d51e7a0721d8)\n\n\n## 🌟 Características\n\n### 🎯 Funcionalidades Principais\n- **Catálogo de Produtos**: Navegação intuitiva com grid responsivo\n- **Busca Inteligente**: Sistema de busca em tempo real\n- **Detalhes do Produto**: Visualização completa com categorias\n- **Carrinho de Compras**: Gerenciamento completo de itens\n- **Persistência Local**: Carrinho mantido entre sessões\n- **Design Responsivo**: Otimizado para todos os dispositivos\n\n### 🎨 Interface e Experiência\n- Design limpo e moderno\n- Cores consistentes com sistema de variáveis CSS\n- Navegação fluida com React Router\n- Feedback visual para todas as ações\n- Estados de loading e erro bem definidos\n\n### 🔧 Recursos Técnicos\n- **TypeScript**: Tipagem estática para maior segurança\n- **React Hooks**: useState, useEffect, useNavigate, useParams\n- **React Router**: Navegação SPA completa\n- **LocalStorage**: Persistência de dados do carrinho\n- **Axios**: Requisições HTTP otimizadas\n- **CSS Variables**: Sistema de design consistente\n\n## 🗂️ Estrutura do Projeto\n\n```\nsrc/\n├── components/           # Componentes reutilizáveis\n│   ├── ButtonNextPage/   # Botão carregar mais\n│   ├── ButtonPrimary/    # Botão principal\n│   ├── CatalogCard/      # Card do produto no catálogo\n│   ├── ProductDetailsCard/ # Card de detalhes do produto\n│   ├── SearchBar/        # Barra de pesquisa\n│   ├── CartNotFound/     # Estado vazio do carrinho\n│   └── headerClient/     # Cabeçalho da aplicação\n├── pages/               # Páginas da aplicação\n│   └── ClientHome/      # Layout principal\n│       ├── Catalog/     # Página do catálogo\n│       ├── Cart/        # Página do carrinho\n│       └── ProductDetails/ # Página de detalhes\n├── models/              # Interfaces TypeScript\n│   ├── Product.ts       # Modelo do produto\n│   ├── Category.ts      # Modelo da categoria\n│   └── order.ts         # Modelos de pedido\n├── services/            # Serviços da aplicação\n│   ├── product-services.ts # Serviços de produtos\n│   └── cart-services.ts    # Serviços do carrinho\n├── localstorage/        # Persistência local\n│   └── cart-repository.ts  # Repositório do carrinho\n├── routes/              # Configuração de rotas\n│   └── AppRoutes.tsx    # Definição das rotas\n└── utils/               # Utilitários\n    └── System.ts        # Constantes do sistema\n```\n\n## 🚀 Tecnologias Utilizadas\n\n### Frontend\n- **React 18** - Biblioteca principal\n- **TypeScript** - Superset do JavaScript\n- **Vite** - Build tool e dev server\n- **React Router DOM** - Roteamento\n- **Axios** - Cliente HTTP\n- **CSS3** - Estilização\n\n### Ferramentas de Desenvolvimento\n- **ESLint** - Linting de código\n- **Prettier** - Formatação de código\n- **Vite** - Hot reload e build otimizado\n\n## 📋 Pré-requisitos\n\n- Node.js (versão 18 ou superior)\n- npm ou yarn\n- Backend API rodando (DSCommerce API)\n\n## ⚙️ Instalação e Configuração\n\n### 1. Clone o repositório\n```bash\ngit clone https://github.com/seu-usuario/dscommerce-react.git\ncd dscommerce-react\n```\n\n### 2. Instale as dependências\n```bash\nnpm install\n# ou\nyarn install\n```\n\n### 3. Configure a API\nCertifique-se de que a API backend está rodando em `http://localhost:8080`\n\nPara configurar a API backend, acesse: [DSCommerce API](https://github.com/gabriellglrs/DsCommerce)\n\n### 4. Configure as variáveis de ambiente\nO arquivo `src/utils/System.ts` contém as configurações:\n```typescript\nexport const BASE_URL: string = 'http://localhost:8080';\nexport const CART_KEY: string = 'cart';\n```\n\n### 5. Execute a aplicação\n```bash\nnpm run dev\n# ou\nyarn dev\n```\n\nA aplicação estará disponível em `http://localhost:5173`\n\n## 🎮 Como Usar\n\n### Navegação Principal\n1. **Página Inicial/Catálogo**: Visualize todos os produtos disponíveis\n2. **Busca**: Use a barra de pesquisa para encontrar produtos específicos\n3. **Detalhes**: Clique em qualquer produto para ver detalhes completos\n4. **Carrinho**: Adicione produtos e gerencie suas compras\n\n### Funcionalidades do Carrinho\n- **Adicionar**: Clique em \"Comprar\" na página de detalhes\n- **Aumentar/Diminuir**: Use os botões + e - no carrinho\n- **Remover**: Diminua a quantidade até zero\n- **Limpar**: Use o botão \"Limpar Carrinho\"\n- **Continuar**: Volte às compras com \"Continuar comprando\"\n\n### Busca de Produtos\n- Digite na barra de pesquisa para filtrar produtos em tempo real\n- Use o botão 🔎 para confirmar a busca\n- Use o botão 🗙 para limpar a busca\n\n## 🎨 Personalização de Cores\n\nO sistema usa variáveis CSS para fácil personalização:\n\n```css\n:root {\n    --dsc-color-bg-primary: #e8e8e8;     /* Fundo principal */\n    --dsc-color-bg-secondary: #ffe500;    /* Fundo do header */\n    --dsc-color-btn-primary: #3483fa;     /* Botões principais */\n    --dsc-color-font-primary: #636363;    /* Texto principal */\n    --dsc-color-font-secondary: #0caf1d;  /* Preços */\n    /* ... outras variáveis */\n}\n```\n\n## 📱 Responsividade\n\nA aplicação é totalmente responsiva com breakpoints:\n- **Mobile**: \u003c 576px\n- **Tablet**: 576px - 768px\n- **Desktop**: \u003e 768px\n\n## 🔧 Scripts Disponíveis\n\n```bash\nnpm run dev          # Inicia o servidor de desenvolvimento\nnpm run build        # Gera build de produção\nnpm run preview      # Visualiza o build de produção\nnpm run lint         # Executa o linting\n```\n\n## 🤝 API Integration\n\nEste frontend consome a API DSCommerce que deve estar rodando em paralelo.\n\n### Endpoints Utilizados:\n- `GET /products` - Lista produtos com paginação e filtros\n- `GET /products/{id}` - Busca produto por ID\n\n### Configuração da API:\nCertifique-se de que a API backend está configurada e rodando. Mais informações em: [DSCommerce API Repository](https://github.com/gabriellglrs/DsCommerce)\n\n## 📊 Funcionalidades Implementadas\n\n### ✅ Completas\n- [x] Listagem de produtos\n- [x] Busca de produtos\n- [x] Detalhes do produto\n- [x] Carrinho de compras\n- [x] Persistência do carrinho\n- [x] Design responsivo\n- [x] Tratamento de erros\n- [x] Estados de loading\n\n### 🔄 Em Desenvolvimento\n- [ ] Autenticação de usuários\n- [ ] Finalização de pedidos\n- [ ] Histórico de compras\n- [ ] Avaliações de produtos\n- [ ] Wishlist\n\n## 🐛 Tratamento de Erros\n\nA aplicação possui tratamento robusto de erros:\n- **Produtos não encontrados**: Componente dedicado com mensagem amigável\n- **Carrinho vazio**: Estado visual específico\n- **Erros de API**: Alertas informativos para o usuário\n- **Rotas inválidas**: Redirecionamento automático\n\n## 🎯 Performance\n\n### Otimizações Implementadas:\n- **Lazy Loading**: Carregamento sob demanda\n- **Memoização**: Componentes otimizados\n- **Bundle Splitting**: Divisão inteligente do código\n- **CSS Optimization**: Variáveis CSS para consistência\n\n## 🔐 Segurança\n\n- **TypeScript**: Tipagem estática previne erros\n- **Sanitização**: Dados tratados antes da exibição\n- **Validação**: Verificação de dados de entrada\n\n## 🚀 Deploy\n\n### Para produção:\n```bash\nnpm run build\n```\n\nO build será gerado na pasta `dist/` pronto para deploy em qualquer servidor web.\n\n### Plataformas recomendadas:\n- **Vercel** (recomendado para projetos React)\n- **Netlify**\n- **GitHub Pages**\n- **Firebase Hosting**\n\n## 🤝 Contribuição\n\n1. Faça um fork do projeto\n2. Crie uma branch para sua feature (`git checkout -b feature/nova-feature`)\n3. Commit suas mudanças (`git commit -m 'Adiciona nova feature'`)\n4. Push para a branch (`git push origin feature/nova-feature`)\n5. Abra um Pull Request\n\n### Padrões de Commit:\n- `feat:` nova funcionalidade\n- `fix:` correção de bug\n- `docs:` documentação\n- `style:` formatação\n- `refactor:` refatoração\n- `test:` testes\n\n## 📜 Licença\n\nEste projeto está sob a licença MIT. Veja o arquivo [LICENSE](LICENSE) para mais detalhes.\n\n## 👨‍💻 Autor\n\n**Gabriel Lucas :)**\n- GitHub: [@gabriellglrs](https://github.com/gabriellglrs)\n- LinkedIn: [Gabriel Lucas](https://linkedin.com/in/gabriellglrs)\n\n## 🙏 Agradecimentos\n\n- Comunidade React pelo excelente framework\n- Contribuidores do projeto\n- Todos que testaram e deram feedback\n\n---\n\n\u003cdiv align=\"center\"\u003e\n  \u003cp\u003eFeito com ❤️ por Gabriel Lucas\u003c/p\u003e\n  \u003cp\u003e⭐ Se este projeto te ajudou, considere dar uma estrela!\u003c/p\u003e\n\u003c/div\u003e\n\n \u003cbr\u003e\n\n \u003cbr\u003e\n\u003cdiv align=\"center\"\u003e\n  \u003cimg src=\"https://github.com/user-attachments/assets/ed7208b8-6bdc-4c82-98aa-8c8cb9c1428f\" height=\"150\"/\u003e\n\u003c/div\u003e\n\n\u003cimg width=100% src=\"https://capsule-render.vercel.app/api?type=waving\u0026color=4C89F8\u0026height=120\u0026section=footer\"/\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgabriellglrs%2Fdscommerce-react","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgabriellglrs%2Fdscommerce-react","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgabriellglrs%2Fdscommerce-react/lists"}