Team: Identity Hackathon: UofTHacks 2026 Challenge: Shopify Technical Challenge

An AI agent that analyzes user behavior, proposes website improvements, and deploys them—all without the owner writing a single line of code.

Small businesses don't know how to harness analytics to improve their websites. Existing tools (Hotjar, GA, etc.) show data but leave owners to figure out what to do with it. Blip Ship closes the full loop:

Collect behavior → Analyze issues → Propose fixes → Implement changes → Owner approves → Deploy

┌──────────┐    ┌──────────┐    ┌──────────┐    ┌──────────┐
│  TRACK   │ → │ ANALYZE  │ → │ GENERATE │ → │  PREVIEW │
│ behavior │    │ with AI  │    │  changes │    │ & approve│
└──────────┘    └──────────┘    └──────────┘    └──────────┘
     ↑                                               │
     └───────────────── DEPLOY ←────────────────────┘

# Clone and install
git clone <repo-url>
cd blip-ship
npm install

# Create data files
mkdir -p data
echo '[]' > data/events.json
echo '[]' > data/suggestions.json

# Add your live config to data/config-live.json

# Add ANTHROPIC_API_KEY to .env.local
echo 'ANTHROPIC_API_KEY=your-key' > .env.local

# Run development server
npm run dev

/app
  /store                    # Demo store (renders from config)
  /dashboard                # Owner dashboard
  /api
    /events/route.ts        # POST - receive tracking events
    /analytics/route.ts     # GET - aggregated analytics
    /analyze/route.ts       # POST - trigger AI analysis
    /config/route.ts        # GET - site config (live/preview)
    /suggestions/route.ts   # GET/POST - suggestion management

/components
  /store                    # Store UI components
  /dashboard                # Dashboard UI components
  /tracking                 # Event tracking utilities

/lib
  tracker.ts                # Event tracking utilities
  ai.ts                     # AI analysis functions
  db.ts                     # JSON file read/write

/data
  events.json               # Stored events
  config-live.json          # Current live config
  config-preview.json       # Preview config
  suggestions.json          # All suggestions

This project includes pre-configured Claude Code workflows to accelerate development. These are located in .claude/.

1. Open this project in Claude Code: cd ~/repos/blip-ship && claude
2. Use slash commands directly in the conversation
3. Agents are automatically invoked by Claude when appropriate

Type these directly in Claude Code to trigger specialized workflows:

# Implement the event tracking system
/implement-code add click tracking with rage click detection

# Debug a specific issue
/debug-issue events not being saved to JSON file

# Run security scan before deployment
/scan-security

Agents are specialized AI assistants that Claude automatically invokes for complex tasks. You don't call them directly—Claude uses them when appropriate.

codebase-explorer → [implement] → backend-test-guardian → pre-push-validator → docs-weaver

codebase-explorer → migration-planner → [execute] → backend-test-guardian → project-historian

performance-profiler → cache-strategy-architect → [implement] → backend-test-guardian

security-scanner → [remediate] → secrets-env-auditor → pre-push-validator

Receives tracking events from demo store.

Returns aggregated analytics data.

Triggers AI analysis and generates suggestions.

Returns site configuration.

Lists all AI suggestions.

Accepts a suggestion, promotes preview to live.

Rejects a suggestion.

See CLAUDE.md for comprehensive technical documentation including:

• Complete CRO Fix Flow architecture
• Component reference with code examples
• Environment configuration guide
• Troubleshooting and debugging tips
• Production readiness checklist

1. Create a feature branch
2. Make your changes
3. Run /pre-push-validator before pushing
4. Create a PR with /enhance-pr

Problem: When sending fix approval emails with embedded base64 screenshots, Gmail clips the email with "[Message clipped]" at the bottom. This hides critical content including the approve/deny buttons.

Root Cause: Gmail clips emails larger than 102KB. Our base64-embedded PNG screenshots were ~250KB each, pushing total email size to ~500KB.

Solution: Host screenshots on Cloudinary instead of embedding as base64. The email now contains <img src="proxy.php?url=https://res.cloudinary.com/..."> URLs instead of <img src="proxy.php?url=data:image/png;base64,...">.

Implementation:

1. Added lib/cloudinary-service.ts - uploads PNG buffers to Cloudinary
2. Updated lib/screenshot-service.ts - added captureAndUploadScreenshots() function
3. Updated lib/email-service.ts - tries Cloudinary first, falls back to embedded

Required Environment Variables:

CLOUDINARY_CLOUD_NAME=your-cloud-name
CLOUDINARY_API_KEY=your-api-key
CLOUDINARY_API_SECRET=your-api-secret

Get credentials from Cloudinary Console.

Fallback Behavior:

• If Cloudinary is configured: Uses hosted URLs (~5KB email)
• If not configured: Falls back to embedded base64 (may clip)
• If Playwright unavailable: Shows links instead of images

Tracking unresolved design questions and places where we got stuck.

Current approach: Manual ctaId prop passed to useCTATracking hook.

const { ref, handleClick } = useCTATracking({ ctaId: 'add-to-cart-btn' });

Problem: Requires developer to manually assign unique IDs to every button. Not scalable for:

• Dynamically generated buttons (e.g., product lists)
• Third-party components
• Existing sites without instrumentation

Possible solutions:

Questions to resolve:

• Do we need to track buttons on sites we don't control?
• How do we handle buttons that appear/disappear dynamically?
• Should we persist button identity across page reloads?
• How do we correlate the same button across different pages?

Decision (2026-01-17): For hackathon demo, use manual ctaId on the controlled demo store. Revisit with robust auto-indexing strategy when expanding to live dynamic sites.

MIT