Demonstration of a ToDo application

Similar to Google Keep.

Written using React + Tailwind CSS + NextJS.

Supported use cases:

  • Add a list title
  • Add a task
  • Remove a task
  • Drag and drop to reorder tasks
  • Toggle a task as "completed/not completed"
  • Autosaved once logged in

Technical features:

  • Use of React features: useReducer(), useContext(), useState()
  • Leverages React server components, client components, and server actions
  • Third party libraries: react-dnd, react-contenteditable and react-autosave
  • Data persistence with Postgresql
  • Authentication using Auth.js and a Credentials provider

Log in or create an account to save your changes.

* Note that accounts are deleted on a daily basis.

List title
  • Move task
    a task
Expland completed items
1 Completed items