nextjs-3.md

Next.js Developer Assessment - Project Task Manager

Create a project task management application that helps users organize and track tasks across different projects. This assessment focuses on state management, drag-and-drop functionality, and dynamic updates.

Requirements

1. Dashboard Page (/app/page.js)

   • Display project overview cards
   • Show task completion statistics
   • Recent activity feed
   • Quick task creation button

2. Project Board Page (/app/projects/[projectId]/page.js)

   • Kanban-style board with columns:
     • To Do
     • In Progress
     • Review
     • Complete
   • Drag and drop tasks between columns
   • Column task count
   • Project progress bar

3. Task Component (/app/components/Task.js)

   • Display task details:
     • Title
     • Priority level
     • Due date
     • Assigned team member
     • Time estimate
   • Quick edit functionality
   • Priority color coding

4. Task Filters (/app/components/TaskFilters.js)

   • Filter by:
     • Priority
     • Assigned team member
     • Due date range
   • Save filter preferences

Sample Data

// /app/data/projectData.js
export const projectData = {
  projects: [
    {
      id: "proj1",
      name: "Website Redesign",
      description: "Modernize company website",
      progress: 65,
      columns: [
        {
          id: "todo",
          title: "To Do",
          tasks: [
            {
              id: "task1",
              title: "Update homepage hero section",
              priority: "high",
              dueDate: "2024-11-15",
              assignee: {
                id: "user1",
                name: "Alice Johnson",
                avatar: "/avatars/alice.jpg"
              },
              timeEstimate: "4h",
              tags: ["design", "frontend"]
            }
          ]
        },
        {
          id: "inprogress",
          title: "In Progress",
          tasks: [
            {
              id: "task2",
              title: "Implement responsive navigation",
              priority: "medium",
              dueDate: "2024-11-10",
              assignee: {
                id: "user2",
                name: "Bob Smith",
                avatar: "/avatars/bob.jpg"
              },
              timeEstimate: "6h",
              tags: ["frontend", "mobile"]
            }
          ]
        }
      ]
    }
  ],
  team: [
    {
      id: "user1",
      name: "Alice Johnson",
      role: "Designer",
      avatar: "/avatars/alice.jpg"
    },
    {
      id: "user2",
      name: "Bob Smith",
      role: "Developer",
      avatar: "/avatars/bob.jpg"
    }
  ]
}

export const activities = [
  {
    id: "act1",
    type: "task_moved",
    taskId: "task1",
    from: "To Do",
    to: "In Progress",
    user: "Alice Johnson",
    timestamp: "2024-10-30T10:30:00Z"
  }
]

Technical Requirements

1. Use Next.js 14 with App Router
2. Implement drag and drop using react-beautiful-dnd or similar
3. Use CSS Modules or Tailwind CSS for styling
4. Implement client-side state management
5. Use proper TypeScript types
6. Add optimistic updates for drag and drop operations
7. Implement proper error handling and loading states

Required Components

1. DraggableTask (/app/components/DraggableTask.js)

   • Handle drag and drop events
   • Display task information
   • Show drag preview

2. ProjectMetrics (/app/components/ProjectMetrics.js)

   • Display project statistics
   • Progress visualization
   • Task distribution chart

3. ActivityFeed (/app/components/ActivityFeed.js)

   • Real-time activity updates
   • Activity grouping by date
   • Activity filters

Evaluation Criteria

1. Interaction Design

   • Smooth drag and drop
   • Responsive animations
   • Intuitive UI/UX

2. State Management

   • Efficient updates
   • Optimistic UI
   • State persistence

3. Component Architecture

   • Reusable components
   • Proper prop drilling avoidance
   • Event handling

4. Performance

   • Efficient rendering
   • Proper use of useMemo and useCallback
   • Loading state management

5. Code Quality

   • TypeScript implementation
   • Error handling
   • Code organization

Implementation Tips

1. Start with basic task display and movement
2. Add drag and drop functionality
3. Implement filters and sorting
4. Add metrics and activity feed
5. Polish UI and add animations
6. Implement error handling and loading states

Expected Deliverables

1. Functioning task board with drag and drop
2. Complete project overview dashboard
3. Working filter system
4. Activity tracking implementation
5. Responsive design for all views
6. Type definitions for all components