Skip to Content
📚 MyStoryFlow Docs — Your guide to preserving family stories
Technical DocumentationTools InfrastructureTools Infrastructure Architecture Overview

Tools Infrastructure Architecture Overview

🏗️ System Design Philosophy

MyStoryFlow’s tools infrastructure represents a paradigm shift in AI-powered content generation platforms. Our architecture prioritizes maximum code reuse, minimal per-tool maintenance, and infinite scalability through a revolutionary standardized approach.

Core Principles

  • Universal Template System: Every tool follows identical patterns for 95%+ code reuse
  • Infrastructure-as-Code: Database schemas, API routes, and components are generated from templates
  • SEO-First Architecture: Built-in optimization for search engine visibility and organic growth
  • Session-First Design: Seamless experience for anonymous users with optional account integration
  • AI-Native Integration: Every tool leverages AI with comprehensive usage tracking and cost optimization

🎯 Architecture Goals

Primary Objectives

  • Rapid Tool Development: New tools created in hours, not days
  • Zero Maintenance Overhead: Updates cascade across all tools automatically
  • Infinite Scalability: Support for 100+ specialized tools without architectural changes
  • Consistent User Experience: Identical workflows and interactions across all tools
  • Revenue Optimization: Built-in conversion tracking and optimization

Technical Excellence

  • Sub-second Performance: Less than 1s page loads, less than 8s AI generation times
  • SEO Dominance: Structured data, meta optimization, sitemap generation
  • Security-First: Rate limiting, content validation, privacy protection
  • Analytics Integration: Comprehensive tracking and business intelligence

🔄 System Component Interaction

User Request Rate Limiter → Session validation, bot protection Tool Generator → Form processing, validation AI Service → OpenAI integration, content generation Admin Tracker → Usage logging, cost tracking Content Persistence → Database storage, share codes Share System → Public URLs, social sharing SEO Optimization → Meta tags, structured data Response Writer → User content creation Export System → Multi-format downloads Analytics Tracking → Conversion, performance metrics

Component Responsibilities

Rate Limiter: Session-based protection, conversion tracking, human verification Tool Generator: Standardized form interfaces, parameter validation, loading states AI Service: OpenAI integration, multi-variant generation, error handling Admin Tracker: Usage logging, cost tracking, performance monitoring Content Persistence: Universal database patterns, share code generation Share System: Cross-tool unique codes, SEO-optimized public pages Response Writer: Rich text editing, auto-save, content validation Export System: Multi-format output, template-based generation Analytics: Conversion tracking, user behavior analysis, performance metrics

🗄️ Database Architecture

Universal Schema Pattern

Every tool implements the standardized tools_{tool_name} schema:

CREATE TABLE IF NOT EXISTS tools_{tool_name} ( -- Universal Identity id UUID PRIMARY KEY DEFAULT gen_random_uuid(), title TEXT NOT NULL, share_code TEXT UNIQUE NOT NULL, -- Ownership & Sessions user_id UUID REFERENCES auth.users(id) ON DELETE CASCADE, session_id TEXT NOT NULL, -- Visibility & Quality Control is_public BOOLEAN DEFAULT FALSE, is_featured BOOLEAN DEFAULT FALSE, is_reviewed BOOLEAN DEFAULT FALSE, -- Analytics & Performance view_count INTEGER DEFAULT 0, share_count INTEGER DEFAULT 0, export_count INTEGER DEFAULT 0, use_count INTEGER DEFAULT 0, rating_sum INTEGER DEFAULT 0, rating_count INTEGER DEFAULT 0, -- AI Integration & Cost Tracking ai_generation_prompt TEXT, ai_tokens_used INTEGER DEFAULT 0, ai_cost_cents INTEGER DEFAULT 0, ai_model TEXT DEFAULT 'gpt-4o-mini-2024-07-18', ai_generation_time_ms INTEGER, ai_confidence_score DECIMAL(3,2), -- SEO & Discovery seo_title TEXT, seo_description TEXT, keywords TEXT[] DEFAULT '{}', canonical_url TEXT, -- Content Storage (Tool-Specific) content JSONB NOT NULL, metadata JSONB DEFAULT '{}'::jsonb, -- Lifecycle Management created_at TIMESTAMPTZ DEFAULT NOW(), updated_at TIMESTAMPTZ DEFAULT NOW(), expires_at TIMESTAMPTZ, -- Indexes for Performance CONSTRAINT valid_rating_score CHECK (rating_sum >= 0 AND rating_count >= 0), CONSTRAINT valid_ai_confidence CHECK (ai_confidence_score >= 0 AND ai_confidence_score <= 1) ); -- Universal Indexes CREATE INDEX IF NOT EXISTS idx_tools_{tool_name}_share_code ON tools_{tool_name}(share_code); CREATE INDEX IF NOT EXISTS idx_tools_{tool_name}_session ON tools_{tool_name}(session_id); CREATE INDEX IF NOT EXISTS idx_tools_{tool_name}_public ON tools_{tool_name}(is_public) WHERE is_public = true; CREATE INDEX IF NOT EXISTS idx_tools_{tool_name}_featured ON tools_{tool_name}(is_featured) WHERE is_featured = true;

