todo.md

Todo App Development Plan

Server

• install adonis cli globally
• create a server folder to handle all backend files.
• reate an api only project using adonis.js framework.
• install all dependency
• install mysql as the database.
• create a UserController
• create register function
• make use of the register function on the routes.js file
• run the migration
• create a login function
• use login function on the routes.js file.
• create a List (could be called Project) include migration
• create a index function to get the project associated with a user.
• create create function to handle the creation of list.
• create destroy function to handle the deletion of list associated with a certain user.
• create Provider folder to handle error
• create an Exception called InValidAccess inside the Exception folder using the adonis cli using the helpadonis --help
• add update endpoint for updating the list
• create a new model for the Todos
• create the todo to list association
• create index endpoint endpoint for the todo
• create create endpoint endpoint for the todo
• create update endpoint endpoint for the todo
• create destroy endpoint endpoint for the todo
• add accomplished as a bolean to the todo table

Client

• update vue cli
• create a project client using vue create <name> name here is client
• also add the following dependency using npm install axios lodash vuetify vuex-persistedstate
• create plugins folder to handle client plugins.
• create vuetify.js to handle the easy modification of the package.
• add the link to load the material-icon logo.
• create a Toolbar component to handle the navigation bar.
• add a Register component and add some basic theming
• add an authenticate.js to handle the authetication and store of the registered user
• enable cors to allow cross origin request.
• create a service folder to house http.js file to make use of the axios modules.
• create functions that is used to handle request to our endpoint.
• add the html markup for the login components.
• add computed properties and methods for the login to communicate with the login endpoint and database.
• create a ListView component to house creation of the list.
• create List view to house the ListView
• add the html markup for the ListView and List
• implement creating a List and sending the response to the backend.
• implement editing of the list and sending the response to the backend.
• persist data by sending the actions to the mutations
• add autofocus when editing the list title
• refactor List.vue by creating CreateRecord.vue
• create another CanEditRecord.vue to house editing, save, deleting logics particular to that component
• Create a Todo.vue component to handle the todos
• implement the same logics from the CanEditRecord.vue and CreateRecord.vue.
• create a todos.js file to handle the store, mutations, actions then render then on the CanEditRecord.vue and CreateRecord.vue.
• add margin right to the Toolbar to slide the SmartList title to right.
• implement a checkbox for when the Todo is accomplished or not accomplished, save the state to the database.
• renable the persistence state plugin to cache the state to the Local Storage.
• build app for production.
• [ ]

TODO :

• clean the UI
• Redesign the DashBoard
• implement a User Profile for each List and Todo.
• To deploy to Heroku,AppEngine, DigitalOcean
• Implement some authentication layer.