Tiendas fisicas Altas comisiones tienda propia escaparate visual para la marca
AGILE
CORE
Naturalidad del equipo Proactividad Colaboración con el cliente ESCUCHA Adaptabilidad
SVG
- Type: E-commerce platform
- Frontend: React 19 + TypeScript + Vite + TailwindCSS Backend: Express.js + MySQL + Firebase Auth
Key Features Summary | Feature | Implementation | |---------|----------------|--------| | E-commerce catalog | React components + TanStack Query | Shopping cart | Session-based reservations | Checkout flow | Stripe Elements integration | User authentication | Firebase Auth (email, Google) | Admin dashboard | Multi-tab interface with charts | Artwork management | CRUD + image upload + location | Order tracking | Status updates + emails | 3D models | Three.js + React Three Fiber | Analytics | Recharts + heatmaps | Dark mode | Next Themes | Mobile responsive | TailwindCSS breakpoints
Backend
Docker, Auto-deploy, MySQL
Frontend
Auto-deploy, Git integration, CDNlo 2
Media
Docker, Auto-deploy, MySQL
Flujo de compra
1. User Browse PublicHome → ShopPage → ObraDetailPage 2. Add to Cart ObraActions → CartContext.addToCart() → LocalStorage 3. View Cart CartPage → CartContext.items → Display items 4. Checkout CheckoutPage → AuthContext (check login) ├── Si NO auth: ShippingForm (guest checkout) └── Si auth: AddressSelector (saved addresses) 5. Payment PaymentForm (Stripe) → useStripePayment() ├── Validate card ├── Process payment └── Create order (API) 6. Order Creation ordersService.createOrder() ├── Save to database ├── Update obras status ├── Clear cart └── Show OrderSuccess 7. Email Notification EmailJS → Send confirmation to user
🔄 FLUJO COMPLETO DE VALIDACIÓN
1. Frontend envía datos → POST /api/obras ↓ 2. Backend recibe → obrasController.ts ↓ 3. Llama a → obrasService.createObra(req.body) ↓ 4. Zod valida → obraInputSchema.parse(body) ← AQUÍ ↓ ├─ ✅ Si es válido → Continúa al repo.insertObra() │ └─ Guarda en MySQL │ └─ ❌ Si NO es válido → Lanza ZodError ↓ errorHandler.ts lo captura ↓ Responde HTTP 400 con detalles del error
Usuario escribe en formulario ↓ 1. HTML validation (required, pattern, type) ↓ 2. useFormValidation (onBlur, onChange) ↓ (si hay errores, muestra mensaje) Usuario hace submit ↓ 3. Stripe valida tarjeta (si es pago) ↓ Frontend envía a API ↓ 4. authMiddleware verifica token ↓ 5. requireAdmin verifica rol (si es admin endpoint) ↓ 6. Zod valida estructura de datos ↓ 7. Lógica de negocio (Stripe payment, disponibilidad) ↓ Guardar en BD
Archivo principal: /src/components/Checkout/ShippingForm.tsx Validaciones HTML encontradas: | Campo | Línea | Validación HTML | |---------------|-------|--------------------| | Email | 38 | type="email" | | Email | 44 | required | | Nombre | 61 | required | | Teléfono | 71 | type="tel" | | Teléfono | 77 | required | | Calle | 95 | required | | Número Ext. | 112 | required | | Código Postal | 135 | maxLength={5} | | Código Postal | 136 | pattern="[0-9]{5}" | | Código Postal | 138 | required | | Colonia | 155 | required | | Ciudad | 172 | required | | Estado | 186 | required |
LO IMPENSADO Una teoría de la cognición no consciente y los ensamblajes cognitivos humano-técnicos N. Katherine Hayles COLECCIÓN: FUTUROS PRÓXIMOS TRADUCCIÓN: ALEJANDRA LÓPEZ GABRIELIDIS, LOURDES LÓPEZ GABRIELIDIS Y TONI NAVARRO ISBN: 978-987-8272-26-9 PÁGINAS: 352 AÑO: 2024
GRACIAS
El equipo Proactidad Colaboración con el cliente ESCUCHA Adaptabilidad
Ricardo bauve
Created on October 28, 2025
Start designing with a free template
Discover more than 1500 professional designs like these:
View
Randomizer
View
Timer
View
Find the pair
View
Hangman Game
View
Dice
View
Scratch and Win Game
View
Create a Word Search
Explore all templates
Transcript
Tiendas fisicas Altas comisiones tienda propia escaparate visual para la marca
AGILE
CORE
Naturalidad del equipo Proactividad Colaboración con el cliente ESCUCHA Adaptabilidad
SVG
Key Features Summary | Feature | Implementation | |---------|----------------|--------| | E-commerce catalog | React components + TanStack Query | Shopping cart | Session-based reservations | Checkout flow | Stripe Elements integration | User authentication | Firebase Auth (email, Google) | Admin dashboard | Multi-tab interface with charts | Artwork management | CRUD + image upload + location | Order tracking | Status updates + emails | 3D models | Three.js + React Three Fiber | Analytics | Recharts + heatmaps | Dark mode | Next Themes | Mobile responsive | TailwindCSS breakpoints
Backend
Docker, Auto-deploy, MySQL
Frontend
Auto-deploy, Git integration, CDNlo 2
Media
Docker, Auto-deploy, MySQL
Flujo de compra
1. User Browse PublicHome → ShopPage → ObraDetailPage 2. Add to Cart ObraActions → CartContext.addToCart() → LocalStorage 3. View Cart CartPage → CartContext.items → Display items 4. Checkout CheckoutPage → AuthContext (check login) ├── Si NO auth: ShippingForm (guest checkout) └── Si auth: AddressSelector (saved addresses) 5. Payment PaymentForm (Stripe) → useStripePayment() ├── Validate card ├── Process payment └── Create order (API) 6. Order Creation ordersService.createOrder() ├── Save to database ├── Update obras status ├── Clear cart └── Show OrderSuccess 7. Email Notification EmailJS → Send confirmation to user
🔄 FLUJO COMPLETO DE VALIDACIÓN
1. Frontend envía datos → POST /api/obras ↓ 2. Backend recibe → obrasController.ts ↓ 3. Llama a → obrasService.createObra(req.body) ↓ 4. Zod valida → obraInputSchema.parse(body) ← AQUÍ ↓ ├─ ✅ Si es válido → Continúa al repo.insertObra() │ └─ Guarda en MySQL │ └─ ❌ Si NO es válido → Lanza ZodError ↓ errorHandler.ts lo captura ↓ Responde HTTP 400 con detalles del error
Usuario escribe en formulario ↓ 1. HTML validation (required, pattern, type) ↓ 2. useFormValidation (onBlur, onChange) ↓ (si hay errores, muestra mensaje) Usuario hace submit ↓ 3. Stripe valida tarjeta (si es pago) ↓ Frontend envía a API ↓ 4. authMiddleware verifica token ↓ 5. requireAdmin verifica rol (si es admin endpoint) ↓ 6. Zod valida estructura de datos ↓ 7. Lógica de negocio (Stripe payment, disponibilidad) ↓ Guardar en BD
Archivo principal: /src/components/Checkout/ShippingForm.tsx Validaciones HTML encontradas: | Campo | Línea | Validación HTML | |---------------|-------|--------------------| | Email | 38 | type="email" | | Email | 44 | required | | Nombre | 61 | required | | Teléfono | 71 | type="tel" | | Teléfono | 77 | required | | Calle | 95 | required | | Número Ext. | 112 | required | | Código Postal | 135 | maxLength={5} | | Código Postal | 136 | pattern="[0-9]{5}" | | Código Postal | 138 | required | | Colonia | 155 | required | | Ciudad | 172 | required | | Estado | 186 | required |
LO IMPENSADO Una teoría de la cognición no consciente y los ensamblajes cognitivos humano-técnicos N. Katherine Hayles COLECCIÓN: FUTUROS PRÓXIMOS TRADUCCIÓN: ALEJANDRA LÓPEZ GABRIELIDIS, LOURDES LÓPEZ GABRIELIDIS Y TONI NAVARRO ISBN: 978-987-8272-26-9 PÁGINAS: 352 AÑO: 2024
GRACIAS