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.

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.

Mi Rol

  • Diseño UI
  • Desarrollo Front-End
  • Desarrollo Back-End

Herramientas Utilizadas

  • React.js
  • Redux
  • Firebase
  • Figma

Tipo de Proyecto

  • Proyecto Personal

Solución

Demostración de como usar la aplicación con el lector de pantalla Voice Over.
Demostración de las características principales de la aplicación.

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.

Pantalla de proyectos en la aplicación de tareas.
Pantalla de proyectos en la aplicación de tareas.

Fechas de Vencimiento

Los usuarios pueden añadir fechas de vencimiento a cada tarea utilizando el selector de fechas que también dispone de un selector de tiempo integrado para permitir que los usuarios puedan establecer la fecha y hora de vencimiento de cada tarea.

Cómo añadir fechas de vencimiento a las tareas en la aplicación de tareas.
Cómo añadir fechas de vencimiento a las tareas en la aplicación de tareas.

Añadir Nuevas Tareas

Los usuarios pueden agregar fácilmente tareas nuevas y asignarlas a un proyecto o añadirles etiquetas. Cada tarea también puede tener una fecha u hora de vencimiento opcional.

Cómo añadir nuevas tareas y asignarlas a un proyecto o etiqueta.
Cómo añadir nuevas tareas y asignarlas a un proyecto o etiqueta.

Búsqueda de Tareas

Los usuarios pueden encontrar sus tareas utilizando la función de búsqueda de la aplicación en caso de que no recuerden a qué proyecto pertenece alguna de ellas. Despúes, una vez seleccionada en el menú desplegable, serán redirigidos al proyecto donde se encuentra.

Búsqueda de tareas en la aplicación de tareas.
Búsqueda de tareas en la aplicación de tareas.

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.