Todo lists are the best webdev project

Published: at 03:17 PM

Table of contents

Open Table of contents

Hear me out

Disclaimer: As this is not some AI generated slop you will probably find some mistake or don’t agree with some of the points I make. I am always open for suggestions so don’t be shy and contact me if there’s anything you would like me to add! Todo-Lists are the best project to quickly learn new webdev technologies. At least from my point of view. Let’s find out why.

Finite Timeframe

Did you ever start a side-project with an endless amount of ideas? Sure, you would certainly learn a lot, but imagine you would have to start all of your side projects with new technologies - it would take a lot of time to finish. Todo lists certainly don’t have this problem as it is a simple project with a very clear and finite goal. This makes it easier to start, because you know it is a project that can be finished in one day (depending on complexity).

Clear User-Flow

There is no guessing involved how a todo list should work. The functionalities are all very clearly defined and easy to understand.

User Input

Your App has to deal with user input in various ways depending on how complex your todo list is. This leads to a very important part of web development that every developer has to deal with at some point: user input validation and forms. At this point you can make it as simple as possible (not recommended) or you can ask yourself: How does input/schema validation work with the current technology I am using? How do I handle forms? Are there any specific packages for forms that are used by the majority of devs who use the same technology you are learning? This knowledge will certainly benefit you in the future.

State Management

Sure, todo lists don’t really need a lot of state management, at least not simple ones. Adding, checking and deleting Todos is simple enough. But let’s say you build a more complex todo list that lets users create their own folders/or tags, each having their own lists of todos that have to be done. Or the user can edit the todo after it has been created. In that case you really have to ask yourself how the technology you are trying to learn deals with state management. Start with the basics the technology provides and then optionally try using any popular state management packages. You could also think about an undo/redo functionality which brings its own complexity.

Easily extendable

As mentioned before todo lists are a very simple project. However, they can be extended by an almost endless amount of functionality and therefore complexity. A few quick examples:

Add a little bit of (Fullstack) spice

All of the mentioned points above are very frontend specific. That doesn’t mean you cannot simultaneously practice your backend skills. To make this a full-fledged and usable todo list you have to give users the ability to save and retrieve their data. This brings us into the realm of the backend which is its own monster. While I don’t have any specific recommendations I want you to think about the possibilities. Want to learn GO to build the backend? Go for it! (I’m sorry). Or better in python? Slither away! (I’m not sorry). Also think about the type of database you want to use, the ORM (if necessary) and even DevOP-tools if you anticipate millions of users using your app. The options are endless here! But the overall simplicity of a todo list will make it easier to add a backend with new technologies, because the data itself and the business logic is relatively simple.

Add tests (optional)

Due to the clearly specified userflow it should be simple to add tests. Please don’t be mad when I say this, but I think unit tests are overkill for todo lists. However, I am convinced that you will immensely benefit from adding E2E (End-to-End) tests for your app, no matter how simple they are. This allows you to learn new testing frameworks as well which is an added bonus.

CI (optional)

Adding a CI script with multiple processes has a lot of advantages. In my own personal dev journey I found that the simplest CI scripts (linting, typechecks, e2e-test) already do the heavily lifting for the most easily avoidable bugs. If you don’t know what CI is and want to know more about how it works with GithubActions check it out here.

Deployment

Whether you make this a frontend-only or fullstack app, you certainly want to try out deploying your project as well. This lets you try out as many providers as you want and I can guarantee you that you will learn a lot from this. If you want to extend this even further you can look into how to set up a domain for yourself and host your project on your own domain.

Apart from being able to learn any kind of CSS-framework or component library you can also think about the design in terms of actually designing the app. You could even build a small design system where you think about things like fonts, visual hierarchy of your elements on the page, color palettes, primary and secondary colors, animations, etc. Due to the small horizon of the project you can set this up very quickly. This can give you insights in commonly used design tools like Figma.

Todo lists of any shape or form are used by almost every person on the planet. This also includes people with different disabilities. This topic is (unfortunately) not very popularized in the current webdev world. A todo list can serve as an entry point to deal with a11y questions like:

Conclusion

Todo lists are awesome and let you learn a lot of stuff very quickly. The only downside I see currently is that you can’t really present this as a project to a recruiter due to its simplicity (on the surface at least). So try it out and tell me what you think! Until next time.