EX01 - Pomodoro Timer Frontend

In this exercise, you and a partner will create the front-end user interface for a simple Pomodoro timer system for the UNC CS Experience Lab site. This exercise will allow you to become more familiar with using Angular and Typescript to create frontend applications, as well as integrating your own code into a pre-existing codebase.

If you are not familiar with the concept of a Pomodoro timer, it is a timer that loops through a “working”/”break” timer cycle to help you stay focused and avoid burnout. Feel free to look up existing Pomodoro timers for inspiration/understanding (and maybe use one while pair programming!!).

Be sure to scan the full write up (especially the technical requirements) before you begin writing code to ensure that you adhere to all of the outlined specifications.

Workflow Expectations

Pair Program, ideally in person, on each of the stories. Do so in work-in-progress branches that get pushed to your team’s repository and merged back into the main branch. Each member of the pair should be the commit author for at least one of the subtasks (unless there is only 1 subtask!). You should create a branch per story and a commit per subtask completion. Once all subtasks are complete, merge the story’s commits back into stage.

Once finished with a story, the “driving” partner should create a pull request for the completion of the story, and the “navigating” partner should review it and merge it into main via GitHub’s interface. Each partner should create at least two pull requests, and each partner must merge two pull requests from the other partner. For reference on pull requests see Creating a pull request and merging a pull request.

Personas

For this exercise, there is only one persona we will be focusing on. We will expand on these personas in a later exercise where you will extend the functionality of your Pomodoro timer system.

Sally Student - Sally is a CS major who will visit and return to the CSXL site as a productivity space.

Stories

Story A

As any persona, I want to click to my Productivity Page so I can quickly navigate to and view my Pomodoro timers.

Subtasks:

  1. All personas should find a link to the route that features the Pomodoro timers on a Productivity Page with a URL path of “/productivity”.
    1. This link should be available in the existing navigation sidebar.

Technical Requirements:

  1. The Productivity Page should be its own component separate from the components of any other pages on the CSXL site.
  2. Productivity should use its own service.

Note: Make sure you cd into the frontend directory and then explicitly define that the Productivity component should be associated with the App Module by using the command ng generate component componentName --module=app.module.

Story B

As any persona, I want to create Pomodoro timers with different descriptions and configurations so I can study and use my timers more efficiently. Be sure to use the existing Pomodoro object at src/app/pomodoro.ts.

Note: Please read and complete this story with Story D in mind!

Subtasks:

  1. I want to navigate to the “Pomodoro creation” form with the URL path of “/productivity/edit/:pomo_id” by clicking an appropriately placed create button/icon.
    1. Hint: Since you are creating the Pomodoro, you will not have an id yet. Consider using a “default” id to handle creating new Pomodoros.
  2. I want my timers to have a unique integer id, names, descriptions, “work session” lengths, and “break session” lengths so I can properly define and distinguish my timers from each other.
  3. I should see a success message after I create a new Pomodoro.

Technical Requirements:

  1. The integer id generated for the timers should increment such that the first timer created has an id of 1, the next has an id of 2, and so on.
    1. You will have to determine a way to do this manually!
  2. You should add the extra id, name, and description fields without editing the provided Pomodoro file.
  3. Each form field should have appropriate validation.

Story C

As any persona, I want to be able to view my created timers so I can start, pause, and restart them as needed.

Subtasks:

  1. I want to view my timers on the Productivity Page created in Story A with the URL path ‘/productivity’.
  2. I want each of my timers to have a consistent user interface that displays the name, description, and time remaining for each timer.
  3. I want each timer to have a start/resume button to begin the countdown or continue running the countdown after it has been paused.
  4. I want each timer to have a pause button to pause the countdown.

Hint: Check out documentation on the async pipe in Angular to retrieve the value from the countdown Observable!

Technical Requirements:

  1. There should not be a separate button for starting and resuming, even though the methods called for start vs. resume are distinct.
    1. You may choose to make separate buttons first to ensure you have implemented the functionality correctly, but there should only be one button for start/resume in your final product.
  2. The component for a single timer should be a reusable widget. Please refer to Ajay’s reading on widgets to determine how to do this.
  3. The state of each timer should be accurate at any point in time, especially while running.

Story D

As any persona, I want to be able to modify details about my timers.

Subtasks:

  1. I want to navigate to the “Pomodoro editor” form with the URL path of “/productivity/edit/:pomo_id” by clicking an appropriately placed edit button/icon.

Technical Requirements:

  1. Editing a timer should completely reset the countdown time.
  2. The editor for a Pomodoro timer should be the same component as the form for creating a Pomodor timer. You should not have separate Typescript (TS) files for editing and creating Pomodoros.
  3. Each form field should have appropriate validation.

Story E

As any persona, I want to be able to delete timers I no longer want to use by clicking an appropriately placed delete button/icon.

Technical Requirements:

  1. Deleting a timer should automatically update the viewable list/grid of Pomodoro timers displayed on the Productivity Page.

Overall Technical Requirements

  1. Use Angular Material UI for forms, icons, cards, and other places where possible.
  2. Do not edit the Pomodoro TS file!

Optional Challenges

  1. Structure the TS files for Productivity so that there is a “Productivity Module”, similar to Organizations, Events, and other features already in the XL code base.
  2. Add a sound and/or notification to indicate when a work/break session has ended.
  3. When running one timer, ensure that all other timers are disabled until the running timer is either paused or reset.
  4. Pin whichever timer is active somewhere near the top of the Productivity.
  5. Add validation to ensure that the break session cannot be longer than the work session.
  6. Add validation/error messages to the HTML of the form components with styling rather than alerts.
  7. A user should not be able to create a timer with the same name as another timer.

Getting Started

  1. Find your Team Name and paired partner on the sheet linked to from the Canvas announcement.
  2. Lookup their contact information in the UNC Directory if you do not have it already.
  3. E-mail them, if they have not e-mailed you already, and propose some of the next possible dates and times you can get together to pair program!
  4. Once together, follow the setup instructions linked here.
Contributor(s): Jade Keegan