Amigurumis de Inés - Ecommerce con MercadoPago

Sitio web para la venta de amigurumis tejidos a mano por Inés. Construido con React, TypeScript, Tailwind CSS y Vite. Ahora con integración completa de MercadoPago para pagos reales.

🚨 AVISO DE SEGURIDAD IMPORTANTE

⚠️ ANTES DE USAR EN PRODUCCIÓN: Se realizó una auditoría de seguridad completa. Las credenciales expuestas deben rotarse inmediatamente. Ver la sección Seguridad para más detalles.

✨ Características

🎨 Diseño responsivo y atractivo con gradientes cálidos
📱 Interfaz moderna optimizada para móviles
🛍️ Catálogo de productos dinámico desde Airtable
💳 Pagos reales con MercadoPago (¡NUEVO!)
🔒 Pago seguro con redirección a MercadoPago
✅ Páginas de confirmación: éxito, falla y pendiente
📊 Gestión de estados de pago completa
🎯 Sin carrito de compras - compra directa por producto
🛡️ Auditoría de seguridad completa implementada

🛠️ Tecnologías

Frontend: React 18 + TypeScript + Vite
Estilos: Tailwind CSS + Gradientes personalizados
UI Components: Radix UI + shadcn/ui
Datos: Airtable API
Pagos: MercadoPago SDK + Netlify Functions
Despliegue: Netlify (Frontend + Functions)
Seguridad: CORS whitelist, validación de entrada, headers de seguridad

🚀 Instalación y Configuración

1. Instalar Dependencias

npm install

2. Configurar Variables de Entorno

⚠️ IMPORTANTE: Crea un archivo .env basado en .env.example o .env.secure:

cp .env.example .env
# O para más seguridad:
cp .env.secure .env

Variables requeridas:

Airtable (para productos)

VITE_AIRTABLE_API_KEY=tu_airtable_api_key_aqui
VITE_AIRTABLE_BASE_ID=tu_base_id_aqui
VITE_AIRTABLE_TABLE_NAME=Productos

MercadoPago (para pagos)

# Clave pública (frontend) - esta se puede exponer
VITE_MERCADOPAGO_PUBLIC_KEY=tu_public_key_aqui

# Clave privada (backend) - solo en Netlify Functions
MERCADOPAGO_ACCESS_TOKEN=tu_access_token_aqui

Seguridad (Netlify Functions)

# Orígenes permitidos (comas separadas)
ALLOWED_ORIGINS=https://amigurumi-de-ines.netlify.app,https://localhost:3000

NODE_ENV=production

3. Configurar MercadoPago

Crea una cuenta en MercadoPago Developers
Crea una nueva aplicación
Obtén tus credenciales:
- Public Key: Para el frontend (VITE_MERCADOPAGO_PUBLIC_KEY)
- Access Token: Para el backend (MERCADOPAGO_ACCESS_TOKEN)

4. Configurar Airtable

La aplicación espera una tabla llamada "Productos" con estos campos:

Campo	Tipo	Requerido	Descripción
`nombre`	Texto	✅	Nombre del producto
`descripcion`	Texto largo	✅	Descripción detallada
`precio`	Número	✅	Precio en CLP
`imagen_miniatura`	Attachment	✅	Imagen 300x300px
`imagenes_grandes`	Attachment	✅	Imágenes alta resolución
`activo`	Checkbox	✅	Disponible para venta

🏃‍♂️ Desarrollo

# Servidor de desarrollo
npm run dev

# Build para producción
npm run build

# Vista previa del build
npm run preview

# Linting
npm run lint

💳 Flujo de Pagos

Cómo Funciona:

Usuario selecciona producto → Click en "Comprar Ahora"
Frontend crea preferencia → Llama a Netlify Function
Netlify Function procesa → Crea preferencia en MercadoPago
Redirección a MercadoPago → Usuario completa pago
Retorno al sitio → Página de confirmación (success/failure/pending)

