Earn 18,000 ($180.00)
Create email client using Shadcn Email client and Nylas
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:
-
Integrates with Nylas v3 Threads API for real email data
-
Displays email threads in an intuitive, Gmail-like interface
-
Supports composing and sending replies within threads
-
Maintains ShadCN UI's clean design aesthetic
Acceptance Criteria
Nylas Integration: -
Nextjs, Tailwind, ShadCN UI
-
Implement Nylas v3 API integration for:
Fetching email threads
Reading individual emails
Sending replies -
Thread List View (Left Sidebar):
-
Fetch and display real email threads via Nylas API
-
Show participant names in a Gmail-style format:
-
Single participant: "John Smith"
Two participants: "John Smith, me"
Three or more: "John Smith, me, Jane Doe" -
Display the most recent subject line for each thread
Update in real-time when new replies are sent -
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.