Using React, Rematch/Redux, and Next.js, this pomodoro app features automated task switching and an archive for completed and deleted tasks with a dynamic timer system that adjusts based off of the difficulty of the current task!
Welcome to my Pomodoro App! Do you know what the Pomodoro Technique is? Do you have a workflow that produces more results? If you said no to both, I'll be happy to tell you more!
Simply, the Pomodoro technique is the constant pattern of a dedicated work period followed by a break period and then into another set until you have completed all the tasks you wanted to complete. The reason this technique is so important is because as developers or hard workers in other industries, we tend to forget to give ourselves a break. This forgetfulness can cost us results, motivation, and more! Think about it, how long do you work on something without a break. Another great thing this technique does is force you to break up projects into tasks and maybe break up those tasks into smaller tasks that are easily digestable. This is one of the most important things a developer needs to master. Too many times do we decide that a function can't be broken down to bitsize functions that can be developed in isolation to give us better testing and development.
- Come up with as much detail as possible for your coding project
- Break down features you want to release with in the first version to thier individual use cases
- See if you can break down the use cases even more into smaller tasks
- Rank each task on a scale of 1 to 3 (You'll see why I chose 3 for now)
- Decide on how much time you want to give to each level of a task. I chose:
- 1 = 12 minutes
- 2 = 25 minutes
- 3 = 50 minutes (usually these are overestimated)
- Finally, decide on which tasks you want to tackle for the day. If you broke them down well, any of them should be able to be developed in isolation.
You are now ready to use my janky app! 😄
First, please make sure you have NPM or Yarn installed (I prefer yarn).
After you open a terminal and cd to the folder run the following commands:
- yarn install (npm i)
- yarn build (npm run build)
- yarn start (npm run start)
These commands will install all of the dependencies, build a production ready Next.js build, and finally start the build at http://localhost:3000
Then you can add the tasks in the top left of the screen and from the task list you can add the tasks to the task queue and watch the magic happen! 😍