Todo List Applications as a Learning Tool

The Todo List is an application that is underrated in its useful as a learning tool for new developers. The Todo List encompasses a lot of core concepts that can help you become a good developer such as

  • state management (CRUD, empty),
  • form processing,
  • user interaction,
  • and smart vs dumb components.

State Management

The main feature of a Todo List is for the user to be able to enter, delete, update and view things they have on their list. This feature in itself requires you to start thinking about how you will structure, manipulate and store your data.

Should I use a global variable, a variation of flux, local storage or a database to store my data? Should I store it as an object or an array? What kind of data should I collect from the user?

As you start developing more and more, you realize that structuring your data determines how you code your UI, how your application performs, etc.

Form Processing

The ability to take in input from a user should be second-nature for developers. The beauty of the Todo List is you can take in more than just the user’s task. Maybe you want to ask the user for a deadline, priority, category or long description of the task.

With each new field added to your form, you begin to think about how you want to collect user input. Do you want some fields as required? Do you need a different type of input — a date input?

On top taking in information from the user from an empty state, you will also consider how you will handle editing of those tasks. Will you have the same structure? Will some fields be read-only?

User Interaction

User interaction is key when developing any application because it might determine if a user will continue using your application or not. A Todo List provides a variety of user interaction scenarios that you might not even consider until you start developing the application.

User interaction doesn’t always mean that the user has to initiate the interaction, but it could also mean that the UI encourages the user to do something.

An example of a user interaction that steers the user to do something is an empty list. You can, in theory, just put “No Tasks” as the empty state; but if you put a call-to-action button, you might encourage the user to create a new task.

Other user interaction questions that might come up during development is how the user can edit, delete or complete the tasks they’ve entered. Should there be a popup when editing? Should a confirmation modal popup on delete? How should I convey that a task has been marked as completed?

Smart vs Dumb Components

Smart and Dumb Components mostly relate to something like ReactJS but it’s a concept that can be transferred to other component-based frameworks.

Determining how to split up your components or determine what can be turned into a component is a necessary skill to learn. I’ve been in many interviews where you are asked to design something with componentization in mind.

With the Todo List, you are given the opportunity to do just that — how should I organize my Components? Should I have a giant smart component to handle my state or should I have smaller dumb components? Should I do a combination of both?

Todo Lists may seem incredibly simple but it brings out questions that you would face on a daily basis — how should I structure this, how should the user do “A”, etc. As a learning tool, the Todo List is one of my favourite applications to develop because there are so many ways it can be implemented.

A Todo List can be as simple or as complicated as you want it to be. It’s a great stepping stone for someone who wants learn how to code.

I’m a developer currently working in Vancouver, Canada. I mainly work as a front-end developer and I still dabble in the back-end of things. Feel free to visit my website and follow me here as well as my different social media accounts!