Pomodoro

Overview

Assets

• Figma design

• Trello template

Description

Implement a basic Pomodoro timer app based on the provided Figma design. The application should be responsive. The main focus of this application is to test your ability to create a responsive design. Theme functionality will test your ability to organize your CSS rules. Date functionality will test your javascript knowledge. The app is small, but there is space for concern separation. You certainly can have more than one giant component.

Tips & Tutorials

• Video | WebSockets in 100 Seconds & Beyond with Socket.io
• Video | Simple Countdown Timer with JavaScript - Day 21
• Codepen | Countdown donut chart with chart.js
• Library | Chart.js, Simple yet flexible JavaScript charting
• Article | A guide to theming in CSS
• Video | Jest Crash Course - Unit Testing in JavaScript

It’s not everything you need, but it’s a start.

Requirements

Requirements should help you to structure your work. Maybe you will want to split the work into some smaller tickets in Trello. Don't let the requirements constrain you but rather let them help you in exploring different ideas.

Use the acceptance criteria to guide your imagination and not to constrain it.

General Acceptance Criteria

• Split your application into small independent components and use best practices based on the framework you are using.

• Theme functionality should use a clean approach. Think about future possibilities that we may have more than two themes.

• Your code should be clean and easy to understand. For more on how to review the code, see the last section of this document.

• You can build this app using Angular, Vue.js, React, or something similar.

• If you feel frisky, do the app without a framework.

• Write unit tests for what you can.

Share your work on GitHub, let the world know what your' building.

Implement the main mobile UI

Acceptance Criteria

• Follow the design from Figma

• When clicking the START button, the chart should slowly move.

• When clicking the START button, its text should change to PAUSE.

• When clicking the PAUSE button, the timer should pause, and the chart should stop moving.

• When clicking on the RESET button, reset the timer. When the session ends, the break starts. When the break ends, a new session will begin with the same length. The process continues until we hit RESET.

• Session length increment value should be 1 minute.

• Break length increment value should be 1 minute.

Implement the main desktop UI

Acceptance Criteria

• Follow the design from Figma.

• Acceptance criteria for functionality are the same as on mobile.

Implement the theme switcher

Acceptance Criteria

• Follow the design from Figma.

• The switcher should work on mobile and desktop.

• Display the light theme when the Light checkbox is selected.

• Display the dark theme when the Dark checkbox is selected.

• All the specified elements should change their colors based on the selected theme.

Implement the about mobile UI

Acceptance Criteria

• Follow the design from Figma.

• When clicking on the ABOUT button, the about page should be displayed.

• When going to the about page change the browser's URL.

Implement the about desktop UI

Acceptance Criteria

• Follow the design from Figma.

• Acceptance criteria for functionality are the same as on mobile.

Convert it to a PWA(progressive web app)

Make the minimal changes required to transform this application into a PWA(Progressive Web App). We should be able to install it on a device.

Make things happen in real-time

Let's make things interesting! You should be able to open the app in two different tabs of a browser. When in one tab you will change the theme(light/dark), the app from the second tab should do the same thing without human interaction.

HINT: Websockets could do the trick.