productivity

a Progressive Web App to organize and complete tasks

productivity home page

technologies

HTML SASS JavaScript React Next.js localStorage

๐Ÿ“– features

๐ŸŽจ tasks

tasks are separated into quick, medium and large tasks.

When a task is completed it is sent to the bottom.

productivity task done

Edit and delete functionality is hidden when a task is completed.

A modal shows when editing a task.

edit task modal

Tasks are stored in localStorage.

๐ŸŽ‰ reward

When all tasks are completed a celebration page is shown.

reward

๐Ÿ“œ stats

When all task for a day is completed a day is filled in on the calendar.

streak chart

Clicking on a filled in square shows all tasks completed on that day.

previous tasks

When a task is completed it is added to the task count.

task count

โ˜€๏ธ themes ๐ŸŒ™

Auto detects and applies preferred theme. The theme is stored into localStorage.

add to home screen

You can add it to your home screen to easily revisit it again.

next project >

place

340 x 340 canvas to create art with pixels