{"id":49573640,"url":"https://github.com/pitercoding/magazine-e-commerce","last_synced_at":"2026-05-03T15:39:28.520Z","repository":{"id":286287214,"uuid":"686731176","full_name":"pitercoding/magazine-e-commerce","owner":"pitercoding","description":"Projeto E-Commerce utilizando HTML, TailwindCSS e Javascript.  EN: E-Commerce Project using HTML, TailwindCSS and Javascript.","archived":false,"fork":false,"pushed_at":"2026-03-23T14:57:18.000Z","size":971,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2026-05-03T15:39:08.682Z","etag":null,"topics":["ecommerce","html5","javascript","postcss","tailwindcss","vite"],"latest_commit_sha":null,"homepage":"https://magazine-e-commerce.vercel.app","language":"HTML","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/pitercoding.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,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2023-09-03T18:56:05.000Z","updated_at":"2026-03-23T14:57:16.000Z","dependencies_parsed_at":"2025-04-05T14:21:58.108Z","dependency_job_id":"9fb86fb8-aa6d-4cdf-93c4-e1db01ab4f47","html_url":"https://github.com/pitercoding/magazine-e-commerce","commit_stats":null,"previous_names":["pitercoding/magazineprojeto","pitercoding/magazine-e-commerce"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/pitercoding/magazine-e-commerce","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pitercoding%2Fmagazine-e-commerce","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pitercoding%2Fmagazine-e-commerce/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pitercoding%2Fmagazine-e-commerce/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pitercoding%2Fmagazine-e-commerce/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/pitercoding","download_url":"https://codeload.github.com/pitercoding/magazine-e-commerce/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pitercoding%2Fmagazine-e-commerce/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32575114,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-03T06:36:36.687Z","status":"ssl_error","status_checked_at":"2026-05-03T06:36:09.306Z","response_time":103,"last_error":"SSL_read: 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":["ecommerce","html5","javascript","postcss","tailwindcss","vite"],"created_at":"2026-05-03T15:39:27.944Z","updated_at":"2026-05-03T15:39:28.508Z","avatar_url":"https://github.com/pitercoding.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# 🛍️ Magazine E-commerce\n\nEste é um projeto de **E-commerce** desenvolvido com **Tailwind CSS** e **Vite**, simulando um site de compras online moderno.  \n\nO sistema permite navegar pelo **catálogo de produtos**, adicionar itens ao **carrinho**, realizar **checkout** com dados de pagamento e entrega, além de acompanhar o **histórico de pedidos**.\n\nO projeto foi totalmente modernizado, com **layout padronizado, identidade visual própria (logo e favicon)** e novas funcionalidades implementadas em JavaScript.\n\n## 🚀 Objetivos do Projeto\n\n- Criar um **E-commerce funcional e responsivo**, utilizando **Tailwind CSS** para estilização moderna.\n- Implementar **interatividade com JavaScript**, incluindo:\n  - Adição de produtos ao carrinho\n  - Atualização do total de compra\n  - Checkout simplificado\n  - Histórico de pedidos com layout moderno\n- Aplicar **boa arquitetura de front-end**, com separação de responsabilidades em diferentes módulos JS:\n  - `cartaoProduto.js` → renderização de cards de produtos\n  - `checkout.js` → lógica do checkout\n  - `pedidos.js` → histórico de pedidos\n  - `menuCarrinho.js` → controle do carrinho de compras\n  - `login.js` → validação para login\n  - `criar-conta.js` → cria e valida conta do usuário \n  - `utilidades.js` → funções utilitárias para persistência e renderização\n- Garantir **identidade visual consistente**, com fontes, cores, header e botões padronizados.\n\n## 🖥️ Funcionalidades Implementadas\n\n- **Catálogo de Produtos**\n  - Exibição de produtos com imagem, nome e preço.\n  - Cards responsivos que se adaptam a diferentes tamanhos de tela.\n\n- **Carrinho de Compras**\n  - Adição de produtos e cálculo automático do total.\n  - Total destacado em verde para melhor visibilidade.\n  - Layout harmonizado com o restante do site.\n\n- **Checkout**\n  - Conferência de produtos e quantidades.\n  - Formulário completo para dados de usuário, endereço, pagamento e entrega.\n  - Botão de Finalizar Compra que registra pedido no histórico.\n  - Layout moderno com cards e cores padronizadas.\n\n- **Histórico de Pedidos**\n  - Lista todos os pedidos realizados pelo usuário.\n  - Total de cada pedido destacado em verde.\n  - Layout responsivo e moderno.\n\n- **Autenticação de Usuário**\n  - Páginas de `login.html` e `criar-conta.html` integradas.\n  - Formulários de validação para criação de conta e login.\n  - Armazenamento de usuários no `localStorage`.\n  - Ícone de usuário no header direciona para login ou criação de conta.\n  - Estilo consistente com o restante do site.\n\n- **Identidade Visual**\n  - Nova **logo oficial do projeto** (PNG, alta resolução) inserida em todos os HTMLs.\n  - Novo **favicon** atualizado em todos os HTMLs.\n  - Fontes, cores e botões harmonizados em todas as páginas.\n\n## 🏗️ Estrutura do Projeto\n\n```markdown\nmagazine-e-commerce/\n├── public/\n│   ├── assets/\n│   │   ├── logo/\n│   │   │   └── logo.png\n│   │   └── img/\n│   │       ├── product-1.jpg\n│   │       ├── product-2.jpg\n│   │       └── ...\n│   └── favicon.ico\n│\n├── src/\n│   ├── cartaoProduto.js       # Renderização dos cards de produtos\n│   ├── checkout.js            # Lógica do checkout\n│   ├── criar-conta.js         # Criação de conta e validação\n│   ├── filtrosCatalogo.js     # Filtros e pesquisa do catálogo\n│   ├── login.js               # Validação e login de usuários\n│   ├── main.js                # Script principal do projeto\n│   ├── menuCarrinho.js        # Controle do carrinho\n│   ├── pedidos.js             # Histórico de pedidos\n│   ├── styles.css             # CSS principal (Tailwind)\n│   └── utilidades.js          # Funções utilitárias (localStorage, render)\n│\n├── index.html                 # Página principal / catálogo de produtos\n├── checkout.html              # Página de checkout\n├── pedidos.html               # Página de histórico de pedidos\n├── login.html                 # Página de login\n├── criar-conta.html           # Página de criação de conta\n├── package.json\n├── tailwind.config.js\n├── postcss.config.js\n├── vite.config.js\n├── .gitignore\n└── README.md\n```\n\n## 📦 Tecnologias Utilizadas\n\n- **Tailwind CSS** – Estilização moderna e responsiva.\n- **Vite** – Build tool para desenvolvimento ágil.\n- **PostCSS** – Configuração e otimização de CSS.\n- **JavaScript** – Lógica de interatividade, manipulação de DOM e armazenamento no localStorage.\n\n## 🔧 Como rodar o projeto\n``` bash\n# Clone o repositório\ngit clone https://github.com/pitercoding/magazine-e-commerce.git\n\n# Entre na pasta do projeto\ncd magazine-e-commerce\n\n# Instale as dependências\nnpm install\n\n# Inicie o servidor de desenvolvimento\nnpm run dev\n\n# Abra no navegador em\nhttp://localhost:5173\n```\n## 💡 Melhorias Futuras\n\n- Implementar **autenticação real com backend** (API ou banco de dados).\n- Adicionar **busca e filtros** avançados no catálogo.\n- Criar relatórios e analytics para pedidos.\n- Implementar testes automatizados de interface e funcionalidades.\n- Melhorias de acessibilidade e performance.\n\n## 🤝 Contribuições\nContribuições são bem-vindas!\n- Faça um fork do projeto.\n- Crie uma branch para sua feature (`git checkout -b minha-feature`).\n- Commit suas alterações (`git commit -am 'Adicionando nova feature'`).\n- Envie para a branch principal (`git push origin minha-feature`).\n- Abra um Pull Request.\n\n## 👨‍💻 Autor\nDesenvolvido por **pitercoding** como projeto de aprendizado em Front-end e modernização de UI.\n\n## 📄 Licença\nEste projeto está licenciado sob a **MIT License**.\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpitercoding%2Fmagazine-e-commerce","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpitercoding%2Fmagazine-e-commerce","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpitercoding%2Fmagazine-e-commerce/lists"}