Supporting Tables Pattern

Each tool includes standardized supporting tables:

User Responses System:

CREATE TABLE IF NOT EXISTS tools_{tool_name}_responses ( id UUID PRIMARY KEY DEFAULT gen_random_uuid(), {tool_name}_id UUID REFERENCES tools_{tool_name}(id) ON DELETE CASCADE, user_id UUID REFERENCES auth.users(id) ON DELETE CASCADE, session_id TEXT NOT NULL, title TEXT NOT NULL, content TEXT NOT NULL, word_count INTEGER GENERATED ALWAYS AS (array_length(string_to_array(content, ' '), 1)) STORED, is_public BOOLEAN DEFAULT FALSE, is_featured BOOLEAN DEFAULT FALSE, view_count INTEGER DEFAULT 0, like_count INTEGER DEFAULT 0, share_count INTEGER DEFAULT 0, seo_title TEXT, seo_description TEXT, created_at TIMESTAMPTZ DEFAULT NOW(), updated_at TIMESTAMPTZ DEFAULT NOW() );

🔗 API Architecture Patterns

Standardized Endpoint Structure

Every tool implements identical API patterns:

// Generation Endpoint POST /api/{tool}/generate { sessionId: string, options: ToolSpecificOptions, humanVerification?: string } // Browse/Filter Endpoint GET /api/{tool}?page=1&limit=20&filter[]=featured { success: true, data: ToolContent[], pagination: PaginationMeta, filters: FilterOptions } // Sharing System POST /api/{tool}/share GET /api/{tool}/share/{shareCode} PATCH /api/{tool}/share/{shareCode} // User Responses POST /api/{tool}/{id}/responses GET /api/{tool}/responses/{responseId} PATCH /api/{tool}/responses/{responseId} // Export System POST /api/{tool}/{id}/export { format: 'json' | 'csv' | 'pdf' | 'html' | 'docx', options: ExportOptions }

Universal Response Format

interface UniversalApiResponse<T = any> { success: boolean; data?: T; error?: { code: string; message: string; details?: any; }; meta?: { timestamp: string; requestId: string; processingTime: number; remainingLimit?: number; conversionOpportunity?: boolean; }; }

🎨 Component Architecture

Universal Component Hierarchy

{Tool}Landing.tsx ├── ToolHeader (brand, navigation) ├── ParameterForm (tool-specific inputs) ├── GenerationEngine (AI processing, results) ├── ResultsDisplay (content, analysis, actions) └── ConversionFooter (CTA, social proof) {Tool}Browse.tsx ├── BrowseHeader (search, filters) ├── FeaturedContent (curated highlights) ├── ContentGrid (paginated results) └── LoadMore (infinite scroll) {Tool}Writer.tsx ├── WriterHeader (save, export, share) ├── RichTextEditor (content creation) ├── AutoSave (background persistence) └── ExportOptions (multi-format output) {Tool}PublicView.tsx ├── SEOOptimizedHeader (meta tags, structured data) ├── ContentDisplay (original prompt/content) ├── UserResponsesSection (community responses) └── CTAFooter (try tool, create account)

Reusable Component Library

Core Components:

  • UniversalForm: Standardized input handling, validation, submission
  • AIGenerationStatus: Loading states, progress indicators, error handling
  • ShareManager: Social sharing, link copying, embed codes
  • ExportEngine: Multi-format exports with consistent templates
  • SEOOptimizer: Meta tag generation, structured data, OpenGraph
  • ConversionTracker: CTA placements, conversion funnel optimization

🤖 AI Integration Architecture

Standardized AI Service Pattern

class UniversalAIService { async generateContent<T>( toolName: string, options: GenerationOptions, sessionContext: SessionContext ): Promise<GenerationResult<T>> { // Retrieve stored prompts from admin database const prompt = await this.getStoredPrompt(toolName, options.variant) // Generate content with error handling const result = await this.callOpenAI(prompt, options) // Track usage with admin system await this.trackUsage(toolName, result.usage, sessionContext) // Generate multiple variants for A/B testing return this.createVariants(result) } }

Admin Integration Standards

Required Environment Variables:

# Main App Database (for admin tracking) NEXT_PUBLIC_SUPABASE_URL=https://main-app.supabase.co SUPABASE_SERVICE_ROLE_KEY=service_role_key_not_service_key # Tools Database (separate instance for isolation) NEXT_PUBLIC_TOOLS_DATABASE_URL=https://tools.supabase.co NEXT_PUBLIC_TOOLS_DATABASE_ANON_KEY=tools_anon_key # AI Services OPENAI_API_KEY=openai_key # CORS & Sharing NEXT_PUBLIC_TOOLS_APP_URL=https://tools.mystoryflow.com WEB_APP_URL=https://mystoryflow.com

Usage Tracking Pattern:

await trackAIUsage({ sessionId, featureName: `[Tools] ${toolName}_generation`, // CRITICAL: [Tools] prefix promptName: `${toolName}_creation_v1`, modelUsed: getRecommendedToolsModel(), // gpt-4o-mini-2024-07-18 provider: 'openai', tokensConsumed: result.usage.total_tokens, costUsd: calculateCost(result.usage), responseTimeMs: processingTime, requestSuccess: true, metadata: { toolType: toolName, userType: sessionContext.isAuthenticated ? 'registered' : 'anonymous', conversionOpportunity: shouldShowCTA(sessionContext) } })

🔍 SEO & Discovery Architecture

Universal SEO Optimization

Meta Tag Generation:

interface SEOMetadata { title: string; // Tool-specific with keyword optimization description: string; // 155-character optimized descriptions keywords: string[]; // Primary + long-tail keywords canonicalUrl: string; // Clean URL structure openGraph: { title: string; description: string; image: string; // Auto-generated social images type: 'article'; }; structuredData: { '@type': 'SoftwareApplication'; name: string; description: string; applicationCategory: 'BusinessApplication'; operatingSystem: 'Web'; // ... complete schema.org markup }; }

Universal Share Code System:

  • Format: {genre-hint}-{memorable-word}-{random}
  • Examples: romance-sunset-7k2m, mystery-shadow-9p1x, family-story-3h8n
  • Collision Detection: Cross-tool uniqueness validation
  • SEO Benefits: Memorable URLs, keyword hints, social sharing optimization

📊 Performance & Scaling Architecture

Performance Standards

  • Page Load: Less than 1 second initial render
  • AI Generation: Less than 8 seconds for complex prompts
  • Search/Browse: Less than 500ms query response time
  • Export Generation: Less than 3 seconds for any format
  • Concurrent Users: 200+ simultaneous tool usage

Scaling Strategies

Database Optimization:

  • Indexed access patterns for sub-second queries
  • Connection pooling with Supabase
  • Read replicas for browse/search operations
  • Automated cleanup of expired content

CDN Integration:

  • Static asset optimization through Vercel
  • Generated content caching at edge
  • Social media image generation and caching

AI Service Optimization:

  • Model selection based on complexity (gpt-4o-mini for speed/cost)
  • Prompt engineering for consistent output quality
  • Batch processing for bulk operations
  • Fallback handling for service interruptions

🔒 Security & Privacy Architecture

Security Standards

  • Rate Limiting: Session-based with escalating delays
  • Content Validation: AI-powered inappropriate content detection
  • Data Privacy: GDPR/CCPA compliant data handling
  • Session Management: Secure anonymous user tracking

Privacy Protection

  • Anonymous Users: No PII collection, session-only tracking
  • Content Expiration: Automatic cleanup of inactive content
  • User Control: Complete data deletion capabilities
  • Compliance: COPPA-safe design for educational tools

🚀 Deployment & Operations

Monorepo Integration

  • Build System: Turbo-powered incremental builds
  • Dependency Management: Shared packages, isolated tool logic
  • Environment Management: Environment-specific configurations
  • CI/CD Pipeline: Automated testing, building, and deployment

Monitoring & Analytics

  • Real-time Monitoring: Performance metrics, error tracking
  • Business Analytics: Conversion funnels, user behavior
  • Cost Tracking: AI usage costs, infrastructure expenses
  • Quality Metrics: Content quality scores, user satisfaction

This architecture represents the pinnacle of scalable AI tool development, enabling MyStoryFlow to rapidly deploy specialized tools while maintaining consistency, performance, and user experience excellence.