🚀 XperienceCampusWorkshop - ¡Únete a la Comunidad!

Una página web colaborativa donde desarrolladores de todo el mundo pueden contribuir con su información personal y aprender sobre colaboración en proyectos open source.

Este taller fue posible gracias a la colaboración de:

• 🎓 Developer Student Clubs UTP - Comunidad de estudiantes desarrolladores
• 🌟 Xperience Campus Chimbote - Impulsando el crecimiento tecnológico en Chimbote

Gracias a estas organizaciones pudimos llevar a cabo este workshop de Git & GitHub, proporcionando a los participantes una experiencia práctica y colaborativa en el desarrollo de software open source.

👉 Visita la página web aquí

Al participar en este proyecto, practicarás y aprenderás:

• 🍴 Forking: Crear una copia del repositorio en tu cuenta
• 🌿 Branching: Crear y manejar ramas para organizar tu trabajo
• 📝 Commits: Guardar cambios con mensajes descriptivos
• ⬆️ Push/Pull: Sincronizar cambios entre local y remoto
• 🔄 Pull Requests: Proponer cambios para revisión
• 🤝 Merge: Integrar cambios al proyecto principal

Ahora es más fácil que nunca contribuir. Solo necesitas:

1. ✅ Copiar el template JSON
2. ✅ Crear tu propio archivo en contributors/<tu-nickname>.json
3. ✅ Hacer PR - ¡No más conflictos de merge!

¿Por qué es mejor ahora?

• 🚫 Sin conflictos - Cada persona tiene su propio archivo
• ⚡ Más rápido - No esperas a que otros terminen
• 🤖 Automático - GitHub Actions genera todo por ti
• ✅ Más simple - Solo editas TU archivo

{
  "name": "Tu Nombre Completo",
  "nickname": "tu-github-username",
  "github": "https://github.com/tu-username",
  "linkedin": "https://linkedin.com/in/tu-perfil",
  "instagram": "https://www.instagram.com/tu-instagram/",
  "image": "https://github.com/tu-username.png",
  "description": "Breve descripción profesional (máx. 150 caracteres)",
  "hobbies": ["Hobby1", "Hobby2", "Hobby3", "Hobby4"]
}

Este proyecto está optimizado para usar GitHub Codespace, que te proporciona:

• 🚀 Configuración instantánea - Sin instalaciones locales
• 🔧 Extensiones preinstaladas - Live Server, Image Preview, Git
• 🌐 Acceso desde cualquier lugar - Solo necesitas un navegador
• 💾 Guardado automático - Tus cambios se sincronizan automáticamente
• 🎯 Enfoque en el código - Sin preocuparte por dependencias

• Live Server - Vista previa en tiempo real de la página
• Image Preview - Visualización de imágenes en el editor
• Git Graph - Historial visual de commits
• Auto Close Tag - Cierre automático de etiquetas HTML
• IntelliSense - Autocompletado inteligente

flowchart TD
    A["🌐 1. Accede al Repositorio"] --> B["🍴 2. Haz Fork del Repo"]
    B --> C["✅ 3. Verifica tu Fork"]
    C --> D["☁️ 4. Crear GitHub Codespace"]
    D --> E["🔍 5. Verificar Estado Inicial"]
    E --> F["🌿 6. Crear Nueva Rama"]
    F --> G["📝 7. Crear tu archivo JSON"]
    G --> H["💾 8. Preparar Commit"]
    H --> I["⬆️ 9. Push a tu Fork"]
    I --> J["🔄 10. Crear Pull Request"]
    J --> K["🤖 11. Validación Automática"]
    K --> L{"¿Validación exitosa?"}
    L -->|"❌ No"| M["📝 Corregir Errores"]
    M --> H
    L -->|"✅ Sí"| N["🤖 12. Auto-generación"]
    N --> O["🎉 13. Auto-merge Exitoso"]

    %% Estilos mejorados
    style A fill:#e3f2fd,stroke:#1976d2,stroke-width:2px
    style D fill:#f3e5f5,stroke:#7b1fa2,stroke-width:2px
    style G fill:#e8f5e8,stroke:#2e7d32,stroke-width:2px
    style K fill:#fff3e0,stroke:#f57c00,stroke-width:2px
    style L fill:#fce4ec,stroke:#c2185b,stroke-width:2px
    style M fill:#ffebee,stroke:#d32f2f,stroke-width:2px
    style N fill:#e0f2f1,stroke:#00796b,stroke-width:2px
    style O fill:#c8e6c9,stroke:#388e3c,stroke-width:3px

• Una cuenta de GitHub
• Navegador web (Chrome, Firefox, Edge, Safari)

# 4. Verificar estado inicial
git status                    # Working tree debe estar limpio
git branch --all              # Debes estar en 'main'

# 5. Crear tu rama
git checkout -b feat/add-tu-nickname

# 6. Verificar que estás en tu rama
git branch                    # Debe mostrar * feat/add-tu-nickname

Opción A: Usando la Terminal (Recomendado)

# 1. Copia el template
cp templates/contributor-template.json contributors/tu-nickname.json

# 2. Edita tu archivo
# Abre contributors/tu-nickname.json en el editor

Opción B: Manualmente

1. Abre la carpeta contributors/
2. Crea un nuevo archivo: tu-nickname.json
3. Copia el contenido de templates/contributor-template.json
4. Completa con tu información

✏️ Ejemplo completo:

{
  "name": "María González",
  "nickname": "mariagonzalez",
  "github": "https://github.com/mariagonzalez",
  "linkedin": "https://linkedin.com/in/maria-gonzalez-dev",
  "instagram": "https://instagram.com/maria.codes",
  "image": "https://github.com/mariagonzalez.png",
  "description": "Full-stack developer apasionada por JavaScript y React",
  "hobbies": ["Programación", "Open Source", "Gaming", "Fotografía"]
}

# 8. Preparar tu archivo para commit
git add contributors/tu-nickname.json

# Verificar que solo agregaste tu archivo
git status                    # Solo debe aparecer tu .json

# 9. Hacer commit
git commit -m "feat: add profile for tu-nickname"

# 10. Push a tu fork
git push origin feat/add-tu-nickname

1. Ve a tu repositorio en GitHub
2. Verás un banner amarillo: "Compare & pull request" → Click
3. Título: feat: add profile for tu-nickname
4. Descripción: Explica brevemente quién eres
5. Click en "Create pull request"

Una vez creado el PR:

1. 🤖 GitHub Actions se ejecuta automáticamente
2. 🔍 Valida tu archivo JSON
3. 🏗️ Genera public/index.json y src/contributors-data.js
4. ✅ Hace commit automático de los archivos generados
5. 🎉 Mergea tu PR automáticamente

Verás en tu PR:

✅ Validation / validate
✅ Generate Contributors / generate
🤖 Auto-generate contributors data (commit automático)
🎉 Pull request successfully merged and closed

❌ NO TOCAR:

• contributors-data.js (se genera automáticamente)
• src/contributors-data.js (se genera automáticamente)
• public/index.json (se genera automáticamente)

✅ SÍ EDITAR:

• contributors/<tu-nickname>.json (tu archivo personal)

1. 🏗️ Generador Automático - scripts/generate-contributors.js

   • Lee todos los archivos JSON de contributors/
   • Valida formato y campos obligatorios
   • Genera automáticamente:
     • public/index.json (API pública)
     • src/contributors-data.js (módulo JS)
   • Se ejecuta automáticamente en GitHub Actions

2. 🤖 GitHub Action - Validación y generación automática

   • Se ejecuta cuando modificas archivos en contributors/
   • Valida tu JSON
   • Genera los archivos consolidados
   • Hace commit automático con github-actions[bot]
   • Mergea automáticamente si todo está correcto

Nuestro sistema valida automáticamente:

flowchart LR
    A[Tu archivo JSON] --> B[GitHub Actions]
    B --> C{Validación}
    C -->|✅ OK| D[generate-contributors.js]
    C -->|❌ Error| E[Notificación]
    D --> F[public/index.json]
    D --> G[src/contributors-data.js]
    F --> H[Commit automático]
    G --> H
    H --> I[Auto-merge]
    
    style A fill:#e3f2fd,stroke:#1976d2
    style D fill:#fff3e0,stroke:#f57c00
    style F fill:#e8f5e8,stroke:#388e3c
    style G fill:#e8f5e8,stroke:#388e3c
    style I fill:#c8e6c9,stroke:#2e7d32,stroke-width:3px

Proceso completo:

1. 📝 Creas/modificas contributors/tu-nickname.json
2. 🚀 Haces push a tu fork
3. 🔄 Creas un Pull Request
4. 🤖 GitHub Actions detecta cambios en contributors/
5. ✅ Valida tu archivo JSON
6. 🏗️ Ejecuta node scripts/generate-contributors.js
7. 📄 Se generan automáticamente:
   • public/index.json
   • src/contributors-data.js
8. 💾 github-actions[bot] hace commit de los archivos generados
9. 🎉 Tu PR se mergea automáticamente
10. 🌐 Tu perfil aparece en la web

1. Lee los comentarios de la validación - Te dice exactamente qué corregir
2. Edita TU archivo en contributors/ - No toques otros archivos
3. Commit y push nuevamente - Los cambios se agregan automáticamente al PR
4. GitHub Actions regenerará todo - Espera a que termine

# ✅ Verificar tu JSON localmente (Opcional pero recomendado)
node scripts/generate-contributors.js

# ✅ Verificar antes de commit
git status                           # Ver qué archivos cambiaron
git diff contributors/tu-nickname.json  # Ver tus cambios

# ✅ Solo agregar tu archivo
git add contributors/tu-nickname.json

# ✅ Commit descriptivo
git commit -m "feat: add profile for tu-nickname"

# ✅ Push a tu rama
git push origin feat/add-tu-nickname

Si quieres probar antes de hacer PR:

# 1. Asegúrate de tener Node.js instalado
node --version

# 2. Ejecuta el generador localmente
node scripts/generate-contributors.js

# 3. Si hay errores, te mostrará exactamente cuáles
# 4. Si todo está bien, generará los archivos

Nota: No necesitas hacer commit de los archivos generados (public/index.json y src/contributors-data.js), GitHub Actions los generará automáticamente.

• Crear/modificar únicamente tu archivo en contributors/<tu-nickname>.json
• Usar el template de templates/contributor-template.json
• Incluir información real y profesional
• Usar GitHub Codespace para editar (recomendado)
• Hacer PR con solo tu archivo

• ❌ Modificar contributors-data.js (archivo legacy, no usar)
• ❌ Modificar src/contributors-data.js (auto-generado)
• ❌ Modificar public/index.json (auto-generado)
• ❌ Modificar archivos de otros colaboradores
• ❌ Modificar HTML, CSS, JS del proyecto (a menos que sea otra contribución aprobada)
• ❌ Agregar múltiples colaboradores en un solo PR
• ❌ Usar información falsa o inapropiada