Tada! To-do List

Project image

Tada! To-do List

A draggable, droppable, reorganizable to-do list app built with React, Redux, and Ruby on Rails

Live demo | Blog post | Github repository


  • RESTful Ruby on Rails API backend with JSONAPI serializer
  • React frontend with Redux as state store
  • JSON Web Token authentication based on devise-jwt
  • Nested and protected routes through integration of React Router
  • User accounts with error feedback upon unsuccessful account creation
  • Full CRUD (Create-Read-Update-Delete) capabilities on models
  • Interactive to-do list management with drag-and-drop capabilities based on react-dnd
  • Custom element position tracking system with debounced position updates used to enable drag-and-drop
  • Custom item sorting algorithm to achieve correct item positioning on drop event
  • Persistent sorting of items through implementation of batched updates
  • Memoized Redux selectors using redux-views for improved performance
  • Memoization of complex components for improved performance
  • Drag-and-drop functionality fully enabled for touch devices
Drag and drop