[Matt Ha Interview] Todo List implementation

[matthaaa]

Overview

This branch implements a Todo List app with tasks organized into status columns (To Do, In Progress, Done). Users can create and move individual tasks. The state is managed centrally, and localStorage is used as a lightweight persistence layer.

Features and Considerations

• Components were abstracted into a separate directory for maintainability and scalability. Also sets the scene for future component abstractions (i.e. creating a configurable generalized Button component)
• Added a localstorage service later for data operations; this allows data to be persisted without connecting to a backend server, but also decouples data management from UI, enabling easy swapping to a backend API if it were to be implemented in the future.
• State is centralized in ChallengeComponent and flows down via props in order to maintain a single source of truth; this simplifies debugging, and avoids issues like state duplication across multiple components.
• Components are presentational and receive actions via props. This simplifies unit testing, allows mocking of actions, and ensures components remain predictable and decoupled from data logic.
• UX considerations: used my best judgment when adding labels, disabled / empty states, and general layout.
• Opted for parallel file structure for tests in order to keep the component file tree clean and readable (this required some config changes).
• Typing to enforce data structure and prevent runtime errors.

Additional features

I was admittedly having fun with this, so I added some more features for demonstrative purposes (also to showcase the scalability of the taskService file):

• deletion of individual tasks
• seeding of tasks (both with the button and also automatically if task list is empty and the browser is refreshed)
• clearing all tasks

Future considerations

• More generalized components (a configurable button, modals, etc)
• Plugging into an actual API (if this were to be an actual product) and swapping out localstorage
• success/error handling for API calls

Screenshot

Reviewers:

@barrypeterson
@jmatusevich
@falecci
@danfsd