Implement Complete Comment Flow
Overview
This task involves building and integrating the complete comment system for running campaigns, ensuring that the feature works smoothly from both a user experience (UX) and backend synchronization perspective.
The system must be built strictly according to the provided Figma designs and API documentation, while reusing existing components to maintain consistency across the application.
The feature should allow users to:
- Post comments – Users can write and submit comments to the campaign.
- Reply to comments – Users can respond directly to existing comments, with proper nested threading.
- React to comments – Users can like, dislike, or otherwise react to comments instantly.
- Delete comments – Users can remove their own comments with confirmation or undo options.
This system must handle all loading, error, and empty states gracefully, and it should follow the defined color palette, typography, and spacing from the design system.
User Flow
-
Open Comment UI
- Navigate to the Initialize Project flow.
- In Step 2 (Validate Project), locate and click the comment icon to open the comment interface.
- The UI should match the exact layout and styling from the Figma design.
-
Post Comment
- Type a message in the input field.
- The Post button should be disabled if the input is empty or invalid.
- On clicking Post, show a loading state until the comment is successfully saved.
- If posting fails, display an error message without losing the typed content.
-
Delete Comment
- Click the red delete icon next to a comment.
- Show a confirmation prompt or provide an "undo" option.
- After deletion, update the UI immediately (optimistic update) while syncing with the backend.
-
Reply to Comment
- Click the Reply button under a comment to open a nested reply input.
- Post the reply using the same validation, loading, and error states as the main comment flow.
- Replies must display in a threaded, indented format as per the Figma design.
-
React to Comment
- Click a reaction (e.g., like button) to toggle it on/off.
- Reaction counts should update instantly (optimistic update) while syncing with the backend.
- Handle error states by reverting the reaction if syncing fails.
-
Handle Long Lists
- Implement pagination or lazy loading for long comment threads.
- Show an empty state if no comments are available.
- Handle and display any errors that occur when loading more comments.
API
- Use the Project Comments API for all comment-related actions.
- For any missing endpoints, mock the expected behavior in the frontend until backend endpoints are available.
- Ensure all API calls:
- Handle loading and error states.
- Use proper authentication and headers.
- Respect rate limits.
Design Requirements
-
Match Figma exactly:
-
Reuse existing components – Before creating a new component, check if a similar one exists in the project and extend it instead of duplicating.
-
Do not introduce new colors – All colors must come from the predefined theme.
-
Ensure responsiveness – The UI must be functional and visually consistent on all device sizes.
-
Accessibility – Follow accessibility best practices (proper aria labels, keyboard navigation, and contrast).
Development Guidelines
-
Use optimistic updates for posting and reacting to comments to make the UI feel instant.
-
Show clear loading indicators for all asynchronous actions.
-
Display helpful error messages when operations fail.
-
Keep the code modular and reusable – Suggested structure:
Comments – Wrapper for the entire comment section.CommentItem – Displays a single comment, with delete, reply, and react options.ReplyList – Manages nested replies for a comment.
-
Follow the Contribution Guidelines for:
- Naming conventions.
- Commit messages.
- Pull request structure.
⚠️ Warning on AI-Generated UIs
We are not against AI-assisted design, but any AI-generated UI must be thoroughly tweaked to match the Figma designs exactly.
Do not rely on AI output without:
- Adjusting to match spacing, typography, and colors from the design system.
- Ensuring responsive and accessible layout.
- Checking for consistency with existing components.
Failure to follow these steps will result in your work being rejected.
Timeline
- Draft PR: Within 24h of assignment (include screenshots and development notes).
- Final PR: Within 48h of assignment.
Implement Complete Comment Flow
Overview
This task involves building and integrating the complete comment system for running campaigns, ensuring that the feature works smoothly from both a user experience (UX) and backend synchronization perspective.
The system must be built strictly according to the provided Figma designs and API documentation, while reusing existing components to maintain consistency across the application.
The feature should allow users to:
This system must handle all loading, error, and empty states gracefully, and it should follow the defined color palette, typography, and spacing from the design system.
User Flow
Open Comment UI
Post Comment
Delete Comment
Reply to Comment
React to Comment
Handle Long Lists
API
Design Requirements
Match Figma exactly:
Reuse existing components – Before creating a new component, check if a similar one exists in the project and extend it instead of duplicating.
Do not introduce new colors – All colors must come from the predefined theme.
Ensure responsiveness – The UI must be functional and visually consistent on all device sizes.
Accessibility – Follow accessibility best practices (proper aria labels, keyboard navigation, and contrast).
Development Guidelines
Use optimistic updates for posting and reacting to comments to make the UI feel instant.
Show clear loading indicators for all asynchronous actions.
Display helpful error messages when operations fail.
Keep the code modular and reusable – Suggested structure:
Comments– Wrapper for the entire comment section.CommentItem– Displays a single comment, with delete, reply, and react options.ReplyList– Manages nested replies for a comment.Follow the Contribution Guidelines for:
We are not against AI-assisted design, but any AI-generated UI must be thoroughly tweaked to match the Figma designs exactly.
Do not rely on AI output without:
Failure to follow these steps will result in your work being rejected.
Timeline