Páginas de Confirmación:

/success - Pago aprobado
/failure - Pago rechazado
/pending - Pago pendiente (transferencias)

📁 Estructura del Proyecto

/
├── netlify/
│   └── functions/
│       ├── create-payment.js      # Netlify Function para MercadoPago (segura)
│       └── package.json           # Dependencias de Functions
├── app/
│   └── app.tsx                    # Componente principal con pago
├── components/
│   └── ProductCard.tsx            # Card de producto con botón comprar
├── success.html                   # Página de pago exitoso
├── failure.html                   # Página de pago fallido
├── pending.html                   # Página de pago pendiente
├── netlify.toml                   # Configuración de Netlify
├── .env.example                   # Plantilla de variables
├── .env.secure                    # Plantilla segura con advertencias
├── SECURITY.md                    # Informe completo de auditoría de seguridad
└── package.json                   # Dependencias del proyecto

🌐 Despliegue en Netlify

Configuración Automática:

Conecta tu repositorio a Netlify
Variables de entorno en Netlify Dashboard:
- Todas las variables VITE_* en "Build & deploy" → "Environment"
- MERCADOPAGO_ACCESS_TOKEN en "Functions" → "Environment"
- ALLOWED_ORIGINS en "Functions" → "Environment"
- NODE_ENV=production en "Functions" → "Environment"
Netlify detectará automáticamente:
- Build: npm ci && npm run build
- Publish directory: dist
- Functions directory: netlify/functions

URLs de Función:

Crear pago: https://tu-sitio.netlify.app/.netlify/functions/create-payment

🛠️ Solución de Problemas de Despliegue:

Error "vite: not found"

Si encuentras el error sh: 1: vite: not found durante el build:

✅ Ya solucionado: El archivo netlify.toml incluye npm ci && para instalar dependencias
Node.js Version: El proyecto usa Node.js 18 (ver .nvmrc)
Dependencias: Asegúrate de que package-lock.json esté en el repositorio

Comandos de Build Configurados:

[build]
  command = "npm ci && npm run build"

Esto asegura que las dependencias se instalen antes del build.

🔧 Personalización

Modificar Productos:

Edita directamente en tu tabla de Airtable. Los cambios se reflejan automáticamente.

Cambiar Precios:

Los precios se muestran en CLP (Pesos Chilenos) y se formatean automáticamente.

Personalizar Estilos:

Colores principales: rose-500 y orange-500
Gradientes: from-rose-500 to-orange-500
Tipografía: Sistema fonts optimizados

📋 Checklist de Configuración

🛡️ Seguridad

⚠️ AUDITORÍA DE SEGURIDAD COMPLETADA

Se realizó una auditoría completa de seguridad que identificó y corrigió vulnerabilidades críticas:

Vulnerabilidades Corregidas:

✅ CORS mejorado: Reemplazado wildcard * con whitelist de orígenes
✅ Validación de entrada: Sanitización y validación de todos los inputs
✅ Headers de seguridad: X-Frame-Options, X-XSS-Protection, X-Content-Type-Options
✅ Manejo seguro de errores: Prevención de divulgación de información
✅ Configuración basada en entorno: URLs y configuraciones seguras

🔴 CREDENCIALES EXPUESTAS - ROTACIÓN REQUERIDA:

Las siguientes credenciales están expuestas y deben rotarse INMEDIATAMENTE:

Airtable API Key: patDvA7InUnb2X449.* (PAT completa expuesta)
Airtable Base ID: apprLGWcETltWUXpn
MercadoPago Public Key: APP_USR-0ce0eeab-* (Key completa expuesta)
MercadoPago Access Token: APP_USR-2637451468197049-* (Token completo expuesto)

Pasos de Rotación CRÍTICOS:

🔄 Rotar credenciales inmediatamente:
- Airtable: Personal Access Tokens
- MercadoPago: Developer Panel
🗑️ Eliminar archivo .env actual después de la rotación
🧹 Limpiar historial de git si las credenciales fueron commitadas

