Full Stack Developer Task Description
Objective:
Develop a chat-style email interface using [Link], NextUI, and InstantDB. The interface
should group and display email conversations in a chat format, and allow users to send new
emails seamlessly. The backend should handle data formatting and ensure emails are sent with
the correct subject, recipient, and other metadata.
Key Description
1. Frontend Development
○ Chat Interface:
■ Build a responsive and intuitive interface using [Link] and NextUI to
display emails in a conversational, chat-like format.
■ Group emails by their subject, incorporating replies (Re: tags) and
chronological order.
■ Highlight key details, including sender/receiver names (from_name),
email snippets, and timestamps.
○ Message Composition:
■ Design a user-friendly input box for composing and sending new
messages.
■ Ensure users can view the grouped conversation while drafting their reply.
2. Backend Development
○ Data Handling:
■ Use InstantDB to store and retrieve email data efficiently.
■ Implement logic to group emails by subject and organize them
chronologically using the date field.
■ Handle edge cases like emails with missing subject or nested replies
(Re: Re: tags).
○ Email Sending:
■ Develop an API endpoint to handle new email submissions.
■ Format and send emails with the correct metadata, including:
■ Subject: Use the original subject with the appropriate Re: prefix.
■ To: Populate the recipient’s email address (from or other required
field).
■ Body: Include the message text while appending thread history if
necessary.
3. Email Grouping Instructions
○ Group by Subject Line:
■ Emails with the same subject are treated as part of the same
conversation.
■ Replies (emails with Re: prefixes) should link to their original thread.
○ Sort Chronologically:
■ Within each group, arrange emails by their date field in ascending order
to maintain the conversation flow.
○ Handle Unique Cases:
■ Separate conversations with the same subject but significantly different
created timestamps.
■ Group emails under "No Subject" if the subject field is missing,
ensuring grouping is based on metadata like from.
4. UI/UX Features
○ Display the following for each message:
■ Sender Name (from_name), Email Address (from), Snippet (snippet),
and Date (date).
○ Provide a clear visual distinction between sent and received messages.
○ Show the most recent email updates using the updated field.
5. Sending New Messages
○ When users compose and send a new message:
■ Ensure the backend formats the email metadata accurately:
■ Use the appropriate subject and include Re: prefixes for replies.
■ Populate the to field with the recipient’s email address.
■ Include the conversation context (if required) in the email body.
■ Validate that the backend processes the email and updates the
conversation thread in real-time.
6. Testing and Optimization
○ Ensure the application is performant and responsive across devices.
○ Implement robust error handling for issues like incomplete email metadata or
failed API requests.
Expected Deliverables
● A functional chat-style email interface accessible via a browser.
● Use this Sample data as the initial content.
● Backend APIs integrated with InstantDB to manage email data efficiently.
● Functionality for sending new emails with accurate metadata formatting. ( just add data
to InstantDB [NO need to send emails])
● Clean, maintainable code with proper documentation.
● A hosted project link and a public GitHub repo must be shared and will be taken for
evaluation.
Key Links
1. Sample Data - link.
2. NextJS - link
3. NextUI - link
4. Instant DB - link
