To-Do List App.

Project Overview

Create a To-Do List application using React.js with TypeScript. Structure the project so other developers can easily continue work: prioritize modularity, reusability, and performance.

Core Requirements

• Use React.js + TypeScript
• Design a scalable architecture with clear folders (components, hooks, store, pages, utils, styles).
• Build reusable UI components
• Implement global state management for tasks, filters, and user preferences.
• Include optimizations where appropriate.

Features to Implement

• Create, edit, complete, and delete tasks.
• Task metadata: title, description, due date (optional), priority (optional), and tags (optional).
• Responsive UI.
• (optional) Filter/sort tasks (all, active, completed, by priority, due date).
• (optional) Persistent storage (LocalStorage or a simple API mock) so tasks survive reload.

Architecture & Developer Experience

• Organize code with a clear, consistent folder structure and small, single-responsibility components.
• Document major decisions in a README.md

Recording & Submission

• Record a screen capture video of the entire project from start to finish (use: Vidyard, Loom, or similar). Maximum length: 30 minutes.
• Turn on screen sharing and your front webcam so we can see you and your coding screen.
• The video must show the full process, from the beginning of the work to the completed project.
• If the recording reaches 30 minutes, stop the recording at exactly 30 minutes and submit what you have.
• Push the code to a public GitHub repository and share both the repo link and the video link.

Rules

• Do not use AI to write the solution. Inline editor autocomplete is acceptable, but do not use AI-generated code.
• While coding, explain your decisions verbally in the recording (what you do and why).
• Keep commits clear and descriptive—small atomic commits are preferred.

Suggested Stack

• UI: Tailwind CSS
• State Management: MobX
• Framework: Next.js