⚙️ Configurar en Netlify Dashboard:

MERCADOPAGO_ACCESS_TOKEN=nueva_token_rotado
ALLOWED_ORIGINS=https://amigurumi-de-ines.netlify.app,https://localhost:3000
NODE_ENV=production

Medidas de Seguridad Implementadas:

Claves públicas: Se pueden exponer en el frontend
Claves privadas: Solo en variables de entorno del servidor
HTTPS: Netlify proporciona SSL automático
CORS: Configurado con whitelist de orígenes
Validación: Sanitización completa de inputs
Headers: Protección contra XSS, clickjacking y MIME sniffing
Gitignore: Protección contra commits accidentales de credenciales

Archivos de Seguridad:

SECURITY.md - Informe detallado de auditoría de seguridad
.env.secure - Plantilla segura con advertencias
.env.example - Plantilla con variables correctas

📞 Soporte

Si tienes problemas con la integración de MercadoPago:

🔄 Verifica credenciales rotadas: Asegúrate de usar las nuevas
Revisa variables de entorno: Tanto en .env como en Netlify
Prueba en sandbox: Usa credenciales de prueba primero
Logs de Netlify: Revisa los logs de Functions para errores
Auditoría de seguridad: Revisa SECURITY.md para medidas implementadas

📄 Licencia

🎉 ¡Listo para recibir pagos reales con MercadoPago! 💳

⚠️ RECORDATORIO: Rotar credenciales expuestas antes del despliegue en producción.

Name		Name	Last commit message	Last commit date
Latest commit History 13 Commits
actions		actions
app		app
components		components
hooks		hooks
lib		lib
netlify/functions		netlify/functions
rscs		rscs
src		src
types		types
.env.example		.env.example
.env.secure		.env.secure
.gitignore		.gitignore
.nvmrc		.nvmrc
README.md		README.md
app.yml		app.yml
failure.html		failure.html
index.html		index.html
netlify.toml		netlify.toml
package-lock.json		package-lock.json
package.json		package.json
pending.html		pending.html
postcss.config.js		postcss.config.js
success.html		success.html
tailwind.config.js		tailwind.config.js
tsconfig.json		tsconfig.json
tsconfig.node.json		tsconfig.node.json
vite.config.ts		vite.config.ts

Folders and files

Latest commit

History

Repository files navigation

Amigurumis de Inés - Ecommerce con MercadoPago

🚨 AVISO DE SEGURIDAD IMPORTANTE

✨ Características

🛠️ Tecnologías

🚀 Instalación y Configuración

1. Instalar Dependencias

2. Configurar Variables de Entorno

Airtable (para productos)

MercadoPago (para pagos)

Seguridad (Netlify Functions)

3. Configurar MercadoPago

4. Configurar Airtable

🏃‍♂️ Desarrollo

💳 Flujo de Pagos

Cómo Funciona:

Páginas de Confirmación:

📁 Estructura del Proyecto

🌐 Despliegue en Netlify

Configuración Automática:

URLs de Función:

🛠️ Solución de Problemas de Despliegue:

Error "vite: not found"

Comandos de Build Configurados:

🔧 Personalización

Modificar Productos:

Cambiar Precios:

Personalizar Estilos:

📋 Checklist de Configuración

🛡️ Seguridad

⚠️ AUDITORÍA DE SEGURIDAD COMPLETADA

Vulnerabilidades Corregidas:

🔴 CREDENCIALES EXPUESTAS - ROTACIÓN REQUERIDA:

Pasos de Rotación CRÍTICOS:

Medidas de Seguridad Implementadas:

Archivos de Seguridad:

📞 Soporte

📄 Licencia

About

Resources

Uh oh!

Stars

Watchers

Forks

Releases

Packages 0

Uh oh!

Contributors

Uh oh!

Languages

Packages