📡 A live dashboard tracking up to 500 of the most recently updated public repositories on GitHub with 20+ stars, automatically refreshed every ~5 minutes via GitHub Actions.

🌐 View Live Dashboard (English) | 🇪🇸 Ver en Español

• ⚛️ Built with React - Modern React 18 application with Vite for blazing-fast development
• 🔄 Auto-refresh every ~5 minutes - GitHub Actions automatically fetches latest repos
• 📊 Up to 500 repositories tracked in real-time with 20+ stars minimum (shows fewer if less are available)
• 🎯 Smart client-side updates - Page auto-refreshes without losing your position
• 🔍 Advanced filtering - Search by name/description and filter by star count
• 🌐 Bilingual interface - Switch between English and Spanish with one click
• 📱 Responsive design - Works perfectly on desktop and mobile devices
• 🚀 Zero backend - Fully static, hosted on GitHub Pages
• 🎨 Clean UI - Modern, intuitive interface with dark theme

┌─────────────────┐      Every ~5 min      ┌──────────────────┐
│  GitHub Actions │ ────────────────────► │  GitHub API      │
│  Workflow       │                        │  Search Repos    │
└────────┬────────┘                        └──────────────────┘
         │
         │ Updates JSON
         ▼
┌─────────────────┐      Auto-refresh      ┌──────────────────┐
│  data/          │ ◄──────────────────── │  Web Browser     │
│  projects.json  │                        │  (Client-side)   │
└─────────────────┘                        └──────────────────┘

1. GitHub Actions runs every 5 minutes (*/5 * * * * cron)
2. Python script queries GitHub Search API for recently updated repos
3. JSON data is committed and pushed to the repository
4. React app auto-refreshes and displays the latest repos
5. Smart notifications alert users when new repos are available

• GitHub account (for GitHub Actions and Pages)
• Node.js 20+ and npm (for local development only)
• No server or backend required!
• All free tier limits are sufficient for this project

git clone https://github.com/alcastelo/github-tail.git
cd github-tail
npm install  # Install dependencies for local development

• Go to Settings → Actions → General
• Enable "Allow all actions and reusable workflows"
• Under Workflow permissions, select "Read and write permissions"

• Go to Settings → Pages
• Source: GitHub Actions
• The workflow will automatically deploy on the first push
• Wait ~2 minutes for deployment

Note: The repository includes an optimized Pages workflow that only rebuilds when React source files change, not when data updates. This saves CI/CD minutes.

Edit .github/workflows/update-projects.yml to customize:

env:
  MAX_RESULTS: "500"           # Maximum number of repos to fetch (may return fewer)
  MIN_STARS: "20"              # Minimum stars filter
  GH_API_TOKEN: ${{ secrets.GITHUB_TOKEN }}  # Auto-provided

Trigger the workflow manually:

• Go to Actions → Actualizar proyectos GitHub
• Click Run workflow → Run workflow

Your dashboard will be live at: https://YOUR_USERNAME.github.io/github-tail/

Run the React app locally with hot reload:

# Install dependencies (if not already done)
npm install

# Start development server
npm run dev
# Visit http://localhost:5173/github-tail/

# Build for production
npm run build

# Preview production build
npm run preview
# Visit http://localhost:4173/github-tail/

Current setting: Every 5 minutes (*/5 * * * *)

Note: GitHub Actions doesn't guarantee exact timing. Actual intervals may vary between 5-10 minutes depending on GitHub's system load.

To modify the frequency, edit .github/workflows/update-projects.yml:

schedule:
  - cron: "*/10 * * * *"  # Change to every 10 minutes

Available options:

• */5 * * * * - Every 5 minutes (~288 runs/day)
• */10 * * * * - Every 10 minutes (~144 runs/day)
• 0 * * * * - Every hour (~24 runs/day)

The React app auto-checks for updates every 30 seconds. To change this, edit src/hooks/useAutoRefresh.js:

const POLL_INTERVAL_MS = 30000; // 30 seconds in milliseconds

Modify search parameters in .github/workflows/update-projects.yml:

env:
  MAX_RESULTS: "500"    # Maximum number of repos (up to 1000, may return fewer)
  MIN_STARS: "20"       # Minimum stars (0 = no limit)

Your repository is public → No limits! 🎉

Edit src/App.css to customize colors, fonts, and layout. The current theme uses:

• Dark background (#020617)
• Blue accents (#3b82f6)
• Modern card-based layout

The React architecture makes it easy to extend:

• Add new components in src/components/
• Create custom hooks in src/hooks/
• Update translations in src/utils/translations.js
• Modify the main app logic in src/App.jsx

github-tail/
├── .github/
│   └── workflows/
│       ├── update-projects.yml    # Data update (runs every 5 min)
│       └── pages.yml              # React build and deployment
├── data/
│   └── projects.json              # Auto-generated repo data
├── scripts/
│   └── update_projects.py         # Python script to fetch repos
├── src/
│   ├── components/                # React components
│   │   ├── Header.jsx
│   │   ├── Controls.jsx
│   │   ├── ProjectList.jsx
│   │   ├── ProjectItem.jsx
│   │   ├── Pagination.jsx
│   │   ├── Footer.jsx
│   │   ├── UpdateNotification.jsx
│   │   └── RefreshIndicator.jsx
│   ├── hooks/                     # Custom React hooks
│   │   ├── useLanguage.jsx        # Language context
│   │   └── useAutoRefresh.js      # Auto-refresh logic
│   ├── utils/
│   │   └── translations.js        # Translation strings
│   ├── App.jsx                    # Main app component
│   ├── App.css                    # Global styles
│   └── main.jsx                   # React entry point
├── index.html                     # HTML entry point for Vite
├── vite.config.js                 # Vite configuration
├── package.json                   # Node.js dependencies
├── README.md                      # This file
├── CLAUDE.md                      # AI assistant guide
└── WORKFLOW_OPTIMIZATION.md       # Workflow optimization guide

• Check Actions tab for error messages
• Verify workflow permissions in Settings → Actions
• Ensure GITHUB_TOKEN has write permissions

GitHub provides 5,000 API requests/hour with authentication (automatically used).

• Current setup: ~288 requests/day (well within limits)
• If you hit limits, increase cron interval

• Clear browser cache
• Check if data/projects.json was updated in the repository
• Verify GitHub Pages is enabled and deployed from correct branch

• Ensure Node.js 20+ is installed: node --version
• Clear node_modules and reinstall: rm -rf node_modules package-lock.json && npm install
• Verify all .jsx files have the correct extension
• Run npm run build locally to test before pushing

• Check if port 5173 is already in use
• Clear Vite cache: rm -rf node_modules/.vite
• Restart the dev server: npm run dev

This project implements comprehensive SEO optimization for maximum organic traffic:

• Meta Tags - Complete title, description, and keyword optimization
• Open Graph - Beautiful preview cards on social media (Facebook, LinkedIn)
• Twitter Cards - Optimized sharing on Twitter/X
• Schema.org - Structured data (JSON-LD) for rich search results
• Sitemap.xml - Helps search engines discover all pages
• Robots.txt - Proper crawling directives for search bots
• International SEO - hreflang tags for English/Spanish versions
• PWA Manifest - Progressive Web App capabilities

For detailed SEO documentation, see SEO.md.

Contributions are welcome! Feel free to:

• Report bugs via Issues
• Submit feature requests
• Open Pull Requests with improvements

This project is licensed under the MIT License - see the LICENSE file for details.

• Built with ❤️ using React, Vite, GitHub Actions and GitHub Pages
• Powered by GitHub Search API
• This is an experiment using vibe coding

If you find this project useful and want to fuel more coding experiments (and my coffee addiction), consider buying me one! ☕✨

My code runs on caffeine and good vibes 🚀

📡 Un dashboard en vivo que rastrea hasta 500 de los repositorios públicos más recientemente actualizados en GitHub con 20+ estrellas, actualizado automáticamente cada ~5 minutos mediante GitHub Actions.

🌐 Ver Dashboard en Vivo (Español) | 🇬🇧 View in English

• ⚛️ Construido con React - Aplicación moderna con React 18 y Vite para desarrollo ultra-rápido
• 🔄 Actualización automática cada ~5 minutos - GitHub Actions obtiene los últimos repos automáticamente
• 📊 Hasta 500 repositorios rastreados en tiempo real con mínimo 20 estrellas (muestra menos si hay menos disponibles)
• 🎯 Actualizaciones inteligentes del cliente - La página se actualiza automáticamente sin perder tu posición
• 🔍 Filtrado avanzado - Buscar por nombre/descripción y filtrar por cantidad de estrellas
• 🌐 Interfaz bilingüe - Cambia entre inglés y español con un clic
• 📱 Diseño responsivo - Funciona perfectamente en escritorio y dispositivos móviles
• 🚀 Sin backend - Completamente estático, alojado en GitHub Pages
• 🎨 Interfaz limpia - Interfaz moderna e intuitiva con tema oscuro

┌─────────────────┐    Cada ~5 min        ┌──────────────────┐
│  GitHub Actions │ ────────────────────► │  GitHub API      │
│  Workflow       │                        │  Search Repos    │
└────────┬────────┘                        └──────────────────┘
         │
         │ Actualiza JSON
         ▼
┌─────────────────┐   Auto-actualización   ┌──────────────────┐
│  data/          │ ◄──────────────────── │  Navegador Web   │
│  projects.json  │                        │  (Cliente)       │
└─────────────────┘                        └──────────────────┘

1. GitHub Actions se ejecuta cada 5 minutos (cron */5 * * * *)
2. Script Python consulta la API de GitHub Search para repos actualizados recientemente
3. Datos JSON se confirman y envían al repositorio
4. Aplicación React se actualiza automáticamente y muestra los últimos repos
5. Notificaciones inteligentes alertan a los usuarios cuando hay nuevos repos disponibles

• Cuenta de GitHub (para GitHub Actions y Pages)
• Node.js 20+ y npm (solo para desarrollo local)
• ¡No se requiere servidor ni backend!
• Todos los límites gratuitos son suficientes para este proyecto

git clone https://github.com/alcastelo/github-tail.git
cd github-tail
npm install  # Instalar dependencias para desarrollo local

• Ve a Settings → Actions → General
• Habilita "Allow all actions and reusable workflows"
• En Workflow permissions, selecciona "Read and write permissions"

• Ve a Settings → Pages
• Source: GitHub Actions
• El workflow se desplegará automáticamente en el primer push
• Espera ~2 minutos para el despliegue

Nota: El repositorio incluye un workflow optimizado de Pages que solo reconstruye cuando cambian los archivos fuente de React, no cuando se actualizan datos. Esto ahorra minutos de CI/CD.

Edita .github/workflows/update-projects.yml para personalizar:

env:
  MAX_RESULTS: "500"           # Número máximo de repos a obtener (puede devolver menos)
  MIN_STARS: "20"              # Filtro de estrellas mínimas
  GH_API_TOKEN: ${{ secrets.GITHUB_TOKEN }}  # Proporcionado automáticamente

Activa el workflow manualmente:

• Ve a Actions → Actualizar proyectos GitHub
• Haz clic en Run workflow → Run workflow

Tu dashboard estará en vivo en: https://TU_USUARIO.github.io/github-tail/

Ejecuta la aplicación React localmente con recarga en caliente:

# Instalar dependencias (si aún no lo has hecho)
npm install

# Iniciar servidor de desarrollo
npm run dev
# Visita http://localhost:5173/github-tail/

# Construir para producción
npm run build

# Previsualizar build de producción
npm run preview
# Visita http://localhost:4173/github-tail/

Configuración actual: Cada 5 minutos (*/5 * * * *)

Nota: GitHub Actions no garantiza tiempos exactos. Los intervalos reales pueden variar entre 5-10 minutos dependiendo de la carga del sistema de GitHub.

Para modificar la frecuencia, edita .github/workflows/update-projects.yml:

schedule:
  - cron: "*/10 * * * *"  # Cambiar a cada 10 minutos

Opciones disponibles:

• */5 * * * * - Cada 5 minutos (~288 ejecuciones/día)
• */10 * * * * - Cada 10 minutos (~144 ejecuciones/día)
• 0 * * * * - Cada hora (~24 ejecuciones/día)

La aplicación React verifica actualizaciones automáticamente cada 30 segundos. Para cambiar esto, edita src/hooks/useAutoRefresh.js:

const POLL_INTERVAL_MS = 30000; // 30 segundos en milisegundos

Modifica los parámetros de búsqueda en .github/workflows/update-projects.yml:

env:
  MAX_RESULTS: "500"    # Número máximo de repos (hasta 1000, puede devolver menos)
  MIN_STARS: "20"       # Estrellas mínimas (0 = sin límite)

Tu repositorio es público → ¡Sin límites! 🎉

Edita src/App.css para personalizar colores, fuentes y diseño. El tema actual usa:

• Fondo oscuro (#020617)
• Acentos azules (#3b82f6)
• Diseño moderno basado en tarjetas

La arquitectura React facilita la extensión:

• Añade nuevos componentes en src/components/
• Crea hooks personalizados en src/hooks/
• Actualiza traducciones en src/utils/translations.js
• Modifica la lógica principal en src/App.jsx

github-tail/
├── .github/
│   └── workflows/
│       ├── update-projects.yml    # Actualización de datos (cada 5 min)
│       └── pages.yml              # Build y despliegue de React
├── data/
│   └── projects.json              # Datos de repos generados automáticamente
├── scripts/
│   └── update_projects.py         # Script Python para obtener repos
├── src/
│   ├── components/                # Componentes React
│   │   ├── Header.jsx
│   │   ├── Controls.jsx
│   │   ├── ProjectList.jsx
│   │   ├── ProjectItem.jsx
│   │   ├── Pagination.jsx
│   │   ├── Footer.jsx
│   │   ├── UpdateNotification.jsx
│   │   └── RefreshIndicator.jsx
│   ├── hooks/                     # Hooks personalizados de React
│   │   ├── useLanguage.jsx        # Contexto de idioma
│   │   └── useAutoRefresh.js      # Lógica de auto-actualización
│   ├── utils/
│   │   └── translations.js        # Cadenas de traducción
│   ├── App.jsx                    # Componente principal
│   ├── App.css                    # Estilos globales
│   └── main.jsx                   # Punto de entrada React
├── index.html                     # Punto de entrada HTML para Vite
├── vite.config.js                 # Configuración de Vite
├── package.json                   # Dependencias de Node.js
├── README.md                      # Este archivo
├── CLAUDE.md                      # Guía para asistente IA
└── WORKFLOW_OPTIMIZATION.md       # Guía de optimización de workflows

• Verifica la pestaña Actions para mensajes de error
• Verifica los permisos del workflow en Settings → Actions
• Asegúrate de que GITHUB_TOKEN tenga permisos de escritura

GitHub proporciona 5,000 solicitudes de API/hora con autenticación (usada automáticamente).

• Configuración actual: ~288 solicitudes/día (muy dentro de los límites)
• Si alcanzas los límites, aumenta el intervalo del cron

• Limpia la caché del navegador
• Verifica si data/projects.json fue actualizado en el repositorio
• Verifica que GitHub Pages esté habilitado y desplegado desde la rama correcta

• Asegúrate de tener Node.js 20+: node --version
• Limpia node_modules y reinstala: rm -rf node_modules package-lock.json && npm install
• Verifica que todos los archivos .jsx tengan la extensión correcta
• Ejecuta npm run build localmente para probar antes de hacer push

• Verifica si el puerto 5173 ya está en uso
• Limpia la caché de Vite: rm -rf node_modules/.vite
• Reinicia el servidor de desarrollo: npm run dev

Este proyecto implementa optimización SEO integral para máximo tráfico orgánico:

• Metaetiquetas - Optimización completa de título, descripción y palabras clave
• Open Graph - Tarjetas de vista previa hermosas en redes sociales (Facebook, LinkedIn)
• Twitter Cards - Compartición optimizada en Twitter/X
• Schema.org - Datos estructurados (JSON-LD) para resultados de búsqueda enriquecidos
• Sitemap.xml - Ayuda a los motores de búsqueda a descubrir todas las páginas
• Robots.txt - Directivas de rastreo adecuadas para bots de búsqueda
• SEO Internacional - Etiquetas hreflang para versiones en inglés/español
• Manifest PWA - Capacidades de Aplicación Web Progresiva

Para documentación detallada de SEO, consulta SEO.md.

¡Las contribuciones son bienvenidas! Siéntete libre de:

• Reportar bugs vía Issues
• Enviar solicitudes de características
• Abrir Pull Requests con mejoras

Este proyecto está licenciado bajo la Licencia MIT - ver el archivo LICENSE para detalles.

• Construido con ❤️ usando React, Vite, GitHub Actions y GitHub Pages
• Impulsado por GitHub Search API
• Este es un experimento usando vibe coding

Si este proyecto te resulta útil y quieres impulsar más experimentos de código (y mi adicción al café), ¡considera invitarme a uno! ☕✨

Mi código funciona con cafeína y buenas vibras 🚀

Made with ❤️ by alcastelo