*(image from pexels)

Being consistent with your code designs is hard, you need to be careful to watch out for all possible states that your code might fall into and take care of those, but where do we start?

When creating a new component I usually find myself having already created the data necessary to populate the component. This means I am usually starting my design with one to two copies of the specific component.

todoItems.map( todoItem => {
    <TodoItem todoItem={todoItem} />
})

Sometimes the lazy part of ourselves takes control and just lets this component like this and moves on to the next subject. But there is a problem with this approach.

Zero Items case

In case there are 0 todo items the page will look ugly and empty. What should there be instead?

• Help the user navigate and add a new to-do item.
• Inform him that there should be something there instead of nothing.

The other case that we should take care of is the MANY items case. What happens if we got 1000 items?

Many items case

In that case, we need to have considered how these elements will look like.

• Add a "see more" button.
• Load data asynchronously if possible for best UX.
• Let the user minimize it after opening it.

Following this {zero, one, two, many} tecnique you will never have to encounter these nasty empty designs again!