F1 2026 Web

El calendario oficial más moderno y dinámico para la temporada 2026 de Fórmula 1.

🌐 Ver Demo en Vivo · 🐞 Reportar Bug · ✨ Solicitar Feature

---

🏎️ Sobre el Proyecto

F1 2026 Web es una aplicación web progresiva (PWA) diseñada para ofrecer la mejor experiencia visual a los fans de la Fórmula 1. Preparada para la histórica temporada 2026, esta app no solo te muestra las fechas, sino que te sumerge en la emoción de las carreras.

✨ Características Principales

• 📅 Temporada Completa 2026: Información actualizada de las 24 carreras, incluyendo el nuevo Gran Premio de Madrid y los 6 eventos Sprint.
• ⏲️ Cuenta Atrás en Tiempo Real: Visualización precisa de los días restantes para el próximo Gran Premio.
• 🌍 Horarios Locales: Conversión automática de todas las sesiones (Libres, Clasificación, Carrera) a tu zona horaria local.
• ⚡ Filtrado Dinámico: Busca por carrera, circuito, o filtra rápidamente eventos Sprint y próximas carreras.
• 🎨 Diseño Premium: Interfaz moderna con efectos de cristal (glassmorphism), animaciones fluidas con framer-motion y efectos de inclinación 3D.
• 📱 PWA Ready: Instalable como aplicación nativa en dispositivos móviles y escritorio.
• 🔔 Notificaciones: Sistema de recordatorios integrado (simulación).

---

🛠️ Tecnologías Utilizadas

Este proyecto ha sido construido utilizando las últimas tecnologías en desarrollo web para asegurar el máximo rendimiento y la mejor experiencia de usuario (DX):

• Core: React 19
• Build Tool: Vite
• Estilos: CSS3 Moderno (Variables, Flexbox, Grid, Glassmorphism)
• Animaciones: Framer Motion
• Interacciones: React Parallax Tilt
• Notificaciones: Sonner
• Sonido: Use-Sound

---

🚀 Instalación y Uso Local

Sigue estos pasos para ejecutar el proyecto en tu máquina local:

1. Clonar el repositorio

   git clone https://github.com/JoseAlvarezDev/f1-2026-web.git
   cd f1-2026-web

2. Instalar dependencias

   npm install

3. Iniciar servidor de desarrollo

   npm run dev

   La aplicación estará disponible en http://localhost:5173.

4. Construir para producción

   npm run build

---

📂 Estructura del Proyecto

f1-2026-web/
├── public/              # Assets estáticos (imágenes, sonidos, robots.txt)
├── src/
│   ├── components/      # Componentes modulares (Header, RaceList, etc.)
│   ├── data/            # Datos estáticos (races.json)
│   ├── utils/           # Utilidades y helpers (dateUtils.js)
│   ├── App.jsx          # Componente principal
│   ├── main.jsx         # Punto de entrada
│   └── style.css        # Estilos globales y variables
├── index.html           # HTML base con SEO optimizado
└── vite.config.js       # Configuración de Vite y PWA

---

👤 Autor

Jose Alvarez Dev

• Website: josealvarezdev.web.app
• Email: [email protected]
• GitHub: @JoseAlvarezDev
• LinkedIn: Jose Alvarez Dev

---

📄 Licencia

Distribuido bajo la licencia MIT. Ver LICENSE para más información.

By Jose Alvarez Dev 🏎️ para la comunidad de F1