E-Commerce Frontend

🔍 Descrição

Front-end de e‑commerce construído com React e TypeScript, estruturado para ser moderno e escalável:

• Gerenciamento de estados globais com Context API (carrinho, autenticação, tema, filtros) :contentReference[oaicite:1]{index=1}
• Estilização modular e elegante usando styled-components, com suporte para theming e tipagem completa :contentReference[oaicite:2]{index=2}
• Componentização clara: componentes, contextos, hooks customizados e organização por domínio
• Totalmente em TypeScript, garantindo segurança de tipo no código, props, hooks e estilos
• Pronto para extensões: filtros, checkout, autenticação, integração com APIs REST ou GraphQL

Ideal como base ou template para lojas online com UI estilosa e lógica centralizada por Context + TypeScript.

---

🚀 Tecnologias

• React (Create React App ou Vite) + TypeScript
• Context API
• styled-components
• React Router (se houver navegação)
• Axios / Fetch para chamadas à API
• ESLint + Prettier para linting e formatação
• Husky + lint-staged (opcional)

---

📥 Instalação

1. Clone o repositório:

   git clone https://github.com/duduzinmuller/eccomerce-frontend.git
   cd eccomerce-frontend
   

Instale as dependências:

bash Copiar Editar npm install

ou

yarn install (Opcional) copie variáveis de ambiente:

bash Copiar Editar cp .env.example .env Inicie o servidor de desenvolvimento:

bash Copiar Editar npm start

ou

yarn start Acesse http://localhost:3000

🧩 Estrutura de Pastas text Copiar Editar src/ ├── components/ # Componentes reutilizáveis (cards, botões, inputs, etc.) ├── context/ # Providers Context API (ex: CartContext, AuthContext) ├── hooks/ # Hooks customizados (ex: useCart, useAuth) ├── pages/ # Páginas (Home, Produtos, Carrinho, Checkout) ├── styles/ # styled-components globais e temas ├── utils/ # Helpers e funções utilitárias └── index.tsx # Entrada da aplicação ⚙️ Uso Exemplo com Context e hooks:

tsx Copiar Editar import { CartProvider } from './context/CartContext';

function App() { return ( {/* Rotas */} ); } Exemplo de styled-component:

tsx Copiar Editar import styled from 'styled-components';

export const Button = styled.button background: ${props => props.theme.primary}; color: white; padding: 0.8rem 1.2rem; border: none; border-radius: 4px;; ⚙️ Scripts Disponíveis jsonc Copiar Editar "scripts": { "start": "react-scripts start", // inicia dev server "build": "react-scripts build", // build otimizado para produção "lint": "eslint 'src//*.{ts,tsx}'", // verifica estilo de código "lint:fix": "eslint 'src//.{ts,tsx}' --fix", // corrige automaticamente "format": "prettier --write 'src/**/.{ts,tsx,css,md}'" // formata o código }