- Preámbulo
- Resumen del proyecto
- Objetivos de aprendizaje
- Consideraciones generales
- Hacker Edition
- Pistas & Tips
No existe día que no tomemos notas, siempre necesitamos apuntar alguna dirección, número telefónico, algunos notas de alguna reunión, o hasta guardar nuestras URLs favoritas para poder consultarlas más tarde. Muchas veces para esta actividad utilizamos libretas o agendas que terminan siendo olvidadas, se guardan en algún mensaje de texto o hasta terminando siendo escritas en la palma de nuestra mano.
Hoy en día la mayoría de la población cuenta con algún dispositivo mobile o laptop y además todos nos estamos preocupando por implementar acciones para salvar el medio ambiente, por ello a una Laboratorian se le ocurre la idea de implementar una web app para tomar notas, que nos permita crearlas, editarlas, eliminarlas y consultarlas en cualquier momento.
Ella esta enamorada de la idea y quiere llevarla acabo, pero no tiene el tiempo necesario para empezar el proyecto ya que planea que sea un proyecto independiente a su trabajo, Por ello esta buscando dentro de la comunidad de Laboratoria para que implementen la idea, por lo cual te pedimos que la ayudes.
Para este proyecto necesitas crear una Web App con React
, Firebase
y react-router
.
Si bien la temática es libre, tendrá que tener ciertas funcionalidades básicas:
- Puedo autenticarme con Correo y/o Google y/o Facebook.
- Puedo cerrar sesión.
- Puedo crear una nueva entrada/post
- Puedo ver mis entradas/posts
- Puedo editar mis entradas/posts
- Puedo borrar mis entradas/posts
Para este proyecto deberemos manejar vistas
. Esto significa que cada sección tendrá su propia URL, la cual indica que vista
o componente
será mostrado en pantalla. Para ello necesitaremos investigar acerca de react-router
y el concepto de Single Page Application
.
Este será nuestro primer proyecto utilizando la biblioteca de React. Por ello nos concentraremos en entender las bases de React, como estado
, ciclos de vida
, componentes
, render
y como mantener sincronizados el estado con la vista de nuestra interfaz.
Este proyecto se debe "resolver" de forma individual.
Trabaja en una historia hasta terminarla antes de pasar a la siguiente. Trabaja hasta la historia que puedas en el tiempo especificado.
La lógica del proyecto debe estar implementada completamente en React.
La aplicación debe ser un Single Page Application.
La aplicación debe hacer uso de npm-scripts y contar con scripts start, test, build y deploy, que se encarguen de arrancar, correr las pruebas, empaquetar y desplegar la aplicación respectivamente.
Implementar test unitarios incluyendo el porcentaje de coverage.
Una vez que hayas terminado las funcionalidades base del proyecto, puedes pasarte a esta sección.
- Si la usuaria empieza a escribir una nota y por alguna razón la pestaña del navegador se cierra, cuando vuelva a abrir esta, la nota debería mostrarse como estaba.
- Puedo ver el número de veces que he editado mi entradas/posts
- Puedo subir imágenes
- Consumo de API/s (Google Maps, Spotify, Pinterest, etc)
- Progressive Web App (PWA)