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
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