Focus

Inspiration

An important part for being productive is time management, so I build this application that basically works as a time tracker to help people have a better idea of how they spent their time to remind themselves of better time management.

What it does

This application aims to record the time and present each time duration to the users. It has three components: a countdown timer, a basic timer, and a time list, each timer has a reset feature. For the countdown timer, users can set the duration themselves; for the basic timer, it has a feature "log time" that can record the time in the time list, the time list is stored in the application's localStorage, to make sure the data won't be removed each time the user refreshes the page.

How we built it

It is a react application. I followed a youtube tutorial to learn how to construct the timers, for the time list, in order to make sure the data won't be removed each time the page is refreshed, I went through some online resources and found that I can use the window's localStorage to achieve this.

Challenges we ran into

One challenge was to deal with the libraries' version. In the tutorial I used, some libraries' versions are outdated so I would run into some syntax errors or function errors, a barrier was how to do my research and check the documentation to solve this and continue. The other challenge was when I was trying to build the time list. Since all data in the time list will be set back to default every time I refresh the page, I need to figure out a way to store those data to make my timer more practical.

Accomplishments that we're proud of

Two timers work, and the time list also works as I expected.

What we learned

This was my first time building a personal project, so I learned a lot along the way, like how to use react, how to take advantage of libraries, and how to use online resources to solve issues or achieve the features in my application.

What's next for Focus

I plan to improve the application so it can have more useful features. The time list is just for the basic timer for now due to the time constraint, but I want to make it also available for the countdown timer. And I want to add a new variable "task name" to the timer, so the time list will be clearer when the time duration and task name are displayed together. If possible, I also plan to implement some labels for the tasks and have a feature that can display a chart about how I have spent the day.

Built With

• react