iagodahlem/tiempo

:clock1: Pomodoro app for the modern web.

tiempo

Pomodoro app for the modern web. Click here to access it live. Clock takes you through a full pomodoro cycle of three 25 minute work sessions with 5 minute breaks in between and a 15 minute long break at the end.

Requirements

• Node v11.6.0
• Yarn v1.12.3

Install

Installing Yarn If npm package manager is already installed, you can use

npm install --global yarn

to install and update Yarn.

Otherwise, if homebrew is installed, you can use

brew install yarn

and

brew update yarn

to update your current version.

Other installation instructions specific to your machine for yarn can be found here.

You can then use

yarn --version

to ensure it is installed and check which version you have.

To download the latest version of Node, click here.

Running

You can run this command

git clone https://github.com/iagodahlem/tiempo.git

to clone the repository on your local machine and run the start command to spin up the development server.

To start the development server, you can run the command

yarn start

To run all the test suite.

yarn test

Understanding the codebase

Under the src/pomodoro/app folder exists the different functionalities of the timer including play, pause, skip, and stop.

Under the src/pomodoro/containers folder exists the controls for keyboard and mouse input as well as the header, footer, and other sections of the app.

The cypress folder contains tests and supporting documents for tests.

This code is written using the Redux library and documentation and support can be found on the official Redux support page.

Contributing

1. Fork it!
2. Create your feature branch: git checkout -b my-new-feature
3. Commit your changes: git commit -m 'Add some feature'
4. Push to the branch: git push origin my-new-feature
5. Submit a pull request :D

License

MIT License © Iago Dahlem

tiempo's Issues

Add component tests

Setup Enzyme or react-testing-library (if easier) and add unit tests for all components.

Code Coverage

• Improve code coverage overall.
• Add unit tests for all missing layers.
  • App
  • Infra
  • View
  • Store Actions

Design Debits

• Optimize the layout to look better on desktop view.
• Find better icons to keep the look n' feel of the app.
• Avoid content jumping on the timer numbers.

Add the timer on the title of the page...

... so the user can easily see the current timer without switching to the app page.

React Helmet can be used to achieve this.

Think on a format to display it, maybe using the current entry type (pomodoro, short-break, long-break) and the timer, or just the timer, currently it's just showing Tiempo, examples:

Showing the type first and the lapse:

• Pomodoro | 24:59
• Short Break | 4:56

Also think in a good place to fit it, where does not affect the performance of the app.

Improve Performance Overall

Before releasing the first version, would be good to add performance metrics, and improve performance whenever possible, probably there are some components that are unnecessary rendering, things like that.

All this is to avoid content flicking (timer jumping from 25:00 to 24:58) and to make the app as lightweight as possible, possibly the user of a Pomodoro app will be using the app alongside with other applications running at the same time to complete their tasks, so the app should provide a good experience to the user.

Include Cypress coverage into Codecov report

For now, the Codecov report is just including the Jest coverage, which tends to decrease the whole coverage at each new feature.

Would be good to include Cypress coverage as well to have better and complete coverage report.

User Config

Add config page, to allow the user to override:

• Each entry type duration, currently we have pomodoro with 25:00 min, short-break with 5:00 min and long-break with 15:00 min. Also, decide a range where the user can vary for each type, eg: Pomodoro can be changed from 20:00 to 30:00 minutes.

• Session length, the default is a session with 6 entries, so the user will have to cycle 5 times between pomodoro and short-break until it gets into a long-break. The idea is to have radio buttons with each possible value (4, 6 default, 8).

All these settings will be stored locally, for now, the same way as the entries are being saved.

Add Integration Tests

Add integration tests with Cypress to improve quality.

Add keyboard shortcuts

• space/enter runs play or pause.
• right key runs skip.
• esc runs stop.

Notifications

Add the ability to send notifications to the user when an entry is completed, also would be good to have a button on the notification to start the next timer.

I am not sure about using the browser Notification API or using a simple Redux notifications solution. Both have drawbacks:

• Web Notification API

  • Needs to figure out a way to subscribe to a service worker without overriding CRA default service worker.
  • Abstract all the notification calls in a Entity and a Service, which can be trick.

• Redux Notification Solution

  • It's much simpler to implement, however the user will not be notified in background.