https://github.com/gartnerleandro/navicode-2024
Reto Frontend Navideño 2024
https://github.com/gartnerleandro/navicode-2024
chellenge christmas navidad
Last synced: 2 months ago
JSON representation
Reto Frontend Navideño 2024
- Host: GitHub
- URL: https://github.com/gartnerleandro/navicode-2024
- Owner: gartnerleandro
- Created: 2024-11-29T16:50:18.000Z (6 months ago)
- Default Branch: main
- Last Pushed: 2024-11-29T19:18:14.000Z (6 months ago)
- Last Synced: 2025-01-29T10:40:17.016Z (4 months ago)
- Topics: chellenge, christmas, navidad
- Language: CSS
- Homepage: https://retonavicode.com
- Size: 159 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 🎄 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](https://discord.gg/wjawp6eNr3)
- 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.