Task 1: Counter Component
0
Counter cannot go below zero
Task 2: Form Validation
Task 3: API Integration
Loading todo data...
TypeScript & Responsive Design Implementation
The layout adapts to different screen sizes using Tailwind's responsive utilities with full TypeScript support:
- • Type Safety: All components, props, and state are fully typed
- • Desktop (lg+): Components arranged in a 2-column grid
- • Mobile/Tablet: Single column layout for better readability
- • Navigation: Responsive spacing and text sizing
- • Forms: Full-width inputs with proper touch targets
- • Error Handling: Type-safe error states and validation
Technology Stack
ReactNext.jsTypeScriptTailwind CSSREST APILucide React