/todo-app

Vue Todo- app with Vuex for state management and Firebase for data storage.

Primary LanguageJavaScript

Vue Todo- app with Vuex for state management, Firebase for data storage and Tailwind CSS for styling.

Todo state diagram

Todo mockup

Issues

  • setup firebase & load seed data

  • configure firebase in vue project for persistence

  • setup font awesome for icons

  • setup vuex store for state management

  • configure store for state management

  • create presentation layer & implement logic

    • app - main container
    • logo
    • todo
    • searchBar
    • todoList
    • todoItem
      • create a checkbox to toggle completed todo
      • create delete icon & implement logic to deleteTodo
      • implement editing todo inline - this features toggles between states displayTodo and a hidden div that editTodo. Double click on todoItem reveals this hidden div.
    • checkAlltodos
    • itemsLeftTodo
    • filterTodos
    • clearCompletedTodos
    • loading spinner
    • replace todo icon
    • deploy

    Sample app here: https://flamboyant-wright-3a66dd.netlify.com