frontendcafe/air-flashcards

air-flashcards's Issues

Crear componente NewStudySession

Crear endpoint para crear una card

Contexto

Necesitamos un endpoint para agregar cards. No es necesario mejorar la interface cards, para eso esta la issue #36 . No es necesario agregar una pagina que renderice este endpoint, podes hacerlo si tessirve pero el alcance de esta card es el endpoint.

Criterios de aceptacion

1. Debe crearse un endpoint(en las api routes de next) que permita agregar registros a la coleccion collections/id/cards
2. Una card debe pertenecer a una coleccion si o si.

Links utiles

Si tessirve dejo la documentacion sobre como realizar esto con firestore:
https://firebase.google.com/docs/firestore/manage-data/add-data

Nuestra consola de firebase:
https://console.firebase.google.com/u/0/project/air-flashcards/overview

Crear formulario para crear una sesión

Integrar autenticacion del frontend con las llamadas a firestore

Contexto

Necesitamos autenticar las requests que le hacemos a firestore. Debemos tomar el token del usuario autenticado e implementarlo en una funcion generica que despues se utilize para hacer las peticiones de informacion a firestore.

Criterios de aceptacion

1. Se debe integrar el usuario loggeado con las peticiones a firestore.
2. Se debe dejar un metodo generico para agregar las credenciales en cada request

Links utiles

Si tessirve dejo la documentacion sobre como realizar esto con firestore:
https://firebase.google.com/docs/firestore/security/overview

Nuestra consola de firebase:
https://console.firebase.google.com/u/0/project/air-flashcards/overview

Crear endpoint para editar una coleccion

Contexto

Necesitamos un endpoint para editar colecciones. No es necesario mejorar la interface collection, para eso esta la issue #35 . No es necesario agregar una pagina que renderice este endpoint, podes hacerlo si tessirve pero el alcance de esta card es el endpoint.

Criterios de aceptacion

1. Debe crearse un endpoint(en las api routes de next) que permita editar registros de la coleccion collections

Links utiles

Si tessirve dejo la documentacion sobre como realizar esto con firestore:
https://firebase.google.com/docs/firestore/manage-data/add-data#update-data

Nuestra consola de firebase:
https://console.firebase.google.com/u/0/project/air-flashcards/overview

Crear endpoint para eliminar una coleccion

Contexto

Necesitamos un endpoint para eliminar colecciones. No es necesario mejorar la interface collection, para eso esta la issue #35 . No es necesario agregar una pagina que renderice este endpoint, podes hacerlo si tessirve pero el alcance de esta card es el endpoint.

Criterios de aceptacion

1. Debe crearse un endpoint(en las api routes de next) que permita eliminar registros de la coleccion collections

Links utiles

Si tessirve dejo la documentacion sobre como realizar esto con firestore:
https://firebase.google.com/docs/firestore/manage-data/delete-data

Nuestra consola de firebase:
https://console.firebase.google.com/u/0/project/air-flashcards/overview

Crear endpoint que permita eliminar sesiones de estudio de un usuario

Contexto

Necesitamos un endpoint para eliminar sesiones de estudio de un usuario.

Criterios de aceptacion

• Debe crearse un endpoint(en las api routes de next) que recibiendo un uid de un usuario, y un id de studySession, permita chequear que el uid de ella es el mismo que el usuario tiene, y en caso de ser correcto, eliminar esa sesión de estudio.

Setup de la style-guide

Contexto

Necesitamos hacer el detup del tema completo que se definio por diseño para despues utilizarlo en las distintas paginas y componentes.

Criterios de aceptacion

1. Agregar la tipografia a la app
2. Crear las variables de la tipografia
3. Crear los colores restantes en el theme
4. Se debe partir de esta rama, que tiene el setup inicial: feature/integrate-chakra-ui

Links utiles

Figma de la style-guide:
https://www.figma.com/file/T1vCl4wMSd8IvDtU82MZUC/Flashcards?node-id=346%3A4501

Crear componente GameStatus

Crear componente GameStatus, el cual debe ser capaz de recibir y renderizar

• cantidad de preguntas correctas
• cantidad de preguntas incorrectas
• pregunta actual
• preguntas totales

Cuando no hay preguntas correctas respondidas, se muestran rectángulos como en la primera imagen

Crear rutas privadas

Crear componente que reciba por props una ruta, y redirija al usuario hacia ella en caso de que no esté logueado.

Hay determinadas rutas a las que solo se va a poder acceder una vez que estas loggeado, se debe crear la lógica para esta validación.

Links utiles

Doc de firebase para obtener el usuario actual
https://firebase.google.com/docs/auth/web/manage-users#get_the_currently_signed-in_user

Crear endpoint para obtener una coleccion por id de session de estudio

Contexto

Necesitamos un endpoint para buscar una coleccion que contiene una sesion de estudio. No es necesario mejorar la interface collection, para eso esta la issue #35 . No es necesario agregar una pagina que renderice este endpoint, podes hacerlo si tessirve pero el alcance de esta card es el endpoint.

Criterios de aceptacion

1. Debe crearse un endpoint(en las api routes de next) que permita obtener una collection por un id de sesion de estudio
2. Se debe recibir por parametro el id de la sesion de estudio

Links utiles

Si tessirve dejo la documentacion sobre como realizar esto con firestore:
https://firebase.google.com/docs/firestore/query-data/queries#simple_queries

Nuestra consola de firebase:
https://console.firebase.google.com/u/0/project/air-flashcards/overview

Configurar linter

Configurar comando para hacer lint en el proyecto, inicialmente habiamos pensado en implementar la configuracion de airbnb. Tambien ver si hace falta configurar prettier, si con eslint se puede resolver todo mejor.

Se aceptan propuestas.

Crear endpoint para obtener una card por id

Contexto

Necesitamos un endpoint para buscar una card por id. No es necesario mejorar la interface card, para eso esta la issue #36 . No es necesario agregar una pagina que renderice este endpoint, podes hacerlo si tessirve pero el alcance de esta card es el endpoint.

Criterios de aceptacion

1. Debe crearse un endpoint(en las api routes de next) que permita obtener una collections/id/cards/CARD_ID por id de la card.
2. Se debe recibir por parametro el id de la card a obtener
3. Se debe retornar la informacion de la card

Links utiles

Si tessirve dejo la documentacion sobre como realizar esto con firestore:
https://firebase.google.com/docs/firestore/query-data/queries#simple_queries

Nuestra consola de firebase:
https://console.firebase.google.com/u/0/project/air-flashcards/overview

Crear endpoint que permita obtener las sesiones de estudio de un usuario

Contexto

Necesitamos un endpoint para agregar obtener sesiones de estudio del usuario que está loggeado.

Criterios de aceptacion

• Debe crearse un endpoint (en las api routes de next) que recibiendo uid del usuario sea capaz de retornar las sesiones de estudio que creó.

SPIKE - Investigar posibles soluciones para "Recuperar contraseña"

agregar pull_request_template

Revisar endpoint PATCH de cards

Contexto

Ya esta desarrollado el modelo final de cards, deberiamos hacer pruebas de el endpoint patch, para ver si nos vamos a tener conflictos con las propiedades de tipo objeto(SideA, SideB).

SPIKE - Investigar como se realizaria la integracion con Firebase Storage

El usuario cuando cree tarjetas va a poder agregarles imagenes, para esto podriamos guardarlas en firebase storage, deberiamos realizar una investigacion sobre como hacer esto.

Criterios de aceptacion

1. Dejar en la app algun formulario dummy que cargue imagenes a firebase
2. Dejar el metodo para cargar imagenes a firebase

Links utiles

Consola de firebase
https://console.firebase.google.com/u/0/project/air-flashcards/overview

Doc sobre firebase storage
https://firebase.google.com/docs/storage?hl=es&authuser=0

Crear componente Dialog

Crear componente Dialog, el cual debe recibir por props si se encuentra abierto o no, un ícono, un color para el fondo de ese ícono y el ícono en sí mismo, un título, subtítulo, y un array de botones que posean tanto un label a mostrar como una función a invocar si son clickeados.
Así mismo, clickear fuera del componente debería cerrarlo.

Armar documentacion de ayuda/recomendadas sobre las tecnologias que se eligieron

Crear endpoint para editar una sesion de estudio

Contexto

Necesitamos un endpoint para editar sesiones de estudio. No es necesario mejorar la interface StudySession, para eso esta la issue #37 . No es necesario agregar una pagina que renderice este endpoint, podes hacerlo si tessirve pero el alcance de esta card es el endpoint.

Criterios de aceptacion

1. Debe crearse un endpoint(en las api routes de next) que permita editar registros de la coleccion collections/id/studySessions
2. Una sesion de estudio debe pertenecer a una coleccion si o si.

Links utiles

Si tessirve dejo la documentacion sobre como realizar esto con firestore:
https://firebase.google.com/docs/firestore/manage-data/add-data#update-data
https://firebase.google.com/docs/firestore/manage-data/add-data#update_fields_in_nested_objects

Nuestra consola de firebase:
https://console.firebase.google.com/u/0/project/air-flashcards/overview

Crear componente GameCard

Crear componente GameCard el cual debe ser capaz de recibir por props y renderizar

• El texto que se muestra en el medio (de ambos lados de la tarjeta)
• Una imagen que puede llegar a ir de fondo
• Al hacer click sobre la tarjeta, esta debe voltearse y mostrar el otro lado (por ahora, no hay necesidad de agregar animación)

Además, dejar seteados los botones con sus íconos y textos de "Escuchar", "Mezclar" y "Voltear tarjeta", les daremos funcionalidad más adelante

Crear componente Select

Crear componente Select capaz de recibir un label, un placeholder y un array de opciones que provean un texto a mostrar en cada opción, como un value para cada una de ellas, más las props que se consideren necesarias.
Armar los estilos desde el theme de Chakra.
Debe ser responsive, y por defecto debería ocupar el ancho total de su padre, permitiendo otras props que permitan modificar ese comportamiento.
#75

Agregar al readme convenciones para nombrar branches, PRs y commits

Crear endpoint para obtener una coleccion por id

Contexto

Necesitamos un endpoint para buscar una coleccion por id. No es necesario mejorar la interface collection, para eso esta la issue #35 . No es necesario agregar una pagina que renderice este endpoint, podes hacerlo si tessirve pero el alcance de esta card es el endpoint.

Criterios de aceptacion

1. Debe crearse un endpoint(en las api routes de next) que permita obtener una collection por id.
2. Se debe recibir por parametro el id a obtener
3. Se debe parametrizar que sub-colecciones obtener. Puedo pedir solo la coleccion, puedo incluir sus cards y/o studySessions

Links utiles

Si tessirve dejo la documentacion sobre como realizar esto con firestore:
https://firebase.google.com/docs/firestore/query-data/queries#simple_queries

Nuestra consola de firebase:
https://console.firebase.google.com/u/0/project/air-flashcards/overview

Documentar variables de ambiente

Documentar env vars de Firebase.

Crear endpoint para buscar una coleccion

Contexto

Necesitamos un endpoint para buscar una coleccion por texto. No es necesario mejorar la interface collection, para eso esta la issue #35 . No es necesario agregar una pagina que renderice este endpoint, podes hacerlo si tessirve pero el alcance de esta card es el endpoint.

Criterios de aceptacion

1. Debe crearse un endpoint(en las api routes de next) que permita filtrar collections por el campo name.
2. Se debe recibir por parametro el texto a buscar

Links utiles

Si tessirve dejo la documentacion sobre como realizar esto con firestore:
https://firebase.google.com/docs/firestore/query-data/queries#simple_queries

Nuestra consola de firebase:
https://console.firebase.google.com/u/0/project/air-flashcards/overview

Definir modelo Card con todos sus campos

Contexto

El objetivo es dejar creada la interface de Card con sus campos para despues utilizarla como tipo para endpoints y pantallas que necesiten usar colecciones.

Los que se me ocurrieron a mi:

1. createdAt: string
2. sideA: {type: "image"|"text", value: string}
3. sideB: {type: "image"|"text", value: string}
4. id: autogenerated

Criterios de aceptacion

1. Dejar la interface en modules/Cards/models.ts

Links utiles

Para poder refinar que campos tiene este modelo podemos guiarnos en el diseño:
https://www.figma.com/file/T1vCl4wMSd8IvDtU82MZUC/Flashcards?node-id=0%3A1

Crear componente Textfield

Crear un componente Textfield capaz de recibir label, placeholder, y un boolean textarea que lo muestre como un textarea si es true (un campo textarea es un campo de texto un poco más grande), y el resto de lo que se considere necesario.
Armar los estilos desde el theme de Chakra.
Debe ser responsive, y por defecto debería ocupar el ancho total de su padre, permitiendo otras props que permitan modificar ese comportamiento.

Crear endpoint para crear una coleccion

Contexto

Necesitamos un endpoint para agregar colecciones. No es necesario mejorar la interface collections, para eso esta la issue #35 . No es necesario agregar una pagina que renderice este endpoint, podes hacerlo si tessirve pero el alcance de esta card es el endpoint.

Criterios de aceptacion

1. Debe crearse un endpoint(en las api routes de next) que permita agregar registros a la coleccion collections

Links utiles

Si tessirve dejo la documentacion sobre como realizar esto con firestore:
https://firebase.google.com/docs/firestore/manage-data/add-data

Nuestra consola de firebase:
https://console.firebase.google.com/u/0/project/air-flashcards/overview

SPIKE - Investigar como se realizaria la integracion con Firestore

El objetivo de esta card seria integrar con la app firestore, creando algun formulario dummy y probando los distintos metodos para crear, editar, eliminar y listar. Se puede utilizar el modelo "collections" para hacer esto.

Recordar que para Firebase los "modelos" se llaman "colecciones" o "collections", tratar de no confundirse con nuestro modelo collections que tiene el mismo nombre. Entonces, en Firestore por ejemplo tenemos una collection "cards" y una collection "collections"

Criterios de aceptación

1. Dejar en el repo una conexión hecha con firestore y métodos para crear, editar, eliminar y listar una colección de firebase.

Links utiles

Consola de firebase:
https://console.firebase.google.com/u/0/project/air-flashcards/overview

Doc sobre como usar firestore:
https://firebase.google.com/docs/firestore

Crear endpoint para eliminar una card

Contexto

Necesitamos un endpoint para eliminar cards. No es necesario mejorar la interface cards, para eso esta la issue #36 . No es necesario agregar una pagina que renderice este endpoint, podes hacerlo si tessirve pero el alcance de esta card es el endpoint.

Criterios de aceptacion

1. Debe crearse un endpoint(en las api routes de next) que permita eliminar registros de la coleccion collections/id/cards

Links utiles

Si tessirve dejo la documentacion sobre como realizar esto con firestore:
https://firebase.google.com/docs/firestore/manage-data/delete-data#fields

Nuestra consola de firebase:
https://console.firebase.google.com/u/0/project/air-flashcards/overview

Armar y proponer charla sobre React, como para dar una buena base

Crear metodo para cerrar sesion con Firebase

Integrar la funcionalidad de firebase para cerrar sesion.

Criterios de aceptacion

1. Dejar en el servicio de firebase una funcion a utilizar para cerrar sesion

Links utiles

Nuestra consola de firebase:
https://console.firebase.google.com/u/0/project/air-flashcards/overview

Doc sobre como cerrar sesion:
https://firebase.google.com/docs/auth/web/password-auth#next_steps

Test issue

Crear endpoint para editar una card

Contexto

Necesitamos un endpoint para editar cards. No es necesario mejorar la interface cards, para eso esta la issue #36 . No es necesario agregar una pagina que renderice este endpoint, podes hacerlo si tessirve pero el alcance de esta card es el endpoint.

Criterios de aceptacion

1. Debe crearse un endpoint(en las api routes de next) que permita editar registros de la coleccion collections/id/cards
2. Una card debe pertenecer a una coleccion si o si.

Links utiles

Si tessirve dejo la documentacion sobre como realizar esto con firestore:
https://firebase.google.com/docs/firestore/manage-data/add-data#update-data
https://firebase.google.com/docs/firestore/manage-data/add-data#update_fields_in_nested_objects

Nuestra consola de firebase:
https://console.firebase.google.com/u/0/project/air-flashcards/overview

Definir modelo Collection con todos sus campos

Contexto

El objetivo es dejar creada la interface de Collection con sus campos para despues utilizarla como tipo para endpoints y pantallas que necesiten usar colecciones.

Criterios de aceptacion

1. Dejar la interface en modules/Collections/models.ts

Links utiles

Para poder refinar que campos tiene este modelo podemos guiarnos en el diseño:
https://www.figma.com/file/T1vCl4wMSd8IvDtU82MZUC/Flashcards?node-id=0%3A1

Armar una charla para hacer el setup de la app, con las tecnologias elegidas

Crear componente Button con sus variantes

Contexto

Necesitamos agregar los estilos para el boton.

Criterios de aceptacion

1. Modificar el boton nativo de chakra con nuestros estilos
2. Agregar las variantes y tamaños especificadas en el figma

Links

Componente Button: https://www.figma.com/file/T1vCl4wMSd8IvDtU82MZUC/Flashcards?node-id=412%3A3213

Notas

Ya esta desarrollada la primer variante, tomar de ejemplo

Crear componente SliderInput

Crear componente SliderInput capaz de recibir y renderizar

• label
• min
• max

A medida que se usa, el valor del input debe ir modificándose

Crear rutas no accesibles al estar logueado

Crear componente que redirija al usuario hacia una ruta que se pueda recibir por props al estar logueado. Es decir, el usuario estando logueado no debería poder acceder a ella. Por ejemplo, un usuario logueado no debería poder ingresar a la página de login o register.

Configurar Github Actions para hacer validaciones de codigo en los pull request

Crear endpoint para crear una sesion de estudio

Contexto

Necesitamos un endpoint para agregar sesiones de estudio. No es necesario crear la interface StudySessions, para eso esta la issue #37 . No es necesario agregar una pagina que renderice este endpoint, podes hacerlo si tessirve pero el alcance de esta card es el endpoint.

Criterios de aceptacion

1. Debe crearse un endpoint(en las api routes de next) que permita agregar registros a la coleccion collections/id/studySessions
2. Una studySession debe pertenecer a una coleccion si o si.
3. Una studySession debe poder indicar a qué usuario pertenece cuando sea accedida.

Links utiles

Si tessirve dejo la documentacion sobre como realizar esto con firestore:
https://firebase.google.com/docs/firestore/manage-data/add-data

Nuestra consola de firebase:
https://console.firebase.google.com/u/0/project/air-flashcards/overview

Crear componente StudySessionCard

Crear componente para las cards de las sesiones de estudio, los cuales deben recibir y ser capaces de renderizar:

• un título
• la colección a la cual pertenecen
• la cantidad de tarjetas
• el porcentaje completado de la sesión de estudio

Además, debe recibir

• una url a la cual se debe redirigir al usuario si la card es clickeada
• on callback que reciba el id de la sesión de estudio que se está renderizando para poder eliminarla desde fuera del componente

Crear pantalla de iniciar sesion e integrar con firebase

El objetivo es crear otra page que sea para iniciar sesion. No es necesario que la pagina tenga estilos, el objetivo es utilizar los conocimientos en la charla de hoy: crear una pagina en next, usar los componentes del formulario de registro, integrar el metodo signin de firebase.

Criterios de aceptacion

1. El usuario debe poder loggearse con email y contraseña
2. Se debe validar el usuario contra firebase
3. Se debe dar feedback al usuario a traves de alerts sobre el resultado (campos vacios, loggeado, error)

Documentacion adicional:

Consola del proyecto (Si no tenes acceso solicitanos por el canal de air-proyect de Discord!):
https://console.firebase.google.com/u/0/project/air-flashcards/overview

Integrar firebase:
https://firebase.google.com/docs/auth/web/password-auth#sign_in_a_user_with_an_email_address_and_password

Conventional commits:
https://www.conventionalcommits.org/en/v1.0.0/#summary

Definir modelo StudySession con todos sus campos

Contexto

El objetivo es dejar creada la interface de StudySessions con sus campos para despues utilizarla como tipo para endpoints y pantallas que necesiten usar colecciones.

Criterios de aceptacion

1. Dejar la interface en modules/StudySessions/models.ts

Links utiles

Para poder refinar que campos tiene este modelo podemos guiarnos en el diseño:
https://www.figma.com/file/T1vCl4wMSd8IvDtU82MZUC/Flashcards?node-id=0%3A1

test

Crear proyecto de firebase e invitar a los otros leads como admins

Crear README.md con la informacion de las tecnologias y ordenar links

Bug | Arreglar el build

Arreglar la build del proyecto npm run build