Todolist

Lightweight To-do management web app. Live demo here.

Table of Contents

• General Info
• Technologies and Techniques used
• Features
• Screenshots
• Setup
• Project Status
• Room for Improvement

General Information

• This project is the MVP version of Todoist.com's To-Do app.
• Information is stored in the Local Storage, there is a separate branch being worked with the Firebase BAAS.

Technologies and Techniques used

Planning and Design:

• The planning was done with the User Story Mapping technique.
• The web app architecture is Layared, you can find the Package Diagram here.
• The Class Diagram designed for this web app is here.
• The UI was implemented matching the todoist.com UI shapes and colors from scratch:

Front-end:

• Vanilla Javascript.
• Internal application state managed 100% with Clousures.
• CSS design with Tailwind CSS.
• The web app is 100% responsive.

Back-end:

• This web app has no backend for now.
• Due to the type of information is handled, all the information is stored in the Local Storage.

Testing:

• Manual Testing was done with ~80% coverage.
• While testing, the project was run using the Chrome's Development Tools "Fast 3G" and "No Caching" options. So the app is ready for slow internet connections.

Features

• Create Projects ✔
• Create, Modify and Remove Tasks ✔
• Mask Tasks as Done ✔
• Create, Modify and Remove SubTasks ✔
• Create, Modify and Remove Notes ✔
• Filter Tasks by Project ✔
• Filter Tasks by Dates ✔
• Enable Tasks Expiration notifications 🔜
• Store data in the Cloud 🔜
• Sign-up and Log-in 🔜
• Assign Tasks to other user 🔜

Screenshots

Click an image to enlarge.

Dashboard	Dashboard responsive	Task Edit

Setup

Clone this project by doing:

$ git clone https://github.com/pieroguerrero/todolist.git

Then go to the folder you cloned the code and execute:

$ npm install

WARNING: If you are going to use other libraries to achieve other purposes be carefull and remove the caret (^) prefix that the dependency versions have.

Project Status

Project is: in progress

Room for Improvement

There are always room for improvement, in this project so far the thinkgs that can be improved are:

• Enable back-end APIs so the user can store information in the Cloud or enable a BAAS such as Firebase.
• Implement automated Unit Testing.
• Migrate to a Javascript framework in order to increase the maintainability for future changes.