As a developer, I need to create a user model to store user information such as email, username, and password securely.
As a frontend developer, implement the Navbar section for the Landing page. This section provides a shared navigation shell with a brand logo, home link, and a responsive hamburger menu. The logo should animate its SVG path on page load using motion/react's strokeDashoffset animation. The hamburger menu should slide in from the right on mobile with a spring ease. Ensure the navbar height is fixed at 64px for desktop and 56px for mobile, with a z-index of 50. Acceptance criteria: The Navbar must render exactly once on the Landing page, displaying the brand logo and navigation links ('Home', 'Main', 'Checklist', 'Reunite', 'Upload'). The logo must animate on load, and the hamburger menu must toggle visibility on click. The design must adhere to the provided CSS, maintaining the specified layout and animations. No backend integration is required for this section.
Page access: shared by all personas (Companion, Shopper). This is verification context and does not request role-specific implementation.
As a frontend developer, implement the Footer section for the Landing page. This section provides a shared project footer shell that includes brand continuity, project links, and legal content. The footer should use the motion library for animated link underline reveals. Links should display with an underline that expands from left to right on hover, maintaining a muted text color until hovered, at which point they brighten to the primary text color. The footer should have a background color of #F7F7F7, a border-top of 1px solid #DDDDDD, and padding of 40px 20px. The text should be centered. Ensure the footer height is minimal (~120px) to avoid excessive page scroll length. The component may already exist from a previous page implementation. Acceptance criteria: The Footer component must render exactly once on the Landing page; it must include the brand 'InstaCompanion', project links (Home, Main, Checklist, Reunite, Upload), and legal content; the design structure/theme must match the provided CSS and JSX; no backend integration is required; the page is shared by all personas (Companion, Shopper).
Page access: shared by all personas (Companion, Shopper). This is verification context and does not request role-specific implementation.
As a frontend developer, implement the MainFeatureHighlight section to showcase key InstaCompanion features that differentiate the app. This section should present features such as real-time collaboration, duplicate detection, and seamless checklist management as a vertical card stack or text-based feature list with icons. Emphasize the Shopper-Companion collaboration model and core benefits. Ensure mobile responsiveness by stacking features vertically. Acceptance criteria:
- The Main page must render the MainFeatureHighlight component exactly once.
- The section must display a feature headline and three feature cards with icons and descriptions.
- Ensure the section is responsive and maintains the design structure and theme as per the provided CSS.
- The section must be static with no interactive state and accessible to both Companion and Shopper personas.
Page access: shared by all personas (Companion, Shopper). This is verification context and does not request role-specific implementation.
As a frontend developer, implement the ReuniteActions section to manage the reunion workflow state and initiate Instacart scanning. This section should include a status badge indicating whether the Companion has confirmed readiness, a primary 'Start Scanning in Instacart' button to launch the external scan, and secondary messaging if waiting for Companion confirmation. The component must manage the reunion_workflow state, allowing the user to confirm the Companion's readiness and initiate the scan. The section should handle state transitions and display appropriate messages based on the Companion's readiness and scan initiation status. Acceptance criteria: The ReuniteActions component must render exactly once on the Reunite page; it must display the status badge, waiting message, and scan initiation button; the design must match the provided CSS styles; the component must manage state transitions correctly and be accessible to both Shopper and Companion personas.
Page access: shared by all personas (Companion, Shopper). This is verification context and does not request role-specific implementation.
As a developer, I need to create a checklist model to store items, their status, and associated user information.
Depends on:#1
Waiting for dependencies
As a developer, I need to implement API authentication using JWT to secure user access.
Depends on:#1
Waiting for dependencies
As a developer, I need to implement Role-Based Access Control to manage permissions for Shopper and Companion roles.
Depends on:#1
Waiting for dependencies
As a frontend developer, implement the LandingHeroAnimation section for the Landing page. This section features a full-width animation of a shopping cart journey using motion/react. The cart should move along a path, stopping at aisles, with items bouncing into the cart. The animation loops every 10 seconds, pausing on a full cart with a 'Ready to Shop' message. Acceptance criteria: The LandingHeroAnimation must render exactly once on the Landing page, displaying the animated cart journey. The animation must loop continuously, with items animating into the cart and the cart tilting dynamically. The design must adhere to the provided CSS, maintaining the specified layout and animations. No backend integration is required for this section.
Page access: shared by all personas (Companion, Shopper). This is verification context and does not request role-specific implementation.
Depends on:#7
Waiting for dependencies
As a frontend developer, implement the LandingHeroText section for the Landing page. This section provides text accompaniment to the shopping journey animation, with a headline and subheadline that reveal on scroll. Acceptance criteria: The LandingHeroText must render exactly once on the Landing page, displaying the headline and subheadline with scroll-triggered animations. The text must appear below or alongside the animation, depending on the viewport. The design must adhere to the provided CSS, maintaining the specified layout and animations. No backend integration is required for this section.
Page access: shared by all personas (Companion, Shopper). This is verification context and does not request role-specific implementation.
Depends on:#7
Waiting for dependencies
As a frontend developer, implement the LandingFeatures section for the Landing page. This section highlights three core InstaCompanion capabilities with feature cards. Each card includes an icon, headline, and description, with hover animations. Acceptance criteria: The LandingFeatures must render exactly once on the Landing page, displaying three feature cards with icons, headlines, and descriptions. The cards must animate on hover, with icons rotating and backgrounds brightening. The design must adhere to the provided CSS, maintaining the specified layout and animations. No backend integration is required for this section.
Page access: shared by all personas (Companion, Shopper). This is verification context and does not request role-specific implementation.
Depends on:#7
Waiting for dependencies
As a frontend developer, implement the LandingCTA section for the Landing page. This section includes two primary buttons for role selection: 'I'm the Shopper' and 'I'm the Companion'. Clicking these buttons navigates to the Main page with role-specific query parameters. Acceptance criteria: The LandingCTA must render exactly once on the Landing page, displaying two buttons with hover and click animations. Clicking a button must navigate to /main with the appropriate role query parameter. The design must adhere to the provided CSS, maintaining the specified layout and animations. No backend integration is required for this section.
Page access: shared by all personas (Companion, Shopper). This is verification context and does not request role-specific implementation.
Depends on:#7
Waiting for dependencies
As a frontend developer, implement the UploadGuide section to provide users with tips for successful uploads. This section should include tips on screenshot requirements, supported file formats, and the post-upload process. Acceptance criteria: The Upload page must render the UploadGuide section exactly once when accessed by a Shopper. The section must display a heading and a series of tips with icons, titles, and descriptions. The design must match the provided CSS styles, ensuring responsive behavior across devices. No backend integration is required for this static informational section.
Page access: Shopper only. Verify the existing restricted-access contract; change authentication or RBAC only in a task that explicitly owns it.
Depends on:#1
Waiting for dependencies
As a developer, I need to create an API endpoint for uploading screenshots, which will be processed by AI to generate a checklist.
Depends on:#1#3#2
Waiting for dependencies
As a developer, I need to create an API endpoint to provide real-time updates to the checklist for both Shopper and Companion.
Depends on:#2#3#1
Waiting for dependencies
As a frontend developer, implement the MainHeroRoles section to enable users to select their role and navigate to the appropriate workflow. This section includes two primary CTAs: one for the Shopper to upload screenshots and another for the Companion to view the checklist. Implement animated buttons with hover transitions and visual feedback to guide users through role selection. Capture role selection state and provide animated confirmation feedback using spring physics. Ensure role-based navigation routing to the Upload or Checklist page based on the selected role. The section should be accessible to both Companion and Shopper personas, with the Shopper role routing exclusively to the Upload page. Acceptance criteria:
- The Main page must render the MainHeroRoles component exactly once.
- The section must display a hero headline, role description text, and two CTA buttons with icons.
- Implement hover states on role buttons with color transitions and animated confirmation messages.
- Ensure navigation routing to '/Upload' for Shopper and '/Checklist' for Companion upon role confirmation.
- The section must adhere to the design structure and theme as per the provided CSS.
- The section must respect shared access for both personas, with conditional routing for Shopper.
- Dependencies: Implement Navbar for Landing Page (9ad31f86-439c-4de8-9e57-be941e027efc).
Page access: shared by all personas (Companion, Shopper). This is verification context and does not request role-specific implementation.
Depends on:#5#4#7
Waiting for dependencies
As a frontend developer, implement the UploadForm section to manage the core upload interaction. This includes a drag-and-drop zone, file input button, file preview list with removable items, and a primary upload button. The section must handle file validation, display inline errors, and show real-time upload progress. Acceptance criteria: The Upload page must render the UploadForm section exactly once when accessed by a Shopper. The section must support drag-and-drop and file picker interactions, validate file types and sizes, and display a progress bar during uploads. The design must match the provided CSS styles, ensuring responsive behavior across devices. The section must integrate with the 'API for Uploading Screenshots' and handle backend responses appropriately.
Page access: Shopper only. Verify the existing restricted-access contract; change authentication or RBAC only in a task that explicitly owns it.
Depends on:#1#4
Waiting for dependencies
As a frontend developer, implement the ChecklistItemsContainer section for the Checklist page. This section manages the active and completed item lists, displaying unchecked items with details such as name, category, and quantity. It should handle real-time updates and animations for item transitions between active and completed states. The section must include a progress bar, category breakdown, and a CTA button for 'Ready to Reunite'. Acceptance criteria: The ChecklistItemsContainer component must render exactly once on the Checklist page. It should manage checklist item state using React hooks and display real-time updates. The design must match the provided CSS, including responsive adjustments. The component requires backend integration for real-time updates and checklist state management. Access is shared between Companion and Shopper personas.
Page access: shared by all personas (Companion, Shopper). This is verification context and does not request role-specific implementation.
Depends on:#2#5
Waiting for dependencies
As a frontend developer, implement the UploadHeader section to display the page title, confirm the Shopper role, and explain the upload purpose. This section should render a heading 'Upload', a badge indicating 'Shopper', and a description explaining the conversion of Instacart shopping list screenshots into a real-time collaborative checklist. Acceptance criteria: The Upload page must render the UploadHeader section exactly once when accessed by a Shopper. The section must include a 'Shopper' badge, a heading 'Upload', and a descriptive paragraph. The design must match the provided CSS styles, ensuring responsive behavior across devices. No backend integration is required for this static section.
Page access: Shopper only. Verify the existing restricted-access contract; change authentication or RBAC only in a task that explicitly owns it.
Depends on:#13#1
Waiting for dependencies
As a frontend developer, implement the ChecklistHeader section for the Checklist page. This section should display the 'Shopping Checklist' heading, indicate whether the user is a Shopper or Companion, and show the real-time sync status with a visual badge. The header should animate into view using a fade-in effect. Ensure the role and connection status are dynamically displayed based on the current user context. Acceptance criteria: The ChecklistHeader component must render exactly once on the Checklist page. It should include a title, role indicator, and sync status badge. The design must match the provided CSS, including responsive adjustments. The component should not require backend integration as it displays static content. Access is shared between Companion and Shopper personas.
Page access: shared by all personas (Companion, Shopper). This is verification context and does not request role-specific implementation.
Depends on:#15#13
Waiting for dependencies
As a frontend developer, implement the ReuniteSummary section to display the completed checklist in its final form. This section should show all items that were checked off during the shopping session, organized in a dense, scannable vertical list. Each item must include its title and a completion indicator. The section should also display a milestone message ('You're ready to reunite!') and summarize the shopping session status, including the total items and completion status. The component should use the provided CHECKLIST_ITEMS array to render the list and ensure that the values are immutable and read-only. The section must support quick visual scanning of all items before the Instacart handoff, and allow both Shopper and Companion to verify the final list. Acceptance criteria: The ReuniteSummary component must render exactly once on the Reunite page; it must display the page title, status message, and a list of items with completion checkmarks; the design must match the provided CSS styles; the component must not allow item editing or removal; the section must be accessible to both Shopper and Companion personas.
Page access: shared by all personas (Companion, Shopper). This is verification context and does not request role-specific implementation.
Depends on:#18#5
Waiting for dependencies
No comments yet. Be the first!