Minimalismo inspirado en Apple.com • Animaciones fluidas • Experiencia premium
- Persistencia automática en localStorage
- Contador dinámico con animaciones
- Estado reactivo con Zustand
- Glassmorphism y efectos de backdrop-blur
- Gradientes animados y microinteracciones
- Responsive design mobile-first
- Paleta de colores inspirada en marcas premium
- Vite + SWC para builds ultra-rápidos
- Code splitting automático
- Lazy loading de componentes
- PWA ready para experiencia nativa
- Framer Motion para transiciones suaves
- Hover effects interactivos
- Loading states elegantes
- 3D transforms y efectos visuales
- Node.js 18+
- npm 9+
# 1. Clonar el repositorio
git clone https://github.com/tu-usuario/nexusshop.git
cd nexusshop
# 2. Instalar dependencias del frontend
npm run install-frontend
# 3. Ejecutar en modo desarrollo
npm run dev
# 🌐 Abrir http://localhost:3000- Fork este repositorio
- Conecta tu repo con Vercel
- ¡Despliega automáticamente! ✨
| Tecnología | Versión | Propósito |
|---|---|---|
| React | 18.2.0 | UI Framework |
| TypeScript | 5.3.3 | Type Safety |
| Vite | 5.0.8 | Build Tool |
| TailwindCSS | 3.4.0 | Styling |
| Framer Motion | 10.16.5 | Animations |
| Zustand | 4.4.7 | State Management |
| Lucide React | 0.293.0 | Icons |
/* Brand Colors */
Primary: #3a86ff /* Blue */
Secondary: #8338ec /* Purple */
Accent: #06b6d4 /* Cyan */
/* Gradients */
Hero: linear-gradient(135deg, #3a86ff, #8338ec)
Background: linear-gradient(135deg, #f0f9ff, #faf5ff)- Espaciado: Grid de 8px
- Tipografía: Inter (sistema)
- Bordes: Radius de 8px-24px
- Sombras: Glassmorphism + depth layers
- ✅ Carrito interactivo con contador
- ✅ Animaciones fluidas en hover
- ✅ Producto demo con ratings
- ✅ Header sticky con blur effect
- ✅ Responsive design completo
- 🔐 Sistema de autenticación
- 🎨 Visualizador 3D de productos
- 🤖 Recomendaciones IA
- 💳 Integración con Stripe
- 🔍 Búsqueda avanzada
NexusShop/
├── 📁 apps/frontend/ # React App Principal
│ ├── 📁 src/
│ │ ├── 📁 components/ # Componentes reutilizables
│ │ ├── 📁 stores/ # Zustand stores
│ │ ├── 📁 utils/ # Utilidades
│ │ └── 📄 App.tsx # Componente principal
│ ├── 📄 package.json
│ ├── 📄 vite.config.ts
│ └── 📄 tailwind.config.js
├── 📄 package.json # Scripts principales
├── 📄 vercel.json # Configuración Vercel
└── 📄 README.md
# Desarrollo
npm run dev # Inicia servidor desarrollo
# Build
npm run build # Build para producción
npm run preview # Preview del build
# Utilidades
npm run install-frontend # Instala dependencias
npm run clean # Limpia node_modules- Push to main → Auto deploy a producción
- Pull Request → Preview deployment
- Custom domains disponibles
# Para funcionalidades avanzadas
VITE_STRIPE_PUBLISHABLE_KEY=pk_test_...
VITE_API_URL=https://api.nexusshop.com- Fork el proyecto
- Create una rama feature (
git checkout -b feature/amazing-feature) - Commit tus cambios (
git commit -m 'Add amazing feature') - Push a la rama (
git push origin feature/amazing-feature) - Open un Pull Request
Este proyecto está bajo la Licencia MIT - ver el archivo LICENSE para detalles.
- 🔐 Autenticación completa
- 🛒 Checkout flow
- 📱 PWA installation
- 🎨 Visualizador 3D real
- 🤖 IA recommendations
- 📊 Analytics dashboard
