Simple Pomodoro and To-do
Desarrollé esta app por mi afinidad con la metodología Pomodoro: bloques intensos de trabajo seguidos de pausas para aumentar la productividad. Quería medir mis pomodoros por tarea, optimizando mi rutina.
Tecnologías implementadas
- FIREBASE
- NEXTJS
- REACT
- JAVASCRIPT
Proceso y desafíos
En primer lugar, forjé una estructura sólida que serían los cimientos de la aplicación. Tuve que adaptarme a las innovaciones de Next.js 13. Para este proyecto, decidí utilizar React Bootstrap, de esta manera pude centrarme más en la lógica y, como otro aspecto positivo, agilizar el desarrollo.
Dado que ya había utilizado Firebase en proyectos anteriores, no me llevó mucho tiempo inicializar la biblioteca. Organicé las consultas básicas (de Firestore) en servicios para poder aplicarlas más adelante.
Para gestionar cada quehacer, creé un hook personalizado que realizaba las famosas operaciones CRUD, aplicando los servicios mencionados anteriormente.
En cuanto a la autenticación, aproveché la integración que proporciona Firebase Authentication con otras plataformas a través de OAuth. Gracias a la documentación y guías disponibles, esta tarea fue relativamente rápida.
En la mejora de la experiencia de usuario, desarrollé un sistema de filtros para ordenar las tareas según las preferencias personales. Utilicé Zustand para crear un estado global que luego me resultaría útil para otras funcionalidades. Opté por esta biblioteca debido a su simplicidad y ligereza.
Para el temporizador, creé un hook personalizado y un componente que se encargaban de reducir el tiempo recibido en las propiedades. El componente encargado de gestionarlo se llama PomodoroTimer, el cual se encarga de estructurar los bloques de tiempo y activar las actualizaciones correspondientes según sea necesario.
Conclusión y mejoras a futuro
Como mejoras y funciones adicionales, se podría implementar la posibilidad de agrupar los quehaceres, ya sea mediante categorías, etiquetas o proyectos, permitiendo a los usuarios organizar y gestionar sus tareas de manera más eficiente. También se podría agregar un esqueleto de carga para brindar mayor dinamismo y una experiencia de usuario más fluida, mostrando componentes de carga mientras se obtienen datos o se navega entre secciones de la aplicación, proporcionando retroalimentación visual y una sensación de progreso.