Reto Next.js

En Web Reactiva nos proponemos un reto durante Enero de 2023 para profundizar en Next.js, una potente y revolucionaria herramienta de creación de aplicaciones web.

¡Soluciones presentadas!

🥳 Felicidades a los participantes 🏆

Ver código de @gabrim90

Ver código de @jorgeAoiz

🏝 ¿Qué tiene esto de bueno para ti?

• Ampliar tu portfolio de conocimientos y proyectos con una tecnología que lo está petando
• Crear un software que tiene un fin, que hace algo
• Picarte para entender mejor React/Next.js
• La oportunidad de compartir este aprendizaje con otra gente que le pasan las mismas cosas que a ti.
• Ganarte una insignia única si completas el reto ;)

🔥 Reto Principal

Enero es un momento ideal para marcarse buenos propósitos. Qué mejor que tener una hoja de ruta para saber qué debemos hacer para cumplir ese propósito.

Vamos a crear una aplicación web para generar una lista de tareas con la ayuda de la IA de OpenAI.

Es la excusa perfecta para conectarnos a la API de OpenAI y mandarle peticiones para ver que nos responde.

Requisitos:

• Formulario para pedir un tema sobre el que hacer la checklist
• Botón de enviar petición
• Visualizar resultado en pantalla
• Botón de “Repetir” para recuperar otra solución y otro de “Borrar”
• Diseño sobrio y sencillo

👉 Usaremos la versión 13 de Next.js

Ejemplo

De esta forma nosotros escribiríamos en el formulario:

Hacer más ejercicio

Y el resultado podría ser algo como esto:

1. Identifica tus objetivos de ejercicio: ¿Quieres correr una maratón? ¿Quieres mejorar tu fuerza o tu resistencia cardiovascular? ¿Quieres perder peso o tonificar tus músculos?
2. Elige una actividad física que te guste
3. Establece un horario de ejercicio
4. Encuentra un compañero de entrenamiento
5. Bla bla bla

¿Muy sencillo?

Eso parece, pero seguro que nos encontramos más de una sorpresa en el camino.

De todas formas puedes añadirle más dificultad al reto completando desafíos adicionales.

🤸‍♀️ Desafios adicionales

Sugerencias de características adicionales para que completes el reto en función a tu tiempo y habilidades.

• Añade persistencia de datos. Con Firebase, Supabase o SQLIte. Guarda los checklist generados y prepara una lista para poder recuperar los que ya has generado.
• Añade autenticación. Por ejemplo con Auth.js (antes NextAuth)
• Utiliza un estilo brutalista para darle más impacto visual a la aplicación

👉 Dani hará el reto y lo contará en detalle, está bien, pero, ¡¡súmate al reto con tus propias manos sobre el teclado!!

📚 Recursos y materiales

• Tutorial oficial
• Taller de introducción a Next.js
• Solución en vídeo al taller

📅 Calendario

Propongo un calendario para cumplir semana a semana con un poquito de la ejecución del reto más sencillo. Hazte el tuyo propio o, incluso, pídeselo a la IA de tu aplicación ;)

Semana 1: Instalación de todo lo necesario para arrancar con Next.js

Semana 2: Creación del formulario y la app en OpenAI

Semana 3: Conexión de la webapp con OpenAI

Semana 4: Remates y tontás. Subir a producción sería buen puntazo.

🤙 ¿Cómo puedes participar?

• Siguiendo el 🔥 Reto Principal y compartiendo tu solución a través de las issues del repositorio
• Aprendiendo por tu cuenta, preguntando tus dudas y compartiendo tus avances en la comunidad con #RetoNextjs
• Asistiendo al Taller de Next.js del 12 de Enero de 2023
• Consumiendo el contenido creado en torno al reto
• Aportando feedback para saber por qué no te ha interesado participar ;)

😅 ¿Cómo puedes llamar a tu aplicación web?

1. "TaskMaster"
2. "To-Do Genius"
3. "ListMate"
4. "TaskHive"
5. "Planit"
6. "EfficientList"
7. "Taskify"
8. "GoalGetter"
9. "TaskCrush"
10. "DoList"

Estas de arriba las ha generado la IA, a mi me gustan también cosas como

• De una vez por todas
• TareaViva
• O lo haces o pagas prenda

🤩 La comunidad malandriner dice:

La versión 13.

🥳 Conclusiones para llevarse a casa

• Es pronto para saberlas ;)