Aplicación de tareas en React y Firebase
Una aplicación de tareas creada con React.js y Firebase diseñada y desarrollada con un fuerte enfoque en la accesibilidad y la interacción del usuario.
Introducción
Esta aplicación ha sido creada para mejorar mis habilidades de desarrollo front-end y para continuar aprendiendo cómo diseñar y desarrollar una aplicación javascript moderna con React.js ya que creo que la mejor manera de aprender una nueva habilidad es practicando.
Además, también quería aprender cómo crear una aplicación React.js que fuera accesible, por lo que la accesibilidad ha sido una prioridad durante todo el ciclo de diseño y desarrollo.
Tecnologías Utilizadas
Mi objetivo principal para este proyecto era aprender cómo desarrollar una aplicación moderna con React.js, por tanto, la opción obvia en ese momento era integrar React con Redux para gestionar el estado de la aplicación. Sin embargo, todavía necesitaba una base de datos y un back-end, así que decidí usar Firebase ya que ofrecía todo lo que necesitaba para este proyecto: un poderoso sistema de autenticación, un servicio de base de datos fácil de usar y el poder de las Cloud Functions que facilita la implementación de cualquier servicio de back-end que pueda necesitar sin tener que implementar un servidor físico.
Frond-End
- React.js
- Redux.js
- Sass
- Algolia Search
- react-day-picker
- downshift.js
Back-End
- Firebase
- Firestore
- Cloud Functions
- Express.js
Testing
- React Testing Library
- Jest
Diseño
- Figma
- Unicons
Hosting
- Netlify
Características de la Aplicación
Las características principales de la aplicación han sido diseñadas para permitir que los usuarios puedan agregar fácilmente tareas y organizarlas en proyectos o añadirles etiquetas. Por tanto, cada tarea puede pertenecer a un solo proyecto y puede tener varias etiquetas asignadas. Además, los usuarios pueden añadir fechas de vencimiento a cada tarea para ver qué tareas deben completarse primero.
Proyectos
Los usuarios pueden organizar sus tareas en proyectos para realizar un seguimiento de todo el trabajo que tienen pendiente. Cada tarea puede pertenecer a un solo proyecto o al proyecto predeterminado de bandeja de entrada Inbox que contiene cualquier tarea que no forma parte de un proyecto personalizado.
Lecciones Aprendidas
Puesto que este fue mi primer proyecto de más complejidad creado con React.js,
comencé con relativamente pocos conocimientos de cómo funcionaba, pero ahora
puedo crear Hooks personalizados para la gestión del estado, interacciones con
la interfaz de usuario, llamadas a API’s o incluso Hooks personalizados, como
useThunk() o useLogger(), que emulan funciones de Redux. Puedes ver los
Hooks personalizados que cree para este proyecto en el
repositorio de Github.
Por otro lado, también aprendí a trabajar con una biblioteca de administración de estado avanzada como Redux, pero probablemente usaría Hooks personalizados combinados con la API de Context para mis próximos proyectos con React. Si quieres ver cómo usar Hooks personalizados y la Context API para la gestión del estado en una aplicación React, puedes ver algunos ejemplos en el repositorio de un proyecto de demostración que he creado.
Además, también disfruté trabajando en este proyecto porque he podido aprender cómo conseguir que una aplicación en React.js sea accesible para que los usuarios puedan usarla con su teclado. Además, también aprendí los conceptos básicos de cómo usar un lector de pantalla para validar mi soluciones y experimentar de primera mano como es usar una aplicación en JavaScript con un lector de pantalla.
Finalmente, también aprendí a trabajar con los servicios en la nube proporcionados por Firebase para autenticación, integración de la base de datos de Firestore y Cloud Functions, lo cual también me permitió mejorar mi comprensión de cómo usar las funciones asíncronas de ES6, las Promise y cómo el Event Loop de JavaScript las integra en la Micro Task Queue.