nextjs-5.md

Next.js Developer Assessment - Email Client

Create an email client interface that allows users to manage their emails with a modern, responsive design. The application should feature email organization, composition, and interactive features.

Requirements

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

   • Three-column layout:
     • Folders/Labels navigation
     • Email list view
     • Email preview pane
   • Virtual scrolling for email list
   • Real-time email counter

2. Email Composition (/app/compose/page.js)

   • Rich text editor
   • Recipient autocomplete
   • File attachment interface
   • Draft auto-save
   • Send scheduling options

3. Email View (/app/email/[emailId]/page.js)

   • Thread view with expansion
   • Inline reply interface
   • Attachment previews
   • Action toolbar (reply, forward, archive)

4. Search and Filters (/app/components/EmailSearch.js)

   • Advanced search options
   • Filter by:
     • Date range
     • Has attachments
     • From specific sender
     • Label/folder
   • Saved searches

Sample Data

// /app/data/emailData.js
export const emailData = {
  folders: [
    {
      id: "inbox",
      name: "Inbox",
      unread: 3,
      total: 120
    },
    {
      id: "sent",
      name: "Sent",
      total: 50
    },
    {
      id: "drafts",
      name: "Drafts",
      total: 2
    }
  ],
  labels: [
    {
      id: "work",
      name: "Work",
      color: "#FF4444"
    },
    {
      id: "personal",
      name: "Personal",
      color: "#44FF44"
    }
  ],
  emails: [
    {
      id: "email1",
      subject: "Project Update - Q4 Goals",
      from: {
        email: "[email protected]",
        name: "Sarah Johnson"
      },
      to: [{
        email: "[email protected]",
        name: "Current User"
      }],
      timestamp: "2024-10-30T14:30:00Z",
      folder: "inbox",
      labels: ["work"],
      isRead: false,
      hasAttachments: true,
      attachments: [
        {
          id: "att1",
          name: "Q4-Goals.pdf",
          size: 2048576,
          type: "application/pdf"
        }
      ],
      content: {
        text: "Hi team,\nHere are the Q4 goals...",
        html: "<div>Hi team,<br/>Here are the Q4 goals...</div>"
      },
      thread: ["email1", "email2"]
    }
  ],
  contacts: [
    {
      id: "contact1",
      name: "Sarah Johnson",
      email: "[email protected]",
      avatar: "/avatars/sarah.jpg",
      frequently_contacted: true
    }
  ]
}

Technical Requirements

1. Use Next.js 14 with App Router
2. Implement virtual scrolling for email lists
3. Use Tailwind CSS for styling
4. Implement client-side state management
5. Use TypeScript
6. Add keyboard shortcuts for navigation
7. Implement proper error handling and loading states

Required Components

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

   • Virtual scrolling implementation
   • Selection handling
   • Drag and drop support
   • Context menu actions

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

   • Text formatting toolbar
   • Paste handling
   • Image embedding
   • Signature support

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

   • Drag and drop upload
   • Progress indication
   • Preview generation
   • Size validation

Advanced Features

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

   • Collapsible conversations
   • Inline replies
   • Quote handling
   • Forward options

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

   • Full-text search
   • Advanced filters
   • Search suggestions
   • Recent searches

Evaluation Criteria

1. Interface Design

   • Responsive layout
   • Intuitive navigation
   • Smooth transitions
   • Loading states

2. Performance

   • Virtual scrolling
   • Lazy loading
   • Optimistic updates
   • Caching

3. Functionality

   • Email operations
   • Search capabilities
   • Attachment handling
   • Thread management

4. Code Quality

   • TypeScript implementation
   • Component structure
   • State management
   • Error handling

Implementation Steps

1. Set up basic layout and navigation
2. Implement email list with virtual scrolling
3. Create email composition interface
4. Add search and filtering
5. Implement thread view
6. Add advanced features and polish

Expected Deliverables

1. Working email client interface
2. Email composition system
3. Search and filter functionality
4. Thread view implementation
5. Complete type definitions
6. Error handling system

Additional Features

1. Productivity Tools

   • Quick replies
   • Templates
   • Scheduled sending
   • Follow-up reminders

2. Organization

   • Custom folders
   • Smart filters
   • Auto-categorization
   • Priority inbox

Accessibility Requirements

1. Keyboard Navigation

   • Shortcut keys
   • Focus management
   • Navigation patterns
   • Selection handling

2. Screen Reader Support

   • ARIA labels
   • Meaningful descriptions
   • Status announcements
   • Live regions