InstaCompanion System Requirements Document

1. Introduction

InstaCompanion is a mobile-first application designed to enhance the shopping experience for Instacart users by facilitating collaboration between two individuals. The app allows users to upload screenshots of shopping lists, which are then processed by AI to create a real-time, interactive checklist. This document outlines the system requirements for InstaCompanion.

2. System Overview

InstaCompanion aims to streamline the shopping process for Instacart users by enabling efficient collaboration between a primary shopper and a companion. The app processes uploaded screenshots to generate a checklist that can be accessed and updated in real-time by both parties. Key features include AI-driven image processing, duplicate detection, and a user-friendly interface for checklist management.

3. Functional Requirements as Story Points

• As a Shopper, I should be able to upload screenshots of my shopping list to the app.
• As a Shopper, I should be able to click "Shopper" on the main page to start the upload process.
• As a Companion, I should be able to view the checklist generated from the uploaded screenshots in real-time.
• As a Companion, I should be able to check off items from the checklist, which will then move to the bottom of the list.
• As a Shopper, I should be able to see updates made by the Companion in real-time.
• As a User, I want the app to detect and remove duplicate items from the checklist.
• As a Shopper, I should be able to reunite with the Companion to scan all items in the Instacart app after shopping.

4. User Personas

• Shopper: The primary user who has an Instacart account and initiates the shopping process.
• Companion: A secondary user who assists the Shopper by managing the checklist and helping with item retrieval.

5. Core User Flows

• Shopper takes screenshots of the shopping list.
• Shopper clicks "Shopper" on the main page and uploads screenshots.
• AI processes screenshots to generate a checklist.
• Companion accesses the checklist in real-time.
• Companion checks off items, which move to the bottom of the list.
• Shopper and Companion reunite to scan items in the Instacart app.

6. Visuals Colors and Theme

• primary: #FF6F61 (a vibrant coral for brand identity)
• primary_light: #FFB3AB (a lighter coral for hover states)
• secondary: #4A90E2 (a calming blue for secondary elements)
• accent: #F5A623 (a bright orange for CTAs and active states)
• highlight: #50E3C2 (a mint green for notifications and active indicators)
• bg: #FFFFFF (a clean white for the background)
• surface: #F7F7F7 (a light grey for cards and panels)
• text: #333333 (a dark grey for primary text)
• text_muted: #888888 (a medium grey for secondary text)
• border: #DDDDDD (a subtle grey for borders)

7. Signature Design Concept

The InstaCompanion app will feature an interactive "Shopping Journey" animation on the landing page. This animation will depict a dynamic shopping cart that fills up with items as the user uploads screenshots. As items are checked off the list, they will visually move from the cart to a "completed" section, creating a sense of progress and accomplishment. This interactive feature will be built using motion/react for smooth transitions and animations. Users can hover over items in the cart to see details, and the cart will animate with a slight bounce effect when items are added or removed.

Landing Hero Motion Brief

The landing page will feature a continuous loop animation of a shopping cart journey. The animation will start with an empty cart, which gradually fills up as screenshots are uploaded. The cart will move along a path, stopping at various "aisles" where items are added. Each item will animate into the cart with a bounce effect, and the cart will slightly tilt as it moves. The animation will loop every 10 seconds, with a pause on the final frame showing a full cart and a "Ready to Shop" message. This will be implemented using motion/react for seamless animations and responsive behavior.

8. Interaction Model & Motion Direction

• Interaction Model: Animated
• The landing page will feature moderate scroll-triggered reveals and hover transitions.
• Interactive elements will have spring physics for a polished feel.
• Internal pages will maintain a static layout for clarity, with minimal motion.

9. Non-Functional Requirements

• The app must be mobile-first, ensuring optimal performance and usability on smartphones.
• Real-time updates must be efficient and responsive to ensure a seamless user experience.
• AI processing of screenshots must be accurate and fast, with a focus on minimizing errors in item detection.

10. Tech Stack

• Frontend: React for Web
• Backend: Python, FastAPI
• Database: MySQL or MariaDB, using alembic for migrations
• AI Models: GPT 5.4 for user-friendly response
• AI Tools: Litellm for LLM Routing
• Local Orchestration: Docker, docker-compose
• Server-side Orchestration: Kubernetes

11. Assumptions and Constraints

• The app assumes users have access to a smartphone with internet connectivity.
• The AI model assumes screenshots are clear and legible for accurate processing.
• The app is constrained by the need to integrate seamlessly with the existing Instacart app for scanning purposes.

12. Glossary

• AI: Artificial Intelligence
• CTA: Call to Action
• Instacart: A grocery delivery and pick-up service
• Shopper: The primary user with an Instacart account
• Companion: The secondary user assisting the Shopper
• Checklist: A list of items generated from uploaded screenshots for shopping assistance