Specif-ai MCP Server

{ "features": [ { "id": "US1", "name": "Engage with videos through likes and dislikes", "description": "Ability to like or dislike videos. In order to express opinions on video content. As a viewer, I want to like or dislike videos to show my feedback. Acceptance Criteria: The interface must display clearly distinguishable 'Like' and 'Dislike' buttons below the video player. Button icons should visibly change to indicate an active like or dislike. Only one of the actions (like or dislike) can be selected at a time, toggling between them as needed. The engagement data should be updated in real-time on both the UI and database. If the user is not authenticated, clicking either button should prompt a login flow. Any server or connection errors should display appropriate error notification messages without losing existing UI state.", "tasks": [ { "list": "Add 'Like' and 'Dislike' buttons in Angular component", "acceptance": "Introduce clearly distinguishable 'Like' and 'Dislike' buttons in the Angular video player component. Buttons must be positioned below the video player as specified in the user story. Acceptance Criteria: The video player component must display both buttons. The buttons must be clearly distinguishable to the user.", "id": "TASK1" }, { "list": "Implement active state toggle for 'Like' and 'Dislike' buttons in Angular", "acceptance": "Button icons must visibly change to indicate an active state when a like or dislike is selected. Ensure that only one button can be active (like or dislike) at a time by toggling the state. Acceptance Criteria: When a button is clicked, its active state should be visually distinguished, and the other button should automatically become inactive.", "id": "TASK2" }, { "list": "Integrate real-time UI update for engagement actions", "acceptance": "Implement Angular service to immediately update the UI state when a like or dislike action is performed by the user. Acceptance Criteria: Changes to likes or dislikes must be reflected in the UI in real time without requiring a refresh.", "id": "TASK3" }, { "list": "Create backend API for updating likes/dislikes in Rust", "acceptance": "Develop a Rust API endpoint to receive user engagement actions (like/dislike toggles) and update the database accordingly. The endpoint should ensure only one value (like or dislike) can be active for a given user and video combination. Acceptance Criteria: API should accept valid input for user ID, video ID, and action type ('like' or 'dislike'). Actions should persist in the database and conform to the toggling behavior rules specified in the user story.", "id": "TASK4" }, { "list": "Implement real-time database syncing for Rust 'engagement' API", "acceptance": "Ensure that the engagement data (like or dislike) is synchronized with the GCP-hosted database in real time. Acceptance Criteria: Successfully persisting the user's engagement action to the database immediately after calling the API.", "id": "TASK5" }, { "list": "Integrate 'engagement' API with Angular component", "acceptance": "Use Angular HTTP client to allow the frontend component to interact with the engagement API to update like or dislike actions. Acceptance Criteria: Clicking the like or dislike button in the UI should trigger an API call, and the response should update the UI component state accordingly.", "id": "TASK6" }, { "list": "Prompt login flow for unauthenticated users", "acceptance": "In the Angular component handling the like/dislike buttons, implement checks for user authentication. If the user is not authenticated, clicking either button should trigger a login prompt. Acceptance Criteria: Clicking 'Like' or 'Dislike' as an unauthenticated user must display the login flow modal.", "id": "TASK7" }, { "list": "Handle server or connection errors in Angular UI", "acceptance": "Add error handling logic to display appropriate error messages without losing the existing UI state when server or connection errors occur. Acceptance Criteria: If the API call fails due to a server or network issue, a notification message should display on the UI, and the current button state should remain unchanged.", "id": "TASK8" }, { "list": "Test API endpoint for like/dislike behavior", "acceptance": "Write unit and integration tests for the Rust API to ensure correct toggling of like and dislike, validation of inputs, and failure scenarios (e.g., invalid user ID, video ID, or action). Acceptance Criteria: All tests should pass, covering successful updates, input validation, and proper error handling.", "id": "TASK9" }, { "list": "Test Angular UI component for like/dislike behavior", "acceptance": "Write unit tests for the Angular video player component to verify accurate rendering of button states, interaction flows (toggle behavior), and real-time UI updates. Acceptance Criteria: All tests should pass, covering active button toggling, API interaction, and error message display for failure scenarios.", "id": "TASK10" } ] }, { "id": "US2", "name": "Facilitate commenting functionality on videos", "description": "Ability to post and read comments on videos. In order to interact with creators or other viewers. As a viewer, I want to comment on videos and see existing comments. Acceptance Criteria: Below the video, a 'Comment' section must include a text box for new comments along with a list of existing comments displaying timestamps, usernames, and a maximum character limit per comment. Users should be able to post validated and sanitized comments by clicking a 'Post' button. Logged-out users attempting to comment should be prompted to log in. Spam or offensive comments must be flagged and handled per moderation guidelines. Comments should update in real-time upon submission. If a comment fails to post, the user should receive a clear error message without losing their typed input.", "tasks": [ { "list": "Create backend API to post a new comment", "acceptance": "Implement an API endpoint in Rust to allow posting a new comment. The endpoint must validate inputs (e.g., username, video ID, comment body) and sanitize the comment text to prevent XSS or other vulnerabilities. If validation fails, respond with an appropriate error message. Ensure a maximum character limit is applied to the comment body. Save valid comments to the database with the associated video ID, username, and timestamp. Acceptance Criteria: New comments must be saved if valid, and an appropriate error message must be returned for invalid comments. Inputs must be sanitized before saving to the database.", "id": "TASK1" }, { "list": "Create backend API to fetch comments for a video", "acceptance": "Implement an API endpoint in Rust to retrieve a list of comments for a given video ID, ordered by timestamp (newest first). Limit the number of comments returned per request (e.g., pagination). Ensure response includes username, comment body, and timestamp. Acceptance Criteria: Users can fetch comments for a video by video ID, with proper pagination. Response must include only valid and sanitized data.", "id": "TASK2" }, { "list": "Add logic in backend to handle user login state for commenting", "acceptance": "Add backend middleware in Rust to check if a user is logged in when attempting to post a comment. If a user is not logged in, return an error response prompting the user to log in. Acceptance Criteria: Ensure only logged-in users can post comments. Logged-out users attempting to post comments receive a clear error response.", "id": "TASK3" }, { "list": "Implement offensive and spam comment detection logic", "acceptance": "Integrate a content moderation system or library into the backend to flag spam or offensive comments. This logic must execute before saving a new comment to the database. Response should indicate if a comment is flagged, and flagged comments should not be saved. Acceptance Criteria: Offensive or spam comments are detected and flagged, preventing them from being saved. The system must provide a reasonable detection mechanism with appropriate error messaging.", "id": "TASK4" }, { "list": "Build real-time comments broadcasting using GCP Pub/Sub", "acceptance": "Set up a GCP Pub/Sub topic to handle comment updates. Publish new comments to this topic after they're saved to the database. Implement a subscriber to push real-time comment updates to the frontend via WebSocket or HTTP/2. Acceptance Criteria: Newly posted comments must appear in real-time on the frontend for all users viewing the video.", "id": "TASK5" }, { "list": "Design Angular UI for comments section", "acceptance": "Create a 'Comments' section below the video in the Angular frontend. Include a text box for typing new comments, a 'Post' button, and a list of existing comments displaying timestamp, username, and comment text. The text box must enforce the defined character limit and prevent empty comments from being submitted. Acceptance Criteria: UI elements (text box, Post button, comment list) must be implemented and functional. The text box must validate and enforce character limits before submission.", "id": "TASK6" }, { "list": "Connect frontend to post comments via backend API", "acceptance": "Use Angular to send new comments to the backend 'post comment' API when the 'Post' button is clicked. Ensure the UI handles validation errors (e.g., character limit exceeded) or backend failures (e.g., user not logged in) gracefully and displays corresponding error messages. Acceptance Criteria: Users must be able to post comments with proper validation and error handling via the UI. For failed submissions, user input must remain in the text box with error messages displayed.", "id": "TASK7" }, { "list": "Connect frontend to fetch and display comments via backend API", "acceptance": "Use Angular to retrieve the list of existing comments for a video using the 'fetch comments' API. Display the comments in the Comments section with pagination support. Ensure comments are shown with proper formatting, including the username, timestamp, and text. Acceptance Criteria: Existing comments must be displayed in the Comments section, properly formatted, and support paginated loading.", "id": "TASK8" }, { "list": "Implement real-time comment updates in the Angular frontend", "acceptance": "Integrate the frontend with the GCP Pub/Sub real-time updates system using WebSocket or another supported mechanism. Ensure that new comments submitted by any user are reflected in real-time for all users viewing the same video. Acceptance Criteria: The Comments section must update in real-time when new comments are posted by any user.", "id": "TASK9" }, { "list": "Display error messages for failed comment submissions", "acceptance": "Ensure that when a comment fails to post (e.g., server error, user not logged in), an appropriate error message is displayed on the frontend. User's input should remain intact in the text box for retry. Acceptance Criteria: Clear error messages are shown for failed comment posting without clearing user's input.", "id": "TASK10" } ] }, { "id": "US3", "name": "Enable video sharing via social platforms and direct links", "description": "Ability to share video content. In order to distribute content with others. As a viewer, I want easy options to share videos on social media or via direct links. Acceptance Criteria: A 'Share' button must be visible below the video player, with a dropdown menu providing platform-specific options (e.g., Facebook, Twitter) and a 'Copy Link' option. Selecting a social platform should open the respective platform's sharing dialog pre-filled with the video link. Clicking 'Copy Link' should copy the link to the clipboard and display a confirmation toast. If the clipboard copy fails, an error message should inform the user. Shared content must link recipients to the exact video page.", "tasks": [ { "list": "Add 'Share' button below the video player", "acceptance": "Create a 'Share' button as a UI component below the video player within the Angular template. The button must trigger a dropdown menu when clicked. Acceptance Criteria: The 'Share' button must be visible only below the video player. Clicking the button should display a dropdown menu with platform-specific options (e.g., Facebook, Twitter) and a 'Copy Link' option.", "id": "TASK1" }, { "list": "Implement dropdown menu for social platform and copy link functionality", "acceptance": "Define a dropdown menu component within Angular. Map the items in the dropdown menu to the following options: 'Facebook', 'Twitter', and 'Copy Link'. Bind click events for each menu option to their respective handlers. Acceptance Criteria: Dropdown menu must open upon clicking the 'Share' button. It must display the options ['Facebook', 'Twitter', 'Copy Link'] in a readable format.", "id": "TASK2" }, { "list": "Integrate Facebook and Twitter sharing dialogs with pre-filled video link", "acceptance": "Implement handlers for the Facebook and Twitter dropdown menu options. Use Angular to open the respective sharing dialogs (via URL) with the video URL pre-filled as a parameter. Acceptance Criteria: Clicking 'Facebook' should open Facebook’s sharing dialog with the video URL pre-filled. Clicking 'Twitter' should open Twitter’s sharing dialog with the video URL pre-filled. Sharing links should direct recipients to the correct video page.", "id": "TASK3" }, { "list": "Implement 'Copy Link' functionality", "acceptance": "Define a handler for the 'Copy Link' menu option that copies the video URL to the user's clipboard using the Angular Clipboard API. Acceptance Criteria: Clicking 'Copy Link' should copy the video URL to the clipboard. Display a toast notification confirming 'Link copied to clipboard' if successful. If clipboard copying fails, display an error message stating 'Unable to copy link.' The copied link must always point to the exact video page.", "id": "TASK4" }, { "list": "Configure video URL pattern for sharing", "acceptance": "Ensure the video URL generated for sharing follows a standard pattern (e.g., 'https://domain.com/video/:videoId'). Accept both Angular route and backend validation (using Rust) for this URL format. Acceptance Criteria: The shared link (for both social media and 'Copy Link') must follow 'https://domain.com/video/:videoId' and direct recipients to the exact video page.", "id": "TASK5" }, { "list": "Render confirmation toast notifications for 'Copy Link' actions", "acceptance": "Create an Angular toast component to display clear notifications for 'Copy Link' actions. Handle visibility timing and position. Acceptance Criteria: Display 'Link copied to clipboard' success toast upon successful copy. Display 'Unable to copy link' error toast if the copy action fails.", "id": "TASK6" }, { "list": "Handle error messages when clipboard interaction fails", "acceptance": "Add error handling logic for the clipboard interaction when 'Copy Link' is selected. Ensure the UI properly displays the error toast when a failure occurs. Acceptance Criteria: When clipboard interaction fails, an error toast must be displayed stating 'Unable to copy link'. The error must not crash the application.", "id": "TASK7" } ] }, { "id": "US4", "name": "Unified interface for video engagement and sharing functionality", "description": "Ability to consolidate all engagement interactions under a single action bar. In order to provide a streamlined user interface for video interactions. As a viewer, I want an organized and accessible layout for likes, dislikes, comments, and sharing options. Acceptance Criteria: An action bar below the video player must include icons for 'Like,' 'Dislike,' 'Comment,' and 'Share' arranged consistently for desktop and mobile views. Hovering or tapping on an icon should display its label clearly (e.g., 'Share'). The elements must scale responsively to smaller screen sizes. Errors occurring in any action should offer independent feedback without disrupting the other functions in the bar.", "tasks": [ { "list": "Create a responsive ActionBar component in Angular", "acceptance": "Develop an Angular component named 'ActionBar' to be placed below the video player. Ensure it includes placeholders for icons ('Like', 'Dislike', 'Comment', and 'Share') following the consistent layout for desktop and mobile views. Acceptance Criteria: The component should render icons in a responsive layout that adjusts to various screen sizes.", "id": "TASK1" }, { "list": "Implement individual icons in the ActionBar component", "acceptance": "Add SVG or Material Design icons for 'Like', 'Dislike', 'Comment', and 'Share' within the ActionBar component. Provide consistent spacing between icons for desktop and mobile views. Acceptance Criteria: Icons should render in the provided order, spaced evenly, with scaling verified on different screen sizes.", "id": "TASK2" }, { "list": "Add hover and tap functionality to display icon labels", "acceptance": "Implement hover (for desktop) and tap (for mobile) functionality to display labels ('Like', 'Dislike', 'Comment', 'Share') for each icon in the ActionBar. Use Angular's event binding to trigger label visibility. Acceptance Criteria: Labels should appear directly below the icons and be clearly visible both on hover (desktop) and tap (mobile), disappearing when the event ends.", "id": "TASK3" }, { "list": "Create error feedback mechanism for ActionBar actions", "acceptance": "Develop independent feedback mechanisms in the ActionBar component for errors encountered by specific actions. Ensure errors are non-blocking and do not disrupt other actions. Use Angular's service paradigm for state management. Acceptance Criteria: Errors for each icon's action should display relevant error messages that reset once the user resolves them, without impacting other actions in the ActionBar.", "id": "TASK4" }, { "list": "Write tests for ActionBar UI and functionality", "acceptance": "Develop unit tests using Angular's testing framework to verify ActionBar functionality. Test the responsive layout, icon rendering, hover and tap label display, scaling behavior, and error feedback mechanism. Acceptance Criteria: All tests should pass, including validations for mobile responsiveness, label display interactions, and independent error handling correctness.", "id": "TASK5" } ] }, { "id": "US5", "name": "Provide real-time updates on user engagement metrics", "description": "Ability to reflect real-time engagement statistics for likes, dislikes, and comments. In order to display the most current interaction data. As a viewer, I want engagement counts to update dynamically without a page refresh. Acceptance Criteria: Totals for likes, dislikes, and comments should update instantly beneath the video player as interactions occur. Metrics should reflect accurate numbers even after temporary connection issues are resolved. Newly posted comments should appear immediately in the comment list. For failed actions (e.g., network errors), the system should retry updating numbers and notify users of the delay without breaking the UI.", "tasks": [ { "list": "Implement backend API endpoint to fetch engagement metrics", "acceptance": "Develop a Rust-based endpoint to retrieve real-time engagement metrics (likes, dislikes, comments) from the datastore. Acceptance Criteria: The endpoint must return engagement counts for likes, dislikes, and comments as JSON. The endpoint must handle temporary network issues with retries and return error codes if persistence fails. Response times should not exceed 100ms.", "id": "TASK1" }, { "list": "Implement backend API endpoint to update engagement metrics", "acceptance": "Develop a Rust-based endpoint to increment/decrement likes, dislikes, and add comments to the datastore. Acceptance Criteria: The API must handle likes, dislikes, and comments as separate input types and update the corresponding entry in the datastore atomically. The endpoint must include validation for required fields and retry logic in case of network errors. Success responses must return the updated totals.", "id": "TASK2" }, { "list": "Develop real-time push notification service for engagement updates", "acceptance": "Use GCP Pub/Sub to push real-time updates to the Angular frontend when engagement metrics are updated. Acceptance Criteria: Implement a Pub/Sub topic to notify subscribers of changes to metrics. Messages must contain the resource ID, updated counts for likes, dislikes, and comments, and a timestamp. Ensure deduplication and delivery within 1 second.", "id": "TASK3" }, { "list": "Create a dynamic UI component to display engagement metrics", "acceptance": "Develop an Angular component below the video player to display likes, dislikes, and comments. Acceptance Criteria: The component must retrieve data from the backend API upon initialization and display current counts. It should dynamically update based on real-time Pub/Sub messages. Display state changes (e.g., retries) without breaking the UI.", "id": "TASK4" }, { "list": "Implement retry mechanism for failed updates in the frontend", "acceptance": "In the Angular application, implement a retry logic to handle failed interactions (e.g., like/dislike/comment submissions). Acceptance Criteria: For failed actions due to network errors, retry up to 3 times with exponential backoff. Notify the user with a non-blocking message about delays or failures. Ensure the UI state remains consistent during retry attempts.", "id": "TASK5" }, { "list": "Add comment submission functionality with real-time updates", "acceptance": "Develop a UI form in Angular for users to submit comments. Acceptance Criteria: On submission, the form must call the backend update API and append the new comment to the list if the call succeeds. Newly posted comments should appear immediately at the top when successful or retry on failure. Notify users of retries or failures while keeping the UI interactive.", "id": "TASK6" }, { "list": "Build synchronization logic for metrics after connection recovery", "acceptance": "In the Angular application, implement synchronization logic to reconcile engagement metrics after temporary connection loss. Acceptance Criteria: On reconnect, fetch the latest metric counts from the backend and reconcile with any unsynced updates. Ensure accuracy of displayed numbers and persist any pending updates to the backend.", "id": "TASK7" }, { "list": "Integrate ID-based filtering for engagement updates", "acceptance": "Ensure engagement updates are handled only for the current resource (video) displayed to the user. Acceptance Criteria: Backend messages published to GCP Pub/Sub must contain a video ID, and the Angular app must filter incoming updates based on this ID before modifying the UI. Ignore updates for other resources.", "id": "TASK8" } ] } ] }