Esta es una aplicación que estoy desarrollando en vivo en Twitch.
Consiste en una pequeña app hecha con Next.js, Tailwind, TypeScript y Firebase para generar desafíos a manera de multiple choice con un leaderboard autocalculado al final de la partida.
Disclaimer: La app pertenece a un caso de uso personal y es un clon de una ya existente.
- Maquetamos el
<Layout /> - Agregamos autenticación de firebase con email y password
- Commits:
- Deploy
- Se crean desafíos (mega hardcodeados) por medio de un botón en la página principal
- Se listan los desafíos de la persona y por medio de links se navega a la página de detalle que está vacía por el momento.
- Commits:
- Deploy
- Maquetamos una card muy sencilla para mostrar algo de información relevante del desafío
- Dibujamos un componente por cada estado del desafío (creado, jugando, terminado)
- Cambiamos el método de autenticación en el juego. De ahora en más usaremos Google
- Permitimos que cada persona logueada pueda "jugar" presionando un botón y obteniendo un score aleatorio
- Se muestra una tabla de posiciones con los resultados
- Commits:
- Deploy
- Agregamos más preguntas a los desafíos que se crean en la página principal para que tenga más sentido
- Validamos que se pueda jugar una sola vez por email
- Se muestra el estado del juego de la persona mientras el desafío no haya terminado
- Creamos la página para jugar donde se recorre la colección de preguntas, se permite elegir, se da feedback sobre si la elección fue correcta o no y se guarda al final un puntaje en base a la cantidad de aciertos
- Commits:
- Deploy
- Ordenamos la lista de desafíos en la página principal
- Agregamos sonidos de éxito y error al responder
- Agregamos un countdown a la pregunta que muestra el tiempo que te queda para terminar de responder. Quedó con algunos bugs pero lo mejoraremos el episodio que viene
- Agregamos 2 hooks: useAudio y useInterval que los usamos en los features anteriores
- Commits:
- Deploy
- Repensamos la cuenta regresiva que había quedado con algunos errores
- A la hora de calcular el score tenemos en cuenta el tiempo que se tardó en contestar siguiendo la fórmula que usa Kahoot!
- Mejoramos algunos detalles en forma de typos, colores y UX en general que los pasamos por alto en episodios anteriores
- Commits:
- Deploy
- Agregamos un contenedor en el de manera de evitar que el contenido se vaya hasta el borde
- Pusimos un color distinto en el fondo para aquellos challenges que no están terminados. Fue una manera de lidiar con la situación de que no tenemos filtros en esa lista
- Movimos las acciones de admin de los juegos hacia dentro de los cards. De esta manera es todo más intuitivo
- Mejoramos el copy de algunos botones y secciones
- Discutimos sobre flujos que no están del todo claros como el de la creación del objeto para la persona que va a jugar
- Mejoramos la estructura de los multiple choice. Pasamos a que las opciones se apilen, tengan un ícono que represente mejor el estado y movimos de lugar algunas partes de la UI para dar más claridad al estado actual del juego
- Mejoramos la pantalla final del juego que muestra el puntaje
- Commits:
- Deploy
- Mejoramos el agregando un select con el nombre del user y la posibilidad de hacer sign out desde las opciones
- Agregamos filtro por estado (created, playing, finished) a la lista de desafíos
- Movimos la funcionalidad de crear un desafío a una nueva página
- Agregamos conteo en tiempo real de cuantas personas se anotaron a jugar, cuantas están jugando y cuantas ya terminaron
- Agregamos la posibilidad de exportar la tabla de posiciones en formato CSV para el user admin
- Commits:
- Deploy
- Le dimos vida a la página
/createdonde empezamos a darle funcionalidad a un formulario para generar los desafíos. No lo pudimos completar, quedaron 2 pequeños features para corregir pero quedó bastante bien. Este es el stream más largo que hicimos (3 hs.) porque usamos Formik para no escribir todo tan de 0 y nos llevó algo de tiempo entender como usarlo y demás. Pero valió la pena al final :D - Commits:
- Deploy
- Agregarmos la funcionalidad de elegir la respuesta correcta al momento de crear un desafío y también mejoramos la validación del formulario por completo
- Solucionamos el error con la descarga de los resultados del juego a un .csv
- Commits:
- Deploy
- Agregamos la posibilidad de subir una foto (.jpg, .jpeg o .png) cuando se crea un desafío
- Commits:
- Deploy
- Agregamos la posición al .csv que exportamos con la tabla de posiciones
- Intentamos agregar Google Analytics pero tuvimos un error con TypeScript que no pudimos solucionar
- Intentamos validar el peso de las imágenes que subimos a los desafíos pero tuvimos unos errores con Formik
- Commits:
- Deploy
- Solucionamos un error en la configuración de eslint que nos estaba imposibilitando ignorar un error para terminar con lo de Google Analytics
- Agregamos la validación del peso de la foto que subimos al desafío
- Deshabilitamos el form donde creamos el desafío cuando se está enviando
- Validamos que la persona que va a jugar sea la misma que está logueada
- Commits:
- Deploy
- Mejoramos la UI del componente que refleja el estado realtime del desafío y lo reutilizamos en la página del juego
- Solucionamos un error al reproducir el sonido en el juego durante el primer segundo
- Mejoramos el uso del campo de tipo fecha: usamos el formato UTC para almacenar la fecha y luego la convertimos a formato local al momento de mostrarla
- Commits:
- Deploy
- Mejoramos el estado
disabledde los inputs del formulario de creación de desafíos para que reflejen mejor el estado de que se está procesando - Quitamos el botón de login del header y usamos un componente para ejecutar esa acción que ahora pasa a estar en cada página
- Cambiamos los botones para filtrar de la home por un select
- Agregamos meta tags al sitio para que en redes sociales se vea algo de información que tenga sentido
- Commits:
- Deploy
Duplicar el archivo .env.template, renombrarlo como .env. y agregar los valores para poder correr el proyecto. Luego:
# Instalar dependencias
npm i
# Correr la aplicación
npm run dev