Pomodoro is a time management webapp based on the Pomodoro technique. The design was provided by Frontend Mentor and development was made using Next.js and Styled Components.
It features an animated timer with three types:
- Pomodoro (long period of focus)
- Short Break (short interval to distract yourself)
- Long Break (long interval to rest)
Timers can be paused, resumed and changed. It's possible to change a timer period in minutes, to better suit one's needs.
Another cool tweak is the dynamic theme. The main color and the font can be changed to one of the supported options (three for each).
The project was made to be scalable, with unit testing and CSS-in-JS, among some patterns and features.
The requirements to run this application locally are:
- Node.js and npm (Node's v14 or v16 LTS is recommended);
- Recent version of Chrome, Firefox or a Chromium-based browser (this is only a demo, not focused on compatibility);
- Yarn is optional, but recommended as it was the tool used to manage dependencies.
Once the repository was downloaded or cloned, you'll need to install the dependencies:
npm install
# or
yarn installWith dependencies installed, the project is ready to run!
npm run dev
# or
yarn devTo run tests it's also required to install dependencies (see above), and then run:
npm run test
# or
yarn testThis project was made with:
- React.js
- Next.js
- TypeScript
- Styled Components
- React Testing Library
- ESLint
- Husky
- Vercel
- Commitlint
- ☕ + 🎧
A special thanks to Frontend Mentor for the (great) design 🙏.