Goal Tracker – A Productivity App

Why I created a goal tracker

Perhaps this is an odd thing to admit, but I love productivity apps and I especially enjoy creating useful apps that help me be more productive. When I was just getting started on my journey to become a software engineer, I created a Google sheet to track my progress and enlisted an accountability partner (my brother) to make sure I kept to my schedule.

At the beginning of each week, I created a short list of assignments that I intended to do every day and indicated how much time I planned to spend doing them. Then, I checked in with my accountability partner every evening to review my progress.

Setting out this weekly plan really helped me be consistent with my studies. And I found this sheet so helpful that I decided to recreate it using HTML, CSS, and React.

(As a quick aside, I found that having a time goal kept me more motivated than setting an “overall” goal. For instance, if you have a task like “learn React” on your checklist, it’ll take you a long time to be able to check it off your list. But if you have a smaller goal of spending 30 minutes each day learning React, you can achieve that every day. And before you know it, you’ll have actually learned React!)

About the app (it’s not just another to-do app)

The goal tracker creates a weekly planner that you can customize with the daily tasks you want to complete.

It works like this:

At the top of the page, you can enter the 7-day week that you want to track. The tracker will default to the current date, but you can select any date you want with the date picker.

The Weekly Total Table lets you enter daily tasks and provides a weekly overview of the minutes (in total) spent on each task.

• You can insert a task above the current task by clicking on the yellow “+” button or add a task below by clicking on the “Add a new row” cell.
• You can delete a row by clicking on the pink “-” button.

The Day Tables show you the tasks you need to complete each day.

• You can edit how long you plan to do each activity and your actual activity duration.
• If you reach your activity goal for the day, a checkbox appears that you can actually check off yourself. (I find checking tasks off of my assignment list is deeply satisfying!)

There is also a notes section for each Day Table where you can add information. I use this section to note what I accomplished during my session.

The entire task table is stored in local storage so you can refer to your tasks every day.

You can view the code on GitHub or view the app below.