TodoMVC (Vanilla ES6)

Simply the best todo list app created using plain JavaScript (ES6). And all those awesome features were created from scratch (Drag'n'Drop, animations, modal, sort (animated), search, tooltip, etc.).

The goal of this project was to see how big and complex an app can be built before it was time to switch to a JavaScript framework (ReactJS, VueJS or Angular).

It was possible to keep the project/code clean and maintainable thanks to the following:

The MVC design pattern
The module design pattern
The factory method pattern
Unit testing (Jest framework) - Test driven development

Demo
App screenshots
Technologies
Features & instructions
Development

Demo

Here is the working live demo: https://tarhi-saad.github.io/TodoMVC-Vanilla-ES6/.

App screenshots

Desktop version

Mobile version

Mobile	tablet

Technologies

Javascript modules, ES6
Material Design
The Web Storage API
Webpack 4
Jest framework (Unit testing)

Features & instructions

1- App structure

There are default projects and you can (create / delete / edit name) of new ones.
In every project you can (create / delete / edit / set as completed) our todos.
Every todo has details.

2- Todo details

You can select a todo to access its details to do the following:

Edit name
Bookmark todo
Add subtasks
Add to My Day (see Default projects below for more details)
Add due date
Set priority
Add note

3- Default projects

All Tasks: Here you can find and manipulate all todos from every project.
Todos created in this project will be added to Tasks project.
My Day: It's the same as My Day feature in microsoft todo list. With My Day, you can manage your daily tasks while letting you start each day with a clean slate. When you first open My Day each day, you're greeted with a fresh space to add the tasks you want to accomplish that day.
Todos created in this project will have My Day set per default and added to Tasks Project.
Bookmarked: If you set a todo as bookmarked you'll find it in this project.
Todos created in this project will get Bookmarked and added to Tasks project.
Planned: Every todo who has a due date can be found here and organized as such: (Earlier / Today / Tomorrow / Later this week / Next week / Later).
Todos created in this project will get Today as a due date and added to Tasks project.
Tasks: This is the default project.

4- Sorting todos

In every project you can sort todos (in ascending or descending order) by:
- Alphabetically
- Completed
- Added to My Day
- Bookmarked
- Due date
- Creation date
- Priority
Sorting todos is animated
Sort options are saved for every project individually

5- Drag'n'Drop

We can reorder todos by a simple Drag'n'Drop
The new order is saved
Touch screen support for Drag'n'Drop (The touch events API). You can activate Drag'n'Drop by a long press on the selected todo
Animated Drag'n'Drop

6- Search feature

Search for todos in every project
You can edit todos while still in search mode

7- Indicators in todos

There are indicators for every todo option that are added to the edited todo item:
- My Day indicator
- Subtask indicator
- Due date indicator
- Note indicator
- Bookmarked indicator
We can easily check our todo options without accessing its details view

8- Animation & design

Material design
Great & smooth animation with every interaction (add todo, delete todo, toggle completed, sort, Drag'n'Drop, open/close project window, add subtask, delete subtask, etc.)

9- Full mobile support

App fully responsive and easy to use in small screen devices
All features are supported (i.e. Drag'n'Drop, animations, etc.)

Development

To set up this App locally:

1- Clone this repo to your desktop

2- Run npm install to install all the dependencies.

3- Run npm start to lunch the App.

License

You can check out the full license here

This project is licensed under the terms of the GNU GPLv3 license.

tarhi-saad / todomvc-vanilla-es6 Goto Github PK