Uma aplicação e-commerce completa e responsiva, desenvolvida com as mais modernas tecnologias do mercado.
🚀 Ver Demo • 📋 Funcionalidades • 🛠️ Tecnologias • ⚡ Instalação
O Shop.Net é um e-commerce moderno e completo que demonstra minhas habilidades em desenvolvimento frontend. A aplicação integra com a FakeStore API para simular um ambiente real de produção, oferecendo uma experiência de usuário fluida e intuitiva.
- 🔥 Performance Otimizada: Construído com Vite para builds ultra-rápidos
- 📱 Design Responsivo: Interface adaptável para todos os dispositivos
- 🎨 UI/UX Moderno: Design clean e profissional com Tailwind CSS
- ⚡ Type Safety: 100% TypeScript para código mais robusto
- 🔄 Estado Gerenciado: React Hooks para controle eficiente do estado
- 🌐 API Integration: Integração completa com REST API externa
| Página Inicial | Detalhes do Produto | Carrinho de Compras |
|---|---|---|
# Clone e execute para ver a magia acontecer! ✨
git clone https://github.com/jocelymarques/shopNet.git
cd shopNet
npm install
npm run dev- ✅ Catálogo de Produtos: Listagem dinâmica com filtros
- ✅ Detalhes do Produto: Página dedicada com informações completas
- ✅ Carrinho de Compras: Adicionar, remover e gerenciar produtos
- ✅ Sistema de Avaliações: Exibição de ratings e comentários
- ✅ Navegação Intuitiva: Routing com React Router DOM
- ✅ Design Responsivo: Mobile-first approach
- ✅ Animations Suaves: Hover effects e transições
- ✅ Loading States: Feedback visual durante carregamentos
- ✅ Notificações: Alerts elegantes para ações do usuário
- ✅ SEO Friendly: Estrutura otimizada para buscadores
- ✅ API REST Integration: Comunicação com FakeStore API
- ✅ Error Handling: Tratamento robusto de erros
- ✅ Performance: Otimizações de rendering e memória
- ✅ Code Splitting: Carregamento otimizado de componentes
- ✅ TypeScript: Tipagem estática para maior confiabilidade
{
"⚛️ React": "18.3.1",
"🔷 TypeScript": "5.6.2",
"⚡ Vite": "5.4.8",
"🎨 Tailwind CSS": "3.4.13",
"🧭 React Router": "6.26.2"
}{
"🔍 ESLint": "9.11.1",
"📦 npm": "Package Manager",
"🚀 Vite": "Build Tool",
"🎯 PostCSS": "CSS Processing"
}- 🌐 FakeStore API: Dados de produtos e carrinho
- 📡 Fetch API: Requisições HTTP nativas
- 🔄 React Hooks: useState, useEffect, useNavigate
- Node.js 18+ ⚙️
- npm ou yarn 📦
- Git 🔀
# 1️⃣ Clone o repositório
git clone https://github.com/jocelymarques/shopNet.git
# 2️⃣ Navegue para o diretório
cd shopNet
# 3️⃣ Instale as dependências
npm install
# 4️⃣ Inicie o servidor de desenvolvimento
npm run dev
# 🎉 Aplicação rodando em http://localhost:5173npm run dev # 🚀 Servidor de desenvolvimento
npm run build # 📦 Build para produção
npm run preview # 👀 Preview do build
npm run lint # 🔍 Verificação de códigoshopNet/
├── 📁 src/
│ ├── 📁 components/ # Componentes reutilizáveis
│ │ ├── 🎴 CardProduct.tsx
│ │ └── 🧭 Navbar.tsx
│ ├── 📁 pages/ # Páginas da aplicação
│ │ ├── 🏠 home.tsx
│ │ ├── 📦 product.tsx
│ │ └── 🛒 cart.tsx
│ ├── 🎨 App.css
│ ├── 📱 index.css
│ ├── ⚛️ App.tsx
│ └── 🚀 main.tsx
├── 📦 package.json
├── ⚙️ vite.config.ts
├── 🔷 tsconfig.json
└── 📖 README.md
- 🔐 Sistema de Autenticação
- 💳 Integração com Payment Gateway
- 🔍 Sistema de Busca Avançada
- ⭐ Sistema de Favoritos
- 📧 Newsletter e Notificações
- 🌍 Internacionalização (i18n)
- Unit Tests com Jest
- Integration Tests com Testing Library
- E2E Tests com Cypress
Jocelymarques - Desenvolvedor Frontend apaixonado por criar experiências digitais incríveis.
- Frontend: React, TypeScript, JavaScript, HTML5, CSS3
- Styling: Tailwind CSS, SASS, Styled Components
- Tools: Vite, Webpack, Git, npm/yarn
- APIs: REST, GraphQL, Fetch API
- Metodologias: Mobile-first, Component-driven development
- 🌐 GitHub: @jocelymarques
- 💼 LinkedIn: linkedin.com/in/jocelymarques
- 📧 Email: jocelymarques@email.com
Este projeto está sob a licença MIT. Veja o arquivo LICENSE para mais detalhes.
⭐ Se você gostou do projeto, não esqueça de dar uma estrela! ⭐
