Simple Pomodoro and To-do
I decided to develop this application because I am a fervent follower of the Pomodoro work methodology. This methodology is based on dividing time into intense work blocks and short breaks to increase productivity and maintain focus. I enjoy keeping my tasks organized and always at hand. The idea behind this application was to measure the number of Pomodoros dedicated to each task and thus make better use of my time. I wanted to have an easy and efficient way to track my efforts and optimize my work routine.
Implemented technologies
- FIREBASE
- NEXTJS
- REACT
- JAVASCRIPT
Process and challenges
Firstly, I laid the foundation by creating a solid structure for the application. I had to adapt to the innovations in Next.js 13. For this project, I decided to use React Bootstrap, which allowed me to focus more on the logic and, as a positive aspect, streamline the development process.
Since I had previous experience with Firebase, initializing the library didn't take much time. I structured the basic Firestore queries into services to apply them later on.
To handle each task, I devised a custom hook that performed the well-known CRUD operations, leveraging the aforementioned services.
For authentication, I took advantage of Firebase Authentication's integration with other platforms through OAuth. With the help of documentation and guides, setting this up was a relatively quick task.
To enhance the user experience, I developed a filtering system to allow users to sort tasks according to their personal preferences. I used Zustand, a lightweight state management library, to create a global state that later proved useful for other functionalities.
For the timer, I created a custom hook and component that handled the countdown based on the received time properties. The component responsible for managing it is called PomodoroTimer, which structures the time blocks and triggers the necessary updates as needed.
Conclusion and next steps
As for improvements and additional features, one idea is to implement the ability to group tasks, either through categories, tags, or projects, allowing users to organize and manage their tasks more efficiently. Another enhancement could be the inclusion of a loading skeleton to provide more dynamism and a smoother user experience. By displaying loading components during data fetching or transitions between sections of the application, users receive visual feedback and a sense of progress.