System Requirements Document for project-f0c97df3

Introduction

This document outlines the system requirements for project-f0c97df3, an AI-visibility tracker named CiteTrack. The project aims to monitor AEO/GEO visibility using AI technologies. This SRD will guide the development process by detailing the functional and non-functional requirements, user personas, core user flows, and design concepts.

System Overview

CiteTrack is designed to track and enhance the visibility of businesses through AI-driven monitoring tools. The system will utilize Next.js for the frontend, Convex for the backend and database, and integrate with Clerk for authentication, Dodo Payments for billing, and Resend for email services. The AI capabilities will initially leverage OpenAI and Anthropic, with future plans to include Gemini and Perplexity.

Source Content Inventory

• 01-PRD.md: Defines the problem, scope, and MVP boundaries.
• 08-Source-Code-Overview.md: Details the stack and folder structure.
• 09-Database-Schema.md: Provides the Convex schema.
• 10-API-Documentation.md: Outlines internal and external API contracts.
• 02-User-Stories.md: Describes user flows to support.

Functional Requirements as Story Points

• As a Developer, I should be able to initialize a Next.js app with the specified folder structure.
• As a Developer, I should set up Convex and implement the schema as defined in the documentation.
• As a User, I should be able to sign up and sign in using Clerk authentication.
• As a User, I should be able to complete an onboarding form with a business name, description, and up to 5 questions.
• As a Developer, I should implement businesses.create and questions.addBatch mutations according to the API documentation.
• As a Developer, I should stub out the scans.runScan action to loop questions through OpenAI and Anthropic.
• As a Developer, I should implement scoring.detectMention to handle suffix variations and avoid false positives.
• As a User, I should be able to view a results table showing mention status per question and model.

User Personas

• Developer: Responsible for setting up and maintaining the system infrastructure and implementing new features.
• User: A business owner or representative using the platform to track and enhance their business visibility.

Core User Flows

• Developer initializes the Next.js app -> Sets up Convex schema -> Implements Clerk authentication -> Builds onboarding form -> Implements API mutations.
• User signs up -> Completes onboarding form -> Submits questions -> Views results table.

Visuals Colors and Theme

• primary: #1A73E8 (a deep blue for brand identity)
• primary_light: #E8F0FE (a light blue for hover states)
• secondary: #FF6F61 (a coral hue for emphasis)
• accent: #FFD700 (a vibrant gold for CTAs)
• highlight: #FFA500 (an orange for notifications)
• bg: #FFFFFF (white for the page background)
• surface: rgba(240, 240, 240, 0.8) (light grey for card backgrounds)
• text: #202124 (dark grey for primary text)
• text_muted: #5F6368 (light grey for secondary text)
• border: rgba(218, 220, 224, 0.2) (subtle grey for borders)

Signature Design Concept

Interactive AI Monitoring Dashboard

The homepage will feature an interactive AI monitoring dashboard that visualizes real-time data. Users can drag and drop elements to customize their view, with animations highlighting changes in visibility metrics. The dashboard will use motion/react for smooth transitions and interactions, creating an engaging user experience.

Landing Hero Motion Brief

The landing page will feature a dynamic animation where a business logo enters the scene, interacts with AI elements (represented as animated gears), and transforms into a visibility score. This loop will last 10 seconds, using motion/react for seamless transitions. The animation will be responsive, adapting to different screen sizes while maintaining clarity.

Interaction Model & Motion Direction

• Interaction Model: Animated
• The landing page will feature moderate scroll-triggered reveals and hover transitions, enhancing user engagement without overwhelming them.

Non-Functional Requirements

• The system must be scalable to accommodate future integrations with Gemini and Perplexity.
• Ensure data security and privacy, particularly in handling user authentication and business data.

Tech Stack

• Frontend: Next.js on Vercel
• Backend/Database: Convex
• Authentication: Clerk
• Billing: Dodo Payments
• Email: Resend
• AI Providers: OpenAI, Anthropic

Assumptions and Constraints

• The system will initially support only OpenAI and Anthropic for AI capabilities.
• Future integrations with Gemini and Perplexity are planned but not included in the current scope.

Glossary

• AEO/GEO: AI-Enhanced Optimization/Geo-Enhanced Optimization
• Convex: A backend-as-a-service platform used for database management.
• Clerk: An authentication service for user management.
• Dodo Payments: A payment processing service.
• Resend: An email service provider.