The 5 Most Important Features on phived.com

#webdev #javascript #programming #productivity

My project 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.

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, 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!

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.