Pomo

Pomo is an easy use PWA application, which implements the major features of the Pomodoro Technique and can be used as a free countdown clock.

Compared with other similar pomodora applications, Pomo allows users to flexibly adjust the current time point while any 'tomato' or 'break' is running. That feature meets users' requirements of increasing or decreaing the running time as users need. Nevertheless, the clock-like plate around the central display simplifys operations on adjusting time without using or callouting device keyboard.

Two modes

• Pomodoro: start a pomodoro cycle from tapping central display area.
• Countdown: rotate the clock-like plate to set a countdown and it starts automatically soon after the time is set.

---

Tech Stack

• Vue 3
• Vite
• Typescript
• Tailwind CSS: Quick setup of Tailwind CSS + Vue3 + Vite.

Contribution

Commit

1. Fork it (https://github.com/GloryWong/pomo.git)
2. Create your feature branch (git checkout -b feature/fooBar)
3. Commit your changes (git commit -am 'feat: Add some fooBar')
4. Push to the branch (git push origin feature/fooBar)
5. Create a new Pull Request

Vue.js Devtools

The Vue.js devtools is a completely new version for Vue 3.

Recommended VSCode Setup

• Volar: You need to disable Vetur to avoid conflicts.
• Tailwind CSS IntelliSense

Note

This project mainly use the Vue3 feature <script setup>. To get proper IDE support for the syntax, use Volar instead of Vetur (and disable Vetur).

Q & A

• Q: Unknown at rule of @tailwind

  A: Check here