Web Application

React To-Do List App Challenge
Nomadcoders Challenge
React To-Do List App with Dynamic Categories
[Portfolio Project]

1. Introduction

A polished, fully interactive to-do list application built with React, allowing users to manage tasks through customizable and searchable categories. It offers both simplicity and flexibility, aiming to strike a balance between clean UI and useful features. Perfect for experimenting with category-based filtering, persistent state, and intuitive UX patterns.

Features
  • Category Management
    • Default categories: To Do, Doing, Done, and All (non-removable).
    • Custom category support: Add, rename, and delete any categories except "All".
    • Validation:
      • Prevents duplicates (category of the same title can't be added twice).
      • Alerts when fields are empty.
    • Long category name support: Handles overflow gracefully in dropdowns and UI. Add extremely long category names and still have them fit within UI constraints (e.g., "Very loooooooooooong category" works fine in dropdowns and badges).
  • To-Do CRUD
    • Add and delete to-dos with category tagging.
    • Multi-line inputs with resizable textarea. Write detailed task descriptions using a multiline text box.
    • Validation for empty to-do text
    • Searchable dropdown to select category when adding a new to-do.
  • Smart Filtering
    • "List: All" shows all tasks across all categories.
    • Dynamically switch between category filters.
    • See filtered to-dos based on category selection.
    • Add/search/select from long lists of categories dynamically.
    • Dropdown filter and entry fields adapt to new categories in real-time.
  • Persistence & UX
    • LocalStorage-based persistence: Your tasks and categories stay even after refreshing or reopening.
    • Responsive design: Fully usable on both desktop and mobile
    • User feedback messages: Real-time prompts for validation and state changes
  • Validation & Error Handling
    • Instant feedback when trying to:
      • Add duplicate/empty categories.
      • Submit empty to-dos.
      • Leave required fields blank.

2. Techs

  • Language / Script

  • Library

  • IDE

  • VCS

  • Compiler / Transpiler / Bundler / Build Tool

  • Linter / Formatter

  • Package Manager / Dependency Manager

  • Deployment / Process Management / Containerization

  • Etc.

3. Screenshots

© 2025 hansf14. All Rights Reserved.