Skip to content

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.

License

Notifications You must be signed in to change notification settings

durancristhian/cremona

Repository files navigation

cremona

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.

Demo del proyecto terminado

Demo

Episodio 1, Sábado 22/08/2020

  • Maquetamos el <Layout />
  • Agregamos autenticación de firebase con email y password
  • Commits:
  • Deploy

Episodio 1

Episodio 2, Martes 25/08/2020

  • 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

Episodio 2

Episodio 3, Sábado 29/08/2020

  • 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

Episodio 3

Episodio 4, Martes 01/09/2020

  • 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

Episodio 4

Episodio 5, Sábado 05/09/2020

  • 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

Episodio 5

Episodio 6, Martes 08/09/2020

  • 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

Episodio 6

Episodio 7, Sábado 12/09/2020

  • 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

Episodio 7

Episodio 8, Martes 15/09/2020

  • 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

Episodio 8

Episodio 9, Sábado 18/09/2020

  • Le dimos vida a la página /create donde 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

Episodio 9

Episodio 10, Martes 22/09/2020

  • 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

Episodio 10

Episodio 11, Sábado 26/09/2020

  • Agregamos la posibilidad de subir una foto (.jpg, .jpeg o .png) cuando se crea un desafío
  • Commits:
  • Deploy

Episodio 11

Episodio 12, Martes 29/09/2020

  • 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

Episodio 12

Episodio 13, Sábado 3/10/2020

  • 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

Episodio 13

Episodio 14, Martes 6/10/2020

  • 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

Episodio 14

Episodio 15, Sábado 10/10/2020

  • Mejoramos el estado disabled de 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

Episodio 15

Desarrollo

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

About

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.

Resources

License

Stars

Watchers

Forks