🛒 Loja Online — E-commerce com React + TypeScript utilizando Vite

Este projeto é uma aplicação de e-commerce simples e moderna construída com React, TypeScript e Vite. Ele permite ao usuário visualizar produtos, ver detalhes, adicionar ao carrinho e finalizar a compra.

---

🚀 Funcionalidades

• 📦 Listagem de Produtos
• 🔍 Busca por Produtos pelo Nome
• 📄 Detalhes de cada Produto
• 🛒 Carrinho de Compras em Tempo Real
• ✅ Finalização de Compra
• ♻️ Persistência Temporária com Context API
• 🎨 Estilização com CSS Modules
• ⚡ Roteamento com React Router

---

🧠 Tecnologias Utilizadas

• React — Biblioteca para construção da interface
• TypeScript — Superset do JavaScript com tipagem estática
• Vite — Bundler moderno e rápido para desenvolvimento
• React Router DOM — Gerenciamento de rotas entre páginas
• Lucide Icons — Ícones modernos para interfaces React
• Context API — Gerenciamento de estado global
• CSS Modules — Escopo de estilos local para componentes

---

📂 Estrutura de Pastas

📁 src
├── 📁 components → Componentes reutilizáveis da interface
├── 📁 context → Contexto global para gerenciamento do carrinho de compras
├── 📁 data → Dados simulados dos produtos
├── 📁 images → Imagens utilizadas na interface
├── 📁 pages → Páginas principais da aplicação
├── 📁 styles → Estilos globais e locais com CSS Modules
├── 📁 types → Definições de tipos TypeScript compartilhados
├── App.tsx → Componente raiz que organiza a estrutura da aplicação
├── main.tsx → Arquivo de entrada que inicializa o React e renderiza o App
└── globals.css → Estilos globais aplicados à aplicação inteira

✅ Como Rodar o Projeto

1. Clone o repositório:

git clone https://github.com/MatheusVelame/Rocket-VShop.git
cd Rocket-VShop

2. Instale as dependências:

pnpm install

• Obs.: 💡 Certifique-se de que você tem o PNPM instalado. Caso não tenha, instale com:

npm install -g pnpm

3. Execute a aplicação:

pnpm dev

4. Acesse a aplicação no navegador:

http://localhost:5173

📌 Observações

• Os produtos são fictícios e armazenados localmente no arquivo products.ts.
• Não há integração com backend, banco de dados ou autenticação.
• Projeto focado em boas práticas de componentização, navegação, estado global e UX.

👨‍💻 Contato

_{Matheus V. Pessoa}