Scribd
Upload
17 views3 pages

Full Stack Developer Task Description

The task involves developing a chat-style email interface using Next.js, NextUI, and InstantDB, focusing on grouping email conversations and enabling seamless new email composition. Key features include a responsive chat interface, backend data handling for email grouping and sending, and robust UI/UX elements for clarity. Deliverables include a functional interface, integrated backend APIs, and a well-documented codebase hosted on GitHub.

Uploaded by

afrith
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
17 views3 pages

Full Stack Developer Task Description

The task involves developing a chat-style email interface using Next.js, NextUI, and InstantDB, focusing on grouping email conversations and enabling seamless new email composition. Key features include a responsive chat interface, backend data handling for email grouping and sending, and robust UI/UX elements for clarity. Deliverables include a functional interface, integrated backend APIs, and a well-documented codebase hosted on GitHub.

Uploaded by

afrith
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 3

Full Stack Developer Task Description

Objective:
Develop a chat-style email interface using Next.js, 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 Next.js 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

You might also like