A nested task list prototype built with React + MobX and Material-ui
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.
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.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
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.
This project uses the Airbnb Javascript + React Style Guide for coding style, and is configured for linting using ESLint.
For a project of this scale one of the primary considerations was keeping the design simple and understandable. Hence we have:
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.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.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.src/components/TodoList.jsx
, Todo.jsx
, AddTodo.jsx
, and Footer.jsx
are the React building block components for the app.
Todo.jsx
, which has worked great.Contributions are welcome! Feel free to send a pull request and/or contact me as per below.
MIT
I enjoy hearing from people checking out my projects. Get in touch on twitter @justinhaaheim or email me at io
@ justinh
dot org
.