Skip to content
    Back to all Bounties

    Earn 18,000 ($180.00)

    Time Remainingdue 7 months ago
    Open

    Create email client using Shadcn Email client and Nylas

    BountyHunter14
    BountyHunter14
    Posted 7 months ago

    Bounty Description

    Problem Description
    I'm looking to enhance the ShadCN UI email client example (from ui.shadcn.com/examples/mail) to create a functional email client using Nylas v3 API. The current implementation only supports single email viewing, but we want to upgrade it to handle conversational threads similar to Gmail's interface, with full Nylas integration and reply functionality.

    The main challenge is creating a complete email experience that:

    1. Integrates with Nylas v3 Threads API for real email data

    2. Displays email threads in an intuitive, Gmail-like interface

    3. Supports composing and sending replies within threads

    4. Maintains ShadCN UI's clean design aesthetic
      Acceptance Criteria
      Nylas Integration:

    5. Nextjs, Tailwind, ShadCN UI

    6. Implement Nylas v3 API integration for:
      Fetching email threads
      Reading individual emails
      Sending replies

    7. Thread List View (Left Sidebar):

    8. Fetch and display real email threads via Nylas API

    9. Show participant names in a Gmail-style format:

    10. Single participant: "John Smith"
      Two participants: "John Smith, me"
      Three or more: "John Smith, me, Jane Doe"

    11. Display the most recent subject line for each thread
      Update in real-time when new replies are sent

    12. Email Display View (Main Panel):
      Implement accordion-style thread view where:
      Latest email is fully expanded by default
      Previous emails are collapsed but expandable
      Each collapsed email shows sender name and brief preview
      Clicking expands/collapses the full email content
      Maintain chronological order (oldest at top, newest at bottom)
      For single emails (no thread), display in full without accordion

    Reply Functionality:

    • OPTIONAL: Support basic rich text editing for replies
    • Send replies through Nylas API
    • Update thread view immediately after reply is sent
    • Show sending status/confirmation

    Technical Requirements:

    • Must use the ShadCN UI email client as the base
    • Must integrate with Nylas v3 Threads API
    • Handle loading states and error scenarios
    • Implement proper error handling for API calls

    Follow React/Next.js best practices
    Use ShadCN UI components for consistency

    Absolutely must have:

    Display Email threads in a gmail like experience in mail-display

    Not Required:
    Complex email formatting (basic rich text is sufficient)
    Other email functionalities like Delete, Archive.
    Calendar or contact integration

    Looking for a production-ready implementation that creates a smooth, intuitive email experience while maintaining ShadCN UI's design patterns. The solution should demonstrate proper API integration, state management, and error handling.