Loja Virtual

Uma aplicação de e-commerce simples desenvolvida com React para demonstrar um conceito de layout para uma loja online.

🛍️ Visão Geral

Este projeto é uma loja virtual minimalista com funcionalidades essenciais de comércio eletrônico, incluindo catálogo de produtos, carrinho de compras e navegação entre páginas.

🚀 Funcionalidades

• Catálogo de Produtos: Visualização de produtos com imagens, descrições e preços
• Carrinho de Compras: Sistema de adição de produtos ao carrinho com contador em tempo real
• Navegação: Sistema de rotas entre página inicial e produtos
• Interface Responsiva: Design moderno com CSS customizado
• Preços em BRL: Formatação de preços em Real Brasileiro

🛠️ Stack Tecnológico

Frontend

• React 19.2.0 - Biblioteca principal de UI
• React Router DOM 7.13.0 - Sistema de roteamento
• Vite 7.3.1 - Build tool e servidor de desenvolvimento
• FontAwesome - Ícones para a interface

📁 Estrutura do Projeto

loja/
├── public/                 # Arquivos estáticos
├── src/
│   ├── components/         # Componentes React reutilizáveis
│   │   ├── Card.jsx       # Card de produto individual
│   │   ├── Footer.jsx     # Rodapé da aplicação
│   │   ├── Header.jsx     # Cabeçalho com logo e carrinho
│   │   └── Navbar.jsx     # Barra de navegação
│   ├── context/           # Context API para estado global
│   │   └── CartContext.jsx # Gerenciamento do carrinho
│   ├── data/              # Dados estáticos da aplicação
│   │   └── products.json  # Catálogo de produtos
│   ├── pages/             # Páginas da aplicação
│   │   ├── Home.jsx       # Página inicial
│   │   └── Products.jsx   # Página de produtos
│   ├── App.css           # Estilos globais
│   ├── App.jsx           # Componente principal com rotas
│   ├── index.css         # Estilos base
│   └── main.jsx          # Ponto de entrada da aplicação
├── package.json          # Dependências e scripts
├── vite.config.js        # Configuração do Vite
└── README.md            # Documentação do projeto

🏗️ Arquitetura

Componentes Principais

• App.jsx: Componente raiz que configura o React Router e estrutura geral
• Header.jsx: Cabeçalho com logo, navegação e ícone do carrinho com contador
• Card.jsx: Componente individual de produto com funcionalidade de adicionar ao carrinho
• Products.jsx: Página que renderiza o grid de produtos a partir do JSON

Gerenciamento de Estado

• CartContext: Context API para gerenciar o estado do carrinho globalmente
• useState: Hooks locais para gerenciamento de quantidade nos cards

Dados

• products.json: Arquivo JSON com 6 produtos de exemplo (id, nome, imagem, descrição, preço)

📦 Instalação

1. Clone o repositório:

git clone <URL-DO-REPOSITORIO>
cd loja

2. Instale as dependências:

npm install

3. Inicie o servidor de desenvolvimento:

npm run dev

4. Abra o navegador no endereço http://localhost:5173

🎯 Scripts Disponíveis

• npm run dev - Inicia servidor de desenvolvimento
• npm run build - Build para produção
• npm run preview - Preview do build de produção

🎨 Características da Interface

• Design Limpo: Interface minimalista com foco na usabilidade
• Grid Responsivo: Layout adaptativo para diferentes tamanhos de tela
• Feedback Visual: Badge no carrinho mostra quantidade de itens
• Validação de Input: Validação para quantidade positiva nos produtos
• Formatação BRL: Preços formatados automaticamente em Real Brasileiro

🔄 Fluxo da Aplicação

1. Página Inicial: Mensagem de boas-vindas com link para produtos
2. Navegação: Clique em "Produtos" no menu para acessar o catálogo
3. Catálogo: Visualização de todos os produtos em grid
4. Adicionar ao Carrinho: Selecionar quantidade e adicionar produtos
5. Contador Atualizado: Badge no carrinho atualiza em tempo real

�️ Roadmap do Projeto

✅ Versão 1.0 - Concluída

• Catálogo de produtos básico
• Sistema de carrinho de compras
• Página de checkout com gerenciamento de itens
• Interface responsiva
• Navegação entre páginas