The 5 Most Important Features on phived.com
Tags: webdev, javascript, programming, productivity
Published: 2024-02-22 20:55:11

My project [phived.com](https://phived.com) is turning 1 today!

It is an anti-procrastination to-do list that I developed as a way to help me remember things I have to do. The idea is you can list up to 5 things tasks. To do more, you have to complete some of the original tasks.

To celebrate, I'll look back to the 5 most important features that were implemented.I will share the pull requests at the end of the post, so you can see the implementation for each one!

### Reorder tasks

The most requested feature on this list. It allowed you to organize tasks however you please, regardless of the order you originally typed them.

A huge win for the user experience using [react-beautiful-dnd](https://github.com/atlassian/react-beautiful-dnd).

<img src="https://media.giphy.com/media/v1.Y2lkPTc5MGI3NjExYWZib2R6a29ncGN4MXpya3MzYzA5MjY5MXFyOGVjMmQxaXUzZXlsNyZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/AGgh947Iv3AgtMMyr7/giphy.gif"/>

### First Load Respects OS Theme

Even though I'm a big fan of light mode, having dark mode was a must from day 1. I know how much users, specially developers, crave it.

Even more important is that the initial load of the website respects the OS theme. This means that if your OS is set to Light the site will initially load as light mode, same for Dark.

If the user manually changes it to a specific mode, that will be prioritized over OS theme for all future loads.

### Daily Tasks

A common complaint I got was that 5 tasks weren't enough, if it could be 6, 7, 8, etc...

I always pushed back since it would undermine the original purpose of the project. After all, the site *is* called phived (five-d). And you aren't meant to accumulate tasks, quite the opposite!

But one feedback caught my attention: "I spend too much time typing the same tasks everyday". As an active user, I felt this too.

To a point where it became tedious to write the same few tasks every day (such as "work out", "take creatine" and "wash my face"), just to complete them and move on with my other, sporadic tasks.

So I added Daily Tasks! This feature lived in its own route, [phived.com/daily](https://phived.com/daily), and had one job: to restore tasks. Whenever you complete a task, the list shrinks, and a button with "restore tasks" appears.

The tasks can only be restored in a different day to when you completed them, so it is perfect for things you want to do every day!

<img src="https://media.giphy.com/media/v1.Y2lkPTc5MGI3NjExenczNWZkdmNmZ20xZmRkbzd2ZDBtNW1xYjVkMHc4eGdwdWRxZmlsYyZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/1YJyM5oBVtwgLHh3ow/giphy.gif"/>

### Help Menu

When I launched phived, I got feedback I never thought I'd get: "Your site looks nice... But what does it do?".

This is such a crucial topic. As the developer, the goal of your website is crystal clear. But your user needs guidance. They must know what your site does. If you fail at this, they're gone and they won't look back.

That's why I implemented this Help Menu, explaining what the site does (and some keyboard shortcuts as a bonus!).

A nice touch is that it is open by default when the user first loads the website.

![A help menu explaining what phived.com does](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hdtw9t6vjpiynb6c1zdt.png)

### Confirm to Delete Tasks

You shouldn't be able to complete destructive actions with:

- No confirmation step
- No way to undo

That's why we added a confirm dialog to the "clear tasks" button. I'm sure it saved some important tasks from vanishing!

![A confirm modal asking the user if they're sure about the deletion of all their tasks](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5wi6ly9fboe3jzmqrac3.png)

### Conclusion

Here are the pull requests for each feature:

- [Reorder Tasks](https://github.com/LukeberryPi/phived/pull/42)
- [Confirm to Delete Tasks](https://github.com/LukeberryPi/phived/pull/52)
- [First Load Respects OS Theme](https://github.com/LukeberryPi/phived/pull/76)

I merged the other two straight into main, sorry!

Thanks for reading! If you enjoyed this follow me on [twitter](https://twitter.com/lukeberrypi) and [star phived on github](https://github.com/LukeberryPi/phived).