The feature image for the project Todo List.
The feature image for the project Todo List.
The feature image for the project Todo List.
The feature image for the project Todo List.

FRONTEND WEB APP | 2026

Todo List

A todo app built to sharpen React and TypeScript fundamentals — featuring drag-and-drop reordering, filter views, local storage persistence, and dark mode.

React
TypeScript
CSS

OVERVIEW

A fully functional todo app built as a hands-on exercise in React and TypeScript. Beyond the core CRUD operations, it includes drag-and-drop reordering, filter views for active and completed items, bulk clear, and dark mode — all persisted to local storage. The focus was on writing correct, idiomatic React with proper state immutability and clean event handling.

IMPLEMENTATION

TECH STACK

Framework

React, Vite

Language

TypeScript

Styling

CSS

Deployment

Render

FEATURES

Add, complete, and delete todo items

Drag-and-drop reordering

Filter views — All, Active, and Completed

Bulk clear completed items

Local storage persistence across sessions

Dark and light mode toggle

Fully responsive layout

CHALLENGES & SOLUTIONS

Drag-and-drop conflicting with interactive elements

Drop zones positioned over buttons were blocking clicks during normal use. Solved this with CSS pointer-events — drop zones are set to pointer-events: none by default so buttons remain fully accessible, then switched to pointer-events: auto only when a drag operation begins via onDragStart, and restored on onDragEnd.

Unintended state mutation with object arrays

Updating an array of objects in React state requires creating fresh copies of both the array and the modified objects — not just the array. Using .map() to return new object instances on each update prevents shallow copy issues, avoids unintended mutations across renders, and satisfies React strict mode's purity requirements.