Assignment 2: Build todo application

Summary

You are now tasked to build a task manager application with React that you may have seen in a number of applications. In this application the look and feel is not important as long as the functionality is intact.

You will be using React to build a todo application, a task manager that has the following capabilities:

Look and Feel

  1. Be able to add a new task. Each task has a title, and can have zero or more tags associated with it
    1. There should be a form that has inputs that captures the subject of the new task, and a comma separated list for the tags. These fields can both be text input fields, but if you like to use another UI design you can
    2. New tasks are by default not completed
  2. Be able to see a list of all of your tasks in no particular order. Each task should display a checkbox (for completion/incompletion)
  3. Be able to check the checkbox of a task to complete the task
  4. Be able to edit a task. Should be able to modify subject and add/remove tags after a task has been created

Data Storage

All tasks should be saved in localStorage (under the key “my_todo_tasks”) in the following format:

{ 
  "tasks": [
    { 
       "title": "Complete Assignment 1",
       "is_complete": true,
       "tags": ["grading", "ischool"]
    },
    {
       "title": "Complete Lab 1",
       "is_complete": false,
       "tags": ["ischool"]
    }
  ]
}

The first task above would represent a task with title “Complete Assignment 1”, and would be tagged twice with tags “grading” and “ischool”, and it would be marked completed. On app startup it should load the data from localStorage to the application

  1. Essentially your web application should have two sections:
    1. A form to allow you to add a new task
    2. A list of tasks that are displayed: and a checkbox to complete/not complete each task, and to be able to edit a task.

Note: Please click on this link to set up your repo for Assignment 2.

Extra Credit: Client side tag search

  • List all of the unique tags that the user has used on any task, and display them
  • On clicking the tag, the list of tasks show all tasks that have that tag
  • Be sure to add a “Clear Filter” option where you show all tasks

Extra Credit: Save to database

  • Create an account and a project for Google Realtime Database (NOT Google Cloud Firestore)
  • Follow the instructions to connect your application to the external database
  • You should essentially replace the data that you are storing in localStorage to Google Realtime Database. It should load on startup from Google Realtime Database to your application.