nextjs-4.md

Next.js Developer Assessment - File Explorer

Create a file management system that allows users to organize and manage files and folders. The application should feature a tree structure, file previews, and interactive organization capabilities.

Requirements

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

   • Split view layout:
     • Folder tree navigation
     • File/folder content view
   • Breadcrumb navigation
   • Search bar with file/folder filtering

2. File Preview Page (/app/files/[fileId]/page.js)

   • Preview different file types:
     • Documents (text preview)
     • Images (thumbnail and full view)
     • Code files (syntax highlighting)
   • File metadata panel
   • Actions toolbar (download, share link, rename)

3. Folder Component (/app/components/FolderView.js)

   • Grid/List view toggle
   • Sort options (name, date, size, type)
   • Multi-select functionality
   • Context menu for actions

4. File Operations (/app/components/FileOperations.js)

   • Drag and drop for file organization
   • Cut/Copy/Paste operations
   • Bulk file operations
   • Create new folder

Sample Data

// /app/data/fileSystemData.js
export const fileSystem = {
  root: {
    id: "root",
    name: "Root",
    type: "folder",
    children: ["folder1", "folder2", "file1"],
    created: "2024-10-15T10:00:00Z",
    modified: "2024-10-30T15:30:00Z"
  },
  items: {
    folder1: {
      id: "folder1",
      name: "Documents",
      type: "folder",
      parent: "root",
      children: ["file2", "file3"],
      created: "2024-10-15T10:00:00Z",
      modified: "2024-10-30T15:30:00Z"
    },
    folder2: {
      id: "folder2",
      name: "Images",
      type: "folder",
      parent: "root",
      children: ["file4", "file5"],
      created: "2024-10-15T10:00:00Z",
      modified: "2024-10-30T15:30:00Z"
    },
    file1: {
      id: "file1",
      name: "readme.md",
      type: "markdown",
      parent: "root",
      size: 1024,
      created: "2024-10-15T10:00:00Z",
      modified: "2024-10-30T15:30:00Z",
      content: "# Project Documentation..."
    },
    file2: {
      id: "file2",
      name: "report.txt",
      type: "text",
      parent: "folder1",
      size: 2048,
      created: "2024-10-15T10:00:00Z",
      modified: "2024-10-30T15:30:00Z",
      content: "Monthly Report..."
    }
  }
}

export const fileOperations = [
  {
    id: "op1",
    type: "move",
    items: ["file1"],
    from: "root",
    to: "folder1",
    timestamp: "2024-10-30T15:30:00Z",
    user: "John Doe"
  }
]

Technical Requirements

1. Use Next.js 14 with App Router
2. Implement drag and drop using react-beautiful-dnd
3. Use Tailwind CSS for styling
4. Implement client-side state management
5. Use TypeScript
6. Add keyboard navigation support
7. Implement proper error boundaries and loading states

Required Components

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

   • Expandable folder structure
   • Drag and drop targets
   • Selection handling
   • Context menu integration

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

   • File type detection
   • Preview rendering
   • Download functionality
   • Sharing options

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

   • Current path display
   • Navigation shortcuts
   • Path editing

Advanced Features

1. File Search (/app/components/Search.js)

   • Real-time search results
   • File type filters
   • Recent searches
   • Advanced search options

2. Selection Manager (/app/components/SelectionManager.js)

   • Multi-select with shift/ctrl
   • Bulk operations
   • Selection persistence
   • Selected items counter

Evaluation Criteria

1. User Interface

   • Intuitive navigation
   • Responsive layout
   • Smooth interactions
   • Accessibility features

2. State Management

   • File system operations
   • Selection state
   • Undo/Redo functionality
   • Path management

3. Performance

   • Efficient tree rendering
   • Lazy loading
   • Smooth animations
   • Memory management

4. Code Quality

   • TypeScript usage
   • Component organization
   • Error handling
   • Documentation

Implementation Steps

1. Create basic file system structure
2. Implement navigation and preview
3. Add drag and drop functionality
4. Implement file operations
5. Add search and filters
6. Polish UI and add animations

Expected Deliverables

1. Working file explorer interface
2. File preview system
3. Drag and drop functionality
4. Search and filter implementation
5. Complete type definitions
6. Error handling implementation

Additional Considerations

1. Accessibility

   • Keyboard navigation
   • Screen reader support
   • ARIA labels
   • Focus management

2. Error Handling

   • Operation failures
   • Network errors
   • Invalid operations
   • Data consistency