🎄 Reto Frontend Navideño 2024

¡Bienvenido/a al reto frontend más mágico del año! Este proyecto no es solo un desafío técnico, es una oportunidad para aprender, divertirse y crear algo especial en estas fechas navideñas.

🎯 Objetivo

El objetivo principal es aprender y disfrutar mientras programamos. No se trata de crear la aplicación perfecta, sino de:

• Practicar con tecnologías modernas
• Aprender nuevos conceptos
• Mejorar nuestras habilidades de desarrollo
• Divertirnos en el proceso
• Compartir con la comunidad

✨ Funcionalidades a Implementar

Puedes implementar todas o algunas de estas funcionalidades. ¡Tú eliges tu propio desafío!

🎮 Interacción Básica

1. Botón "Volver Arriba" (Scroll to Top)

• Debe aparecer cuando el usuario hace scroll hacia abajo
• Animación suave al subir
• Visible pero no intrusivo

Ejemplo

2. Selector de Tema (Dark/Light Mode)

• Toggle accesible y visible
• Persistencia usando localStorage
• Transición suave entre temas
• Considerar estados intermedios durante la carga

Ejemplo

3. Navegación Responsive

• Menú hamburguesa en móvil
• Navegación fluida en desktop
• Indicador de sección actual
• Transiciones suaves

4. Botones de Compartir

• Integración con APIs nativas de compartir
• Fallback para navegadores no compatibles
• Contador de compartidos (opcional)
• Redes sugeridas: Twitter, Facebook, LinkedIn, WhatsApp

Ejemplo

⏰ Características Navideñas

5. Cuenta Regresiva

• Actualización en tiempo real
• Formato: DD:HH:MM:SS
• Animación especial al llegar a cero

Ejemplo

6. Formulario de Contacto con Santa

• Validación de campos
• Feedback visual
• Animación de envío
• Campos sugeridos:
  • Nombre
  • Mensaje

Ejemplo

7. Lista de Regalos

• CRUD completo
• Persistencia en localStorage (o en cualquier otra base de datos)

Ejemplo

8. Modo Fiesta

• Toggle para activar/desactivar
• Efectos visuales (nieve, luces, etc.)
• Sonidos festivos (opcional)
• Performance optimizada

9. Quizzes navideños

• Preguntas sobre cultura navideña/peliculas/musica/etc

Ejemplo

10. Galería de recuerdos

• Carga de imágenes
• Slider de imágenes (con imagenes de stock)
• Si un usuario carga una imagen, debe aparecer en la galería de recuerdos

Ejemplo

11. Juego de memoria temático

• 6 cartas con imagenes de stock
• Una vez mezcladas, se debe poder dar click a dos cartas y si coinciden, se debe eliminar ambas cartas
• Al finalizar, debe mostrar el tiempo transcurrido y la cantidad de coincidencias

Ejemplo

🎵 Multimedia

12. Reproductor de villancicos

• Puede ser un reproductor de audio o video
• Debe tener un botón para reproducir/pausar
• Puedes utizar la API de YouTube o de Spotify

13. Juego "Adivina el Villancico" con emojis

• Debe tener un input para que el usuario ingrese el villancico
• Debe mostrar un emoji por cada letra que el usuario ingrese
• Al finalizar, debe mostrar el tiempo transcurrido y la cantidad de letras correctas

Ejemplo

14. Chat con un elfo de soporte

• Generador de imágenes navideñas con IA (puedes usar Replicate)
• Creador de historias navideñas con IA (puedes usar OpenAI)

🚀 Cómo Participar

1. Crea un nuevo repositorio en tu GitHub
2. Inicializa tu repositorio en local con la tecnología que elijas
3. Desarrolla tu solución
4. Comparte tu progreso en Discord
5. Diviértete y aprende

💡 Importante Recordar

• No hay soluciones incorrectas
• Lo importante es el proceso de aprendizaje
• Documenta tu código en el README
• Comparte tus dudas en Discord
• Ayuda a otros participantes

🛠️ Recursos

• React/Next.js/Vue/Angular/Svelte (¡tú eliges!)
• CSS (Tailwind, Styled-components, CSS Modules...)
• APIs externas (YouTube, Spotify, OpenAI...)
• LocalStorage/IndexedDB/Firebase para persistencia
• Librerías de animaciones como framer-motion
• Librerías de íconos como Lucide
• Librerías de gráficos como Lottie o Atropos
• Librerías de chatbots como Typebot
• Integración con IA como Replicate
• Imagenes de stock como Unsplash/Pexels

👥 Comunidad

• Únete a nuestro Discord
• Comparte tu progreso
• Aprende de otros participantes
• Pide ayuda cuando la necesites
• ¡Diviértete!

📝 Recomendaciones

• Empieza por las funcionalidades básicas
• Divide el proyecto en pequeñas tareas
• Haz commits frecuentes y pequeños
• Documenta tu proceso en el README
• No te frustres si algo no sale a la primera
• Aprende a buscar soluciones por tu cuenta
• Ayúdate de la inteligencia artificial

🏆 Criterios de Éxito

• Código limpio y bien documentado
• Buenas prácticas de desarrollo
• Funcionalidades implementadas correctamente
• Diseño responsive
• Accesibilidad básica
• Usar tecnologías modernas
• Diseño moderno y atractivo

🌟 Recuerda

Este reto no es una competencia, es una oportunidad para:

• Aprender nuevas tecnologías
• Mejorar tus habilidades
• Crear algo divertido
• Conocer otros desarrolladores
• Disfrutar programando

¡La magia de la Navidad está en el código! 🎄✨

📜 Licencia

MIT License - siéntete libre de usar este código como quieras

---

Hecho con ❤️ y 🎄 por Leandro Gartner.