Guard Svelte

Aplicación Svelte con arquitectura Atomic Design, integración con Firebase y Capacitor para desarrollo móvil.

🚀 Setup para Nuevos Desarrolladores

Requisitos Previos

1. Node.js (versión especificada en .nvmrc)

   # Si usas nvm
   nvm install
   nvm use
   

2. pnpm (gestor de paquetes)

   npm install -g pnpm
   

3. VS Code con extensión Svelte (se instalará automáticamente al abrir el proyecto)

Pasos de Instalación

1. Clonar el repositorio

   git clone https://github.com/aleshaxhurtado/guard-svelte.git
   cd guard-svelte
   

2. Instalar dependencias

   pnpm install
   

3. Configurar Firebase (Opcional)

   ⚠️ Importante: Firebase está instalado como dependencia pero NO se está usando actualmente en el código. El proyecto funciona perfectamente sin configurar Firebase.

   Solo necesitas configurar Firebase cuando vayas a usar servicios como:

   • Autenticación (Firebase Auth)
   • Base de datos (Firestore)
   • Hosting
   • Storage

   Si necesitas usar Firebase, sigue estos pasos:

   Opción A: Si trabajas en el proyecto existente (condaty-app)

   a. Instalar Firebase CLI (si no lo tienes):

   pnpm add -g firebase-tools
   

   b. Iniciar sesión en Firebase:

   firebase login
   

   c. Verificar que estás conectado al proyecto correcto:

   firebase projects:list
   

   El proyecto configurado es condaty-app (verificado en .firebaserc).

   d. Crear archivo de inicialización de Firebase:

   Crea src/lib/firebase.js con la configuración del proyecto:

   import { initializeApp } from 'firebase/app';
   import { getFirestore } from 'firebase/firestore';
   import { getAuth } from 'firebase/auth';
   
   const firebaseConfig = {
     apiKey: "TU_API_KEY",
     authDomain: "condaty-app.firebaseapp.com",
     projectId: "condaty-app",
     storageBucket: "condaty-app.appspot.com",
     messagingSenderId: "TU_SENDER_ID",
     appId: "TU_APP_ID"
   };
   
   const app = initializeApp(firebaseConfig);
   export const db = getFirestore(app);
   export const auth = getAuth(app);
   export default app;
   

   e. Obtener las credenciales:

   • Ve a Firebase Console
   • Selecciona el proyecto condaty-app
   • Ve a ⚙️ Configuración del proyecto
   • En "Tus aplicaciones" → selecciona la app web o crea una nueva
   • Copia la configuración y reemplaza los valores en src/lib/firebase.js

   Opción B: Si quieres usar tu propio proyecto Firebase

   a. Crea un nuevo proyecto en Firebase Console

   b. Actualiza .firebaserc con tu project ID:

   {
     "projects": {
       "default": "tu-proyecto-id"
     }
   }
   

   c. Sigue los pasos d y e de la Opción A con tus propias credenciales

   📚 Documentación completa: Ver docs/FIREBASE.md para más detalles sobre reglas, índices y deploy.

   💡 Nota: Si no vas a usar Firebase aún, puedes saltarte este paso y continuar con el desarrollo. La app funcionará normalmente sin Firebase configurado.

4. Configurar Cursor/VS Code

   • El archivo .cursorrules está incluido y se aplicará automáticamente en Cursor
   • Las extensiones recomendadas se instalarán automáticamente en VS Code

5. Ejecutar el proyecto

   pnpm dev
   

Archivos Importantes Incluidos

• .cursorrules - Reglas de desarrollo para Cursor AI
• .nvmrc - Versión de Node.js requerida
• .vscode/extensions.json - Extensiones recomendadas para VS Code
• pnpm-workspace.yaml - Configuración de workspace de pnpm
• firebase.json - Configuración de Firebase
• .firebaserc - Proyecto de Firebase
• firestore.rules - Reglas de seguridad de Firestore
• firestore.indexes.json - Índices de Firestore
• capacitor.config.js - Configuración de Capacitor

Documentación

• docs/FIREBASE.md - Configuración y uso de Firebase
• docs/CAPACITOR_SETUP.md - Setup de Capacitor para móvil
• docs/COMPONENTS.md - Documentación de componentes

📦 Scripts Disponibles

• pnpm dev - Inicia servidor de desarrollo
• pnpm build - Construye para producción
• pnpm preview - Previsualiza build de producción
• pnpm deploy - Build y deploy a Firebase Hosting
• pnpm firebase:deploy - Deploy completo de Firebase
• pnpm firebase:deploy:hosting - Deploy solo de hosting
• pnpm firebase:deploy:firestore - Deploy de Firestore
• pnpm cap:sync - Sincroniza con Capacitor
• pnpm cap:open:android - Abre proyecto Android
• pnpm cap:open:ios - Abre proyecto iOS

🏗️ Arquitectura

El proyecto sigue Atomic Design:

• atoms/ - Componentes básicos (Button, Input, Icon)
• molecules/ - Composiciones simples (Card, AppBar)
• organisms/ - Secciones complejas (Header, Sidebar)
• templates/ - Estructuras de página
• pages/ - Páginas con lógica y datos

🧭 Router

Router personalizado sin dependencias ubicado en src/lib/router.js. Ver .cursorrules para más detalles.

📝 Convenciones de Commit

Los commits siguen el estándar Conventional Commits en español:

• feat(ámbito): descripción - Nueva funcionalidad
• fix(ámbito): descripción - Corrección de bug
• docs(ámbito): descripción - Documentación
• refactor(ámbito): descripción - Refactorización
• chore(ámbito): descripción - Tareas de mantenimiento

Ejemplo: feat(auth): agregar página de login

🔄 Git Aliases (Sincronización entre equipos)

Alias útiles para trabajar desde múltiples equipos (casa/oficina):

Configurar alias (ejecutar una vez por equipo)

# Alias para TRAER todo (guarda backup y sincroniza con remoto)
git config --global alias.sync '!git stash push -u -m "backup-antes-de-sync-$(date +%Y%m%d-%H%M%S)" 2>/dev/null; git fetch --all && git reset --hard origin/main && git clean -fd && echo "✅ Sincronizado con el remoto (backup guardado en stash)"'

# Alias para DESHACER sync (recupera el último backup)
git config --global alias.undo-sync '!git stash list | head -1 | grep -q "backup-antes-de-sync" && git stash pop || echo "❌ No hay backup de sync para recuperar"'

# Alias para SUBIR todo (add, commit y push)
git config --global alias.up '!f() { git add . && git commit -m "${1:-sync: actualizar cambios}" && git push && echo "✅ Todo subido al remoto"; }; f'

Uso diario

Flujo de trabajo

🏠 Casa (noche):     terminas → git up
🏢 Oficina (mañana): llegas   → git sync
🏢 Oficina (tarde):  terminas → git up  
🏠 Casa (noche):     llegas   → git sync

Si haces sync por error

git sync        # ¡Ups! Debí hacer git up
git undo-sync   # Recupera tus cambios del backup automático
git up "mensaje" # Ahora sí, sube los cambios

Ver backups guardados

git stash list  # Muestra todos los backups en stash

⚠️ Importante: git sync ahora guarda un backup automático antes de sincronizar, pero siempre es mejor asegurarte de hacer git up antes de cambiar de equipo.