khloeli / code-struction-zone Goto Github PK

Project Description: A coding-themed Pomodoro timer app that allows user to not only keeps track of time and their tasks. But also, allows sorting of tasks according to the column header

This project was bootstrapped with Create React App. In the project directory, you can run the following to install the dependencies required for the project

• npm install react-bootstrap bootstrap
• npm install -D tailwindcss
• npx tailwindcss init (Refer to tailwindcss for full guide)

Runs the app in the development mode:

• Enter 'npm start' into Terminal to render the app. Open http://localhost:3000 to view it in your browser.

First, add a task by pressing the '+ New Task' button at the bottom of the page. Enter details of the task such as 'Name', 'Description', 'Category' and 'Priority' and click 'Add'. The task will appear in the task table, with a checkbox to check it as done - this then decorates the task with a strikethrough. If you wish to hide the completed task, click on the 'Hide" button. Click the 'Show' button to show the completed task.

The app also has a pomodoro timer which has 3 buttons: 'Start', 'Skip', and 'Restart'. 'Start' begins the countdown of the timer; 'Pause' pauses the countdown; 'Skip' brings the countdown to zero and starts the next timer which is a short break and has a 5mins countdown; 'Restart' brings the countdown back up.

• react
• bootstrap
• tailwindcss

• Caleb Castro
• Chloe Li