Skip to content

lukcba-developers/tercer-tiempo-fc-website

BranchesTags

Repository files navigation

⚽ Tercer Tiempo FC - Sitio Web Oficial

Club Amateur de Fútbol - Despeñaderos, Córdoba, Argentina

React React Router License Tests Coverage

📋 Tabla de Contenidos

🎯 Sobre el Proyecto

Sitio web oficial del Tercer Tiempo FC, un club amateur de fútbol fundado en 2025 en Despeñaderos, Córdoba, Argentina. La banda de amigos que se junta cada semana para darle a la redonda y después al asado. ¡Acá la amistad es lo que vale!

¿Por qué "Tercer Tiempo"?

En el fútbol, el "tercer tiempo" es ese momento después del partido donde los equipos comparten un asado, unas birras y se fortalecen los lazos de amistad. Es el espíritu de nuestro club.

🎯 Objetivo Principal

Este sitio está optimizado para captación de sponsors locales, con un funnel de conversión diseñado estratégicamente para transformar visitantes en sponsors activos.

✨ Características

🚀 Técnicas

  • ✅ SPA Moderna: React 19.1.1 con React Router 7.9.3
  • ✅ Responsive Design: Optimizado para todos los dispositivos
  • ✅ Accesibilidad (WCAG AA): ARIA labels, navegación por teclado, skip links
  • ✅ Performance: Lazy loading, code splitting, React.memo
  • ✅ Testing: 51 tests con ~95% cobertura
  • ✅ CI/CD: ESLint + Prettier + Husky pre-commit hooks
  • ✅ Clean Architecture: Context API, custom hooks, atomic design

💰 Marketing & Conversión

  • ✅ Funnel de Sponsors: Homepage optimizada para conversión
  • ✅ Prueba Social: Sección destacada con sponsors actuales
  • ✅ WhatsApp Integration: Contacto directo con mensajes pre-cargados
  • ✅ 3 Paquetes de Sponsors: Desde $5K hasta $20K mensuales
  • ✅ Analytics Ready: Sistema de tracking con 18 eventos predefinidos
  • ✅ Storytelling Emocional: Historia del club que conecta con sponsors locales
  • ✅ Instagram Integration: Posts de Instagram embebidos en sección noticias
  • ✅ Google AdSense: Monetización con anuncios en páginas clave

🛠️ Tecnologías

  • React 19.1.1
  • React Router 7.9.3
  • PropTypes 15.8.1
  • ESLint + Prettier + Husky
  • Jest + React Testing Library

🚀 Comenzando

Prerequisitos

  • Node.js >= 16.0.0
  • npm >= 8.0.0

Instalación

# Clonar repositorio
git clone https://github.com/tercertiempofc/tercer-tiempo-fc-website.git
cd tercer-tiempo-fc-website

# Instalar dependencias
npm install

# Iniciar desarrollo
npm start

El sitio estará disponible en http://localhost:3000

Comandos Disponibles

npm start                    # Dev server (localhost:3000)
npm run build                # Build producción
npm test                     # Ejecutar tests
npm test -- --coverage       # Tests con cobertura
npm run lint                 # Ejecutar ESLint
npm run lint:fix             # Corregir problemas ESLint
npm run format               # Formatear código con Prettier

🏗️ Arquitectura

Principios de Diseño

  • Separación de Responsabilidades: Cada componente tiene una única responsabilidad clara
  • Atomic Design: Componentes pequeños y reutilizables
  • Clean Code: Código legible y mantenible
  • Performance First: Optimización desde el diseño

Patrones Implementados

  • Container/Presentational: Separación lógica/UI
  • Custom Hooks: Lógica reutilizable encapsulada
  • Compound Components: Componentes complejos con sub-componentes
  • Context API: Estado global sin prop drilling

Flujo de Navegación

Routing Híbrido:

  • Rutas (/, /calendario, /contacto, /bancanos)
  • Secciones con scroll (#team, #sponsors, #news)
  • Header inteligente que maneja navegación cross-page

Funnel de Sponsors (Homepage):

Hero → SponsorsBanner → WhySupport →
PlayerOfTheWeek → Team → Sponsors → History → News

📁 Estructura del Proyecto

tercerTiempo/
├── public/                      # Assets estáticos
│   ├── index.html
│   ├── manifest.json
│   └── assets/                  # Imágenes y recursos
│
├── src/
│   ├── components/              # Componentes React
│   │   ├── common/              # Componentes reutilizables
│   │   │   ├── Button.js        # Botones con variantes
│   │   │   ├── Badge.js         # Labels y badges
│   │   │   ├── Card.js          # Contenedores
│   │   │   ├── ErrorBoundary.js # Manejo de errores
│   │   │   ├── LazyImage.js     # Lazy loading de imágenes
│   │   │   └── SkipLink.js      # Accesibilidad
│   │   │
│   │   ├── features/            # Componentes de features
│   │   │   ├── PlayerCard.js    # Card de jugador
│   │   │   └── AccordionTeam.js # Acordeón del equipo
│   │   │
│   │   ├── layout/              # Layout components
│   │   │   ├── Header.js        # Navegación principal
│   │   │   └── Footer.js        # Pie de página
│   │   │
│   │   └── Team/                # Módulo Team
│   │       └── AccordionTeam.js
│   │
│   ├── pages/                   # Páginas (rutas)
│   │   ├── Calendario.js        # Página de calendario
│   │   ├── Contacto.js          # Página de contacto
│   │   ├── Bancanos.js          # Página de sponsors (CTA principal)
│   │   ├── Donaciones.js        # Página de donaciones
│   │   ├── Picados.js           # Página de partidos amistosos
│   │   └── NotFound.js          # Página 404
│   │
│   ├── config/                  # Configuración
│   │   ├── constants.js         # Constantes globales
│   │   ├── theme.js             # Sistema de diseño
│   │   ├── analytics.js         # Config de analytics
│   │   ├── adsense.js           # Google AdSense config
│   │   ├── seo.js               # SEO metadata
│   │   ├── hero.js              # Hero section config
│   │   ├── news.js              # News section config
│   │   ├── donations.js         # Donations config
│   │   └── messages.js          # WhatsApp messages
│   │
│   ├── context/                 # Context API
│   │   └── AppContext.js        # Estado global de la app
│   │
│   ├── data/                    # Datos separados de componentes
│   │   ├── news/                # Datos de noticias
│   │   ├── sponsors/            # Datos de sponsors
│   │   └── team/                # Datos del equipo
│   │
│   ├── hooks/                   # Custom Hooks
│   │   ├── useNavigation.js     # Navegación inteligente
│   │   ├── useWhatsApp.js       # Integración WhatsApp
│   │   ├── useScrollToSection.js# Scroll suave a secciones
│   │   ├── useMediaQuery.js     # Media queries responsive
│   │   ├── useTeamFilters.js    # Filtrado del equipo
│   │   ├── useAnalytics.js      # Tracking de eventos
│   │   ├── useInstagram.js      # Instagram API integration
│   │   ├── useJsonData.js       # JSON data loading
│   │   └── useIntersectionObserver.js # Lazy loading
│   │
│   ├── services/                # Servicios y APIs
│   │   ├── api/                 # Mock API layer
│   │   │   ├── mockApi.js       # Simulación de API
│   │   │   └── endpoints.js     # Endpoints disponibles
│   │   └── instagram/           # Instagram integration
│   │       ├── instagramAPI.js  # Instagram Basic Display API
│   │       └── instagramConfig.js # Instagram config
│   │
│   ├── types/                   # PropTypes
│   │   └── propTypes.js         # Definiciones de PropTypes
│   │
│   ├── utils/                   # Utilidades
│   │   ├── validation.js        # Validaciones
│   │   ├── whatsapp.js          # Helpers de WhatsApp
│   │   ├── analytics.js         # Core de analytics
│   │   └── constants.js         # Constantes auxiliares
│   │
│   ├── App.js                   # Componente raíz
│   ├── App.css                  # Estilos globales + design system
│   └── index.js                 # Entry point
│
├── .eslintrc.js                 # Configuración ESLint
├── .prettierrc                  # Configuración Prettier
├── .husky/                      # Git hooks
├── package.json
├── CLAUDE.md                    # Instrucciones para Claude Code
├── ANALYTICS_SETUP.md           # Guía de analytics
└── README.md                    # Este archivo

Archivos de Documentación en /docs

  • ACTUALIZAR_CRACK_SEMANAL.md: Guía para actualizar el crack de la semana
  • ACTUALIZAR_LEGENDARIOS.md: Guía para actualizar jugadores legendarios
  • ACTUALIZAR_PLANTEL.md: Guía para actualizar el plantel del equipo
  • ACTUALIZAR_SPONSORS.md: Guía para actualizar sponsors
  • ACTUALIZAR_SPONSORS_BANNER.md: Guía para actualizar banner de sponsors
  • ADSENSE_SETUP.md: Configuración completa de Google AdSense
  • ANALYTICS_SETUP.md: Configuración de Google Analytics 4
  • DEPLOYMENT_GUIDE.md: Guía de deployment automático con GitHub Actions
  • DEPLOYMENT_README.md: Instrucciones de deployment
  • GITHUB_SECRETS_EXAMPLE.md: Ejemplo de configuración de secrets
  • GOOGLE_ANALYTICS_SETUP.md: Setup detallado de Analytics
  • GUIA_DEPLOYMENT_HOSTINGER.md: Deployment específico para Hostinger
  • SOLID_CLEAN_CODE_ANALYSIS.md: Análisis de código y arquitectura
  • TECH_STACK.md: Stack tecnológico completo
  • VERIFICAR_DEPLOYMENT.md: Checklist post-deployment

💰 Sponsors y Monetización

Estrategia de Conversión

El sitio implementa un funnel de marketing completo para convertir visitantes en sponsors:

1. AWARENESS (Conciencia)

  • Hero con CTA principal "Banca el Club"
  • Prueba social inmediata (12 sponsors actuales)

2. CONSIDERATION (Consideración)

  • Sección "Por Qué Bancarnos" con 3 beneficios clave
  • Historia emocional del club
  • Estadísticas de visibilidad real

3. DECISION (Decisión)

  • Página /bancanos con 3 paquetes claros
  • Detalles de beneficios por nivel
  • CTAs de WhatsApp en cada paquete

4. CONVERSION (Conversión)

  • Contacto directo por WhatsApp
  • Mensajes pre-cargados específicos por paquete
  • Seguimiento con analytics

Paquetes de Sponsors

Nivel Precio Beneficios Clave
Amigo del Club $5,000/mes Logo en web + menciones
Colaborador Oficial $10,000/mes Logo remera + redes + web
Sponsor Principal $20,000/mes Logo grande + eventos VIP

Componentes Relacionados

  • src/components/SponsorsBanner.js - Banner horizontal de sponsors
  • src/components/WhySupport.js - Beneficios de sponsorear
  • src/components/Sponsors.js - Grid de sponsors actuales
  • src/pages/Bancanos.js - Landing page de conversión
  • src/utils/whatsapp.js - Mensajes pre-cargados
  • src/hooks/useJsonData.js - Carga dinámica de sponsors desde JSON

📊 Analytics

Sistema de Tracking

El sitio incluye un sistema de analytics completo listo para conectar con Google Analytics 4:

18 Eventos Predefinidos:

Alta prioridad (conversión):

  • cta_banca_club_click - Click en CTAs principales
  • whatsapp_sponsor_click - Click en contacto WhatsApp
  • paquete_view - Vista de paquete de sponsor
  • bancanos_page_view - Vista de página de sponsors

Media prioridad (engagement):

  • sponsor_section_scroll - Scroll a sección sponsors
  • why_support_view - Vista de beneficios
  • social_proof_view - Vista de prueba social

Baja prioridad (navegación):

  • team_view, calendar_view, news_view, etc.

Configuración

  1. Obtener ID de Google Analytics 4
  2. Actualizar src/config/analytics.js:
export const ANALYTICS_CONFIG = {
  GA4_MEASUREMENT_ID: 'G-XXXXXXXXXX', // Tu ID real
  FB_PIXEL_ID: '', // Opcional
  DEBUG_MODE: false
};

Ver ANALYTICS_SETUP.md para guía completa.

Uso en Componentes

import { useAnalytics } from '../hooks/useAnalytics';

function MyComponent() {
  const { trackCtaClick, trackPaqueteView } = useAnalytics();

  const handleClick = () => {
    trackCtaClick('hero', 'bancanos');
    // ... resto de la lógica
  };

  return <button onClick={handleClick}>Banca el Club</button>;
}

🧪 Testing

Suite de Tests

  • ✅ Tests implementados con Jest y React Testing Library
  • ✅ 11 archivos de test en el proyecto
  • ✅ Alta cobertura en utilidades y hooks críticos

Ejecutar Tests

# Todos los tests
npm test

# Con cobertura
npm test -- --coverage

# Watch mode (durante desarrollo)
npm test -- --watch

# Un archivo específico
npm test -- validation.test.js

Archivos con Tests

Archivo Tipo
utils/validation.js Unitarios
utils/whatsapp.js Unitarios
utils/dates.js Unitarios
hooks/useTeamFilters.js Unitarios
hooks/useWhatsApp.js Unitarios
hooks/useInstagram.js Unitarios e Integración
context/AppContext.js Integración
components/common/Button Componente
services/instagram/instagramAPI.js API Layer

Objetivo: Mantener alta cobertura en archivos críticos

Tipos de Tests

  1. Tests Unitarios: Utils, hooks, funciones puras
  2. Tests de Integración: Context API, data flow
  3. Tests de Componentes: Rendering, interacciones, accesibilidad

🚀 Deployment

Build de Producción

npm run build

Genera carpeta build/ optimizada para producción.

Hosting Actual

  • Provider: Hostinger
  • Dominio: tercertiempofc.com (ejemplo)
  • FTP: Configurado en .github/workflows/ (si aplica)

Checklist Pre-Deploy

  • Ejecutar tests: npm test
  • Build exitoso: npm run build
  • Revisar warnings de build
  • Verificar bundle size (<100kB gzipped)
  • Configurar analytics con ID real
  • Actualizar URLs de producción en constants.js

🤝 Contribuir

¡Las contribuciones son bienvenidas! Sigue estos pasos:

  1. Fork el proyecto
  2. Crear branch de feature (git checkout -b feature/AmazingFeature)
  3. Commit cambios (git commit -m 'feat: Add AmazingFeature')
  4. Push al branch (git push origin feature/AmazingFeature)
  5. Abrir Pull Request

Convenciones de Commit

Seguimos Conventional Commits:

feat: nueva funcionalidad
fix: corrección de bug
docs: cambios en documentación
style: formateo, puntos y comas
refactor: refactorización de código
test: agregar o modificar tests
chore: actualizar dependencias

Code Quality

Los pre-commit hooks ejecutarán automáticamente:

  • ✅ ESLint para detectar problemas
  • ✅ Prettier para formateo consistente
  • ✅ Tests unitarios si aplica

Guidelines

  1. Componentes: Usar functional components con hooks
  2. CSS: Seguir sistema de diseño en App.css
  3. PropTypes: Definir en todos los componentes
  4. Tests: Agregar tests para nueva funcionalidad
  5. Accesibilidad: ARIA labels, navegación por teclado

📄 Licencia

MIT License - ver archivo LICENSE para detalles

📞 Contacto

Tercer Tiempo FC

  • 📧 Email: contacto@tercertiempofc.com.ar
  • 📱 WhatsApp: +54 351 460 3456
  • 📍 Ubicación: Despeñaderos, Córdoba, Argentina
  • 🏟️ Jugamos en: La Gran 7 [Complejo Tribunales]
  • ⏰ Horario: Sábados 20:00hs

Redes Sociales

🙏 Agradecimientos

  • 💚 A la banda que se suma cada semana
  • 🤝 A los sponsors que nos bancan
  • ⚽ Al Toti por fundar esto
  • 🎉 A todos los que ponen onda

📊 Métricas del Proyecto

Métrica Valor
Tamaño Bundle (gzipped) ~89 kB
Tests 11 archivos de test
Score Lighthouse 95+
Accesibilidad WCAG AA ✅
Componentes 30+
Custom Hooks 9
Páginas 6
Archivos Config 10
Documentación 15 archivos MD

🗺️ Roadmap

✅ Completado

  • SPA completa con React + React Router
  • Sistema de componentes reutilizables
  • Funnel completo de sponsors
  • Analytics ready
  • Suite de testing
  • CI/CD con pre-commit hooks y GitHub Actions
  • Instagram integration (Instagram Basic Display API)
  • Google AdSense configurado y activo
  • Sistema de gestión de contenido con JSON
  • Documentación completa (15 archivos MD)

🚧 En Progreso

  • Activar Google Analytics 4 en producción
  • Refresh automático del token de Instagram
  • Backend para formulario de contacto

🔮 Futuro

  • Sistema de login para jugadores
  • Estadísticas en tiempo real
  • App móvil (React Native)
  • Panel de admin para contenido
  • Sistema de pagos online para sponsors
💚⚽ Hecho con pasión por el fútbol y la amistad ⚽💚

Volver arriba ↑

About

Sitio web oficial del club amateur de fútbol Tercer Tiempo FC de Córdoba, Argentina

tercertiempofc.github.io/tercer-tiempo-fc-website

Topics

react website sports soccer football argentina club-website cordoba amateur-football

Resources

Readme
Activity

Stars

0 stars

Watchers

0 watching

Forks

0 forks
Report repository

Releases

No releases published

Packages

No packages published

Languages