Skip to content

ToDo List App Tutorial Part 1: Requirements

Andrei Fangli edited this page Jul 2, 2021 · 2 revisions

In this tutorial series we will see how we can use react-model-view-viewmodel package to create, the one and only, todo list application. This is a good sample application because it covers everything we need, displaying a list of items, having detail pages for these items as well as creating, editing and deleting items. This will include forms and validation.

To better understand what we want to build in this tutorial we should make a list (oh yes, a todo list!) of features we want to implement.

  1. Display a list of todo items
  2. Be able to add a todo item, has a description and has three states: todo, doing and done
  3. Be able to update todo items, maybe we had a typo or want to add more details
  4. Not be able to add empty todo items, unlikely that we will actually do this, but a little validation wouldn't hurt
  5. Be able to progress our todo items, it would be pretty useless if we couldn't do that, but we want to do this from the display list as well
  6. Be able to delete our todo items, once we complete them it may become crowded
  7. Be able to search in our list

We will be developing this application using TypeScript to take full advantage of its type checking with Webpack. Obviously, we will be using React since this is a React library, hehe. Some custom CSS will suffice, let the artist within come forth!

With our requirements in place, it's time to get started! Next part is ToDo List App Tutorial Part 2: Setup

Clone this wiki locally