🛍️ Sol_Store_Ecomerce

Sol_Store_Ecomerce es una tienda de impresiones 3D que estamos desarrollando como página web para ofrecer productos personalizados. Este repositorio contiene todo el entorno de desarrollo necesario usando contenedores Docker.

New Changes on Development Testing

• Refix of Deploy Staging workflow to a minimal version for testing.

👥 Colaboradores

• Vianka
• Ricardo
• Paula
• Roberto

📁 Estructura del Proyecto

DOCKERIZANDO_2/
├── docker/
├── front-vue/
├── taskcurso/
├── .gitattributes
├── .gitignore
└── docker-compose.yml

🧰 Tecnologías Utilizadas

• Backend: PHP con Laravel
• Base de Datos: PostgreSQL
• Frontend: Vue.js
• Contenedores: Docker y Docker Compose

ℹ️ Configuración de Variables de Entorno

Backend (Laravel)

Crea tu archivo .env en la carpeta taskcurso/ a partir del .env.example

Frontend (Vue)

El frontend ahora usa configuración centralizada de API:

cd front-vue

# Para desarrollo con Docker (usa Nginx en puerto 80)
cp .env.example .env

# O usa el script automático:
./switch-env.sh docker

# Para desarrollo local sin Docker (puerto 8000 directo)
./switch-env.sh local

Variable clave: VITE_API_BASE_URL

• Docker: http://localhost/api
• Local: http://localhost:8000/api
• Producción: https://tu-dominio.com/api

📖 Documentación completa: front-vue/INDEX.md

🚀 Instrucciones para levantar el entorno

Asegúrate de tener instalado Docker y Docker Compose antes de comenzar.

1. Baja los contenedores anteriores (por si ya estaban corriendo)

docker compose down --remove-orphans

2. Reconstruye e inicia los contenedores en segundo plano

docker compose up --build -d

3. Entra al contenedor del backend

docker compose exec backend bash

4. Corre las migraciones y seeders para preparar la base de datos

php artisan migrate:fresh --seed
chmod -R 777 storage bootstrap/cache

5. Sal del contenedor

exit

6. Abre la aplicación en el navegador

http://localhost/admin/products

---

📊 Microsoft Clarity Analytics

El proyecto incluye integración con Microsoft Clarity para analítica web avanzada:

• ✅ Mapas de calor de interacciones de usuario
• ✅ Grabaciones de sesión completas
• ✅ Tracking de eventos de e-commerce
• ✅ Análisis de conversión y abandono
• ✅ Debug panel en desarrollo

Configuración de Clarity

1. Variables de entorno (ya configurado):

   VITE_CLARITY_PROJECT_ID=t62uyfc02j
   VITE_CLARITY_ENABLED=true

2. Panel de Debug (solo desarrollo):

   • Aparece en esquina superior derecha
   • Muestra estado de inicialización
   • Permite probar eventos
   • Historial de eventos recientes

3. Documentación completa: Ver CLARITY_IMPLEMENTATION.md

---

🔧 Configuración de API Centralizada ⭐ NUEVO

El frontend ahora usa una URL base centralizada para todas las llamadas a la API, facilitando el cambio entre entornos.

Cambio Rápido de Entorno

cd front-vue

# Desarrollo con Docker
./switch-env.sh docker

# Desarrollo local (sin Docker)
./switch-env.sh local

# Producción
./switch-env.sh production

Beneficios

• ✅ Cambio de URL en un solo lugar
• ✅ Autenticación JWT automática
• ✅ Manejo de errores centralizado
• ✅ Múltiples entornos soportados

Documentación Frontend

• 📖 Índice completo
• 🚀 Guía rápida
• ✅ Checklist para developers

---

¡Y listo! Ya tienes todo funcionando localmente con analytics incluido 🚀📈