Nested Task List (React + MobX) ☑️

Nested Task List is a React -based task list (or "todo list") prototype written in JavaScript (ES6+) built with MobX using the Material-UI React component library.

👉 Try it out: Nested Task List (Live Demo) 👈

Note: the task list loads with a short "demo" of the interface that describes the controls, which can be disabled in the code.

Project created by Justin Haaheim. See his other projects at his github page.

Features

Hierarchical task structure - easily define complex tasks and projects with simple indenting to nest tasks within tasks. When indenting/unindenting, the task list knows where to move your task so that it makes sense in terms of task relationships, and also produces a clear visual experience.
Elegant interface - Material Design interface with smooth ui transitions for indenting and visual touch feedback for clicks/taps on input fields and buttons.
Intuitive UI - tasks behave like lines in a text editor: use enter to create a new task, backspace on an empty task to delete it, up and down arrows to move focus up and down, cmd+up and cmd+down to move tasks up and down, tab and shift+tab to indent/nest tasks under one another. There is also a button to add tasks and a trash/recycle bin icon to delete.
Smart task completion logic - when a task is completed, all its sub-tasks are recursively completed. When a task is not-yet-complete, its parent tasks are marked not-yet-complete back to the root (ie when a project is completed its subtasks are as well).
Filter completed tasks - ability to show all tasks (completed and not), active tasks (incomplete), or completed tasks.

Install / Run in dev mode

From the root of the project directory:

npm install
npm start
open http://localhost:3000

Or if you're a yarn person:

yarn
yarn start
open http://localhost:3000

Design Considerations

My intention in building this was to create the following:

A purely client-side (web only) implementation of hierarchical task-list interface, demonstrating good code design and organization.

Specifically: an elegant "blank sheet" UI (e.g., think Google Docs or simple Todo list app where people can just type freely) that enables vertically nested Tasks as indented bulleted lists. A Task can contain text (as the title) and nested Tasks.

I chose to build this in React, using MobX to manage the application state and the react component library material-ui for basic ui functionality.

Why React? - It's flexible, exceedingly powerful and well-suited to a project like this with with a simple core design but with lots to add in terms of functionality.

Why MobX? - I actually started the project using Redux but found the design of actions -> reducers -> store to be burdensome. One of MobX's great features is its intuitive design & logic, and its simplicity. Create an observable TodoListStore store with observable TodoNodes. Check. ✓

Why Material-UI - The authors have done a fantastic job creating components that are visually attractive, precise and also functional. I knew it would be a great library to get me up and running quickly.

Style

This project uses the Airbnb Javascript + React Style Guide for coding style, and is configured for linting using ESLint.

Project Structure

For a project of this scale one of the primary considerations was keeping the design simple and understandable. Hence we have:

Entry Point - src/index.jsx and src/App.jsx provide the entry point to the App. index provides a hot reloading wrapper for dev, while App provides the material theme and access to the store.
Stores - src/stores/TodoListStore.js and src/stores/TodoNode.js provide the state management and define the essential actions to manipulate the tree that represents the visual nested task list.
Layouts - src/layouts/Primary.jsx is currently the sole layout (alternatively called a screen/scene/view depending on who you talk to) for the app, but this structure allows for other layouts in the future like menus/drawers, settings screens, etc.
Components - src/components/TodoList.jsx, Todo.jsx, AddTodo.jsx, and Footer.jsx are the React building block components for the app.
- I chose inline styling (of which there is fairly little) for simplicity. If the app were to grow, a more robust styling arrangement could be easily put in place.
- Since the user interactions are almost all based on clicking, typing or keyboard shortcuts that pertain to one particular todo node, I put the main user interaction logic in Todo.jsx, which has worked great.

Contributions are welcome! Feel free to send a pull request and/or contact me as per below.

License

MIT

Contact

I enjoy hearing from people checking out my projects. Get in touch on twitter @justinhaaheim or email me at io @ justinh dot org.

justinhaaheim / nested-task-list-mobx-react