Interactive Task Dashboard

A modern, responsive task management application built with React, TypeScript, and Framer Motion. Features smooth animations, intuitive UX, and comprehensive task management capabilities.

🚀 Quick Start

Prerequisites

• Node.js 16+
• npm or yarn

Installation

# Clone the repository
git clone <repository-url>
cd frontend-assessment-starter

# Install dependencies
npm install

# Start development server
npm run dev

# Open in browser
open http://localhost:5173

Available Scripts

npm run dev      # Start development server
npm run build    # Build for production
npm run preview  # Preview production build
npm run lint     # Run ESLint

🎨 Design Decisions

Architecture & Component Structure

Component Hierarchy:

TaskDashboard (Main Container)
├── StatsCard (Statistics Display)
├── FilterBar (Search & Filtering)
├── TaskCard[] (Individual Tasks)
├── TaskForm (Add/Edit Modal)
└── ConfirmationModal (Delete Confirmation)

Rationale:

• Single Responsibility: Each component has a clear, focused purpose
• Composition over Inheritance: Components are composed together rather than inherited
• Props Down, Events Up: Clear data flow with props and callbacks
• Reusability: Components are designed to be reusable and configurable

Design Decisions:

• Strict Typing: All components and functions are fully typed
• Union Types: Priority and filter types use union types for type safety
• Optional Properties: Optional fields use ? for clear API contracts
• Generic Components: React.forwardRef with proper generic typing

URL Routing Strategy

Custom URL State Management:

// URL patterns
/task/{id}  // Edit specific task
/add        // Add new task
/           // Dashboard home

Rationale:

• No Router Dependency: Avoids adding React Router for simple routing needs
• Browser History: Uses native History API for clean URLs
• State Synchronization: URL state stays in sync with modal state
• Bookmarkable: Users can bookmark specific task edit states

✨ Animation Choices

• Performance: Optimized for 60fps animations
• Declarative: Easy to read and maintain animation code
• Physics: Natural spring animations with realistic physics
• Accessibility: Built-in reduced motion support

⏱️ Time Breakdown

Planned vs Actual

Feature	Planned	Actual	Status
Core Implementation	35 min	30 min	✅ Under
Animations & Interactions	15 min	20 min	⚠️ Over
Design & UX	10 min	12 min	⚠️ Over
TOTAL	60 min	62 min	+2 min

🔧 Known Limitations & Trade-offs

Technical Limitations

1. No Backend Integration

Current: Local storage only Impact: Data doesn't sync across devices Trade-off: Simplicity vs. persistence

2. No Real-time Collaboration

Current: Single-user application Impact: No team collaboration features Trade-off: Complexity vs. scope

3. Limited Data Validation

Current: Client-side validation only Impact: Data integrity relies on client Trade-off: Simplicity vs. security

Design Trade-offs

1. Modal-based Editing

Chosen: Modal for task editing Alternative: Inline editing Trade-off: Better UX vs. simpler implementation Rationale: Modal provides focused editing experience

2. Card-based Layout

Chosen: Individual task cards Alternative: Table layout Trade-off: Visual appeal vs. information density Rationale: Cards work better on mobile devices

3. Single Page Application

Chosen: SPA with URL routing Alternative: Multi-page application Trade-off: Performance vs. SEO Rationale: Better user experience for task management

Performance Considerations

1. Animation Performance

Current: Framer Motion with 60fps target Limitation: May impact performance on older devices Mitigation: Respects prefers-reduced-motion

2. Local Storage Limits

Current: Browser storage for persistence Limitation: ~5-10MB storage limit Impact: Large task lists may hit limits Mitigation: Could add data compression or pagination