Pomodoro

Progressive Web Application written in React with Typescript.

Screenshot

Motivation

The pomodoro application is created to fight with procrastination using pomodoro technique. If you don't know what is it and how it works, you can read about this technique here.

Description

Application is using authentication system and firebase realtime database. Every signed user can track his statistics, manage tasks, configure duration of work intervals(known as pomodoros or tomatoes) and breaks.

Why application playing silent sound when timer start?

If you try this app on phone you will notice that when timer starts, the application will play silent sound. It's not a bug and it's completely intentional. Because of nature of PWA, right now, there is no way to wake up your phone and play alert when timer ends. That's why I decided to add blank sound to keep phone in some kind of "awake state". Even if you turn off your screen, pomodoro will ring the alarm when timer ends.

Also, I know that, a much better solution would be just create native app, but i haven't tried any native technologies yet.

Technologies

• react
• webpack
• redux
• redux-saga
• firebase
• styled-components
• react-spring
• chartjs
• dayjs

Installation

1. Clone this repo

git clone https://github.com/drillprop/pomodoro.git

2. Install NPM packages

npm install

3. Start new project on firebase with Realtime Database

4. In firebase console, configure authentication by turning on Email/Password and Google sign-in providers

5. Create .env file

6. In firebase project overview register new app by adding new web app, copy all firebaseConfig values and paste them in .env in a similar way like .env.example file.

7. To start the app in dev mode run

npm start

Demo

Pomodoro