Building QRClx.com: An AI Co-Creator Experiment

I wanted to experiment with using an AI coding agent not just as a helper, but as a co-creator for an entire web project. The result was qrclx.com: a URL shortener that also generates QR codes and provides link insights. Here's how it came together.

The Vision

The idea was straightforward: create a modern URL shortener that goes beyond just making links shorter. I wanted something that could:

Generate short, memorable URLs
Create customizable QR codes automatically
Track detailed analytics on clicks
Provide a clean, modern interface
Handle high-performance redirects

But here's the twist: instead of building it myself from scratch, I wanted to see how far I could push AI as a true development partner - not just for code suggestions, but for architectural decisions, feature planning, and even debugging complex issues.

The Technology Stack

Working with the AI, we settled on a modern, performant stack:

Frontend:

React 18 with TypeScript for type safety
Vite for lightning-fast development builds
Tailwind CSS + shadcn/ui for beautiful, accessible components
TanStack Query for smart data fetching and caching
React Router for client-side routing

Backend:

Supabase as the full backend-as-a-service
PostgreSQL with Row Level Security for data protection
Supabase Edge Functions (Deno runtime) for serverless redirects
Real-time subscriptions for live updates

Key Libraries:

QR Code Styling for advanced QR code customization
UA Parser for detailed user agent analysis
React Hook Form + Zod for robust form handling
Date-fns for date formatting and manipulation

The AI Co-Creation Process

1. Architecture Planning

The AI didn't just write code - it helped design the entire system architecture. We discussed trade-offs between different approaches:

Database Design: The AI suggested a clean schema with three main tables:

links - Core link data with JSON for QR customization options
clicks - Detailed analytics for each click event
link_stats_daily - Aggregated daily statistics for performance

Edge Function Strategy: Rather than handling redirects in the frontend, the AI proposed using Supabase Edge Functions for:

Ultra-fast global redirects (deployed at the edge)
Asynchronous analytics logging (non-blocking)
Special route handling (.qr for QR codes, + for info pages)

2. Feature Development

The AI excelled at implementing complex features with clean, maintainable code:

QR Code Customization Engine

// The AI designed a sophisticated QR customization system
interface QRCodeOptions {
  format: 'svg' | 'png'
  size: number
  errorCorrectionLevel: 'L' | 'M' | 'Q' | 'H'
  margin: number
  dotsStyle?:
    | 'square'
    | 'rounded'
    | 'classy'
    | 'classy-rounded'
    | 'dots'
    | 'extra-rounded'
  cornersSquareStyle?: 'square' | 'extra-rounded' | 'dot'
  backgroundColor?: string
  dotsColor?: string
  logoUrl?: string
  // ... and more advanced options
}

The QR customizer includes:

Live preview with instant updates
Readability scoring to ensure QR codes remain scannable
Smart error correction that auto-upgrades when logos are added
Color synchronization for consistent branding
Multiple export formats (SVG, PNG)

Analytics Engine

The AI designed a comprehensive analytics system that captures:

Device fingerprinting (browser, OS, device type)
Geographic data (country-level)
Referrer tracking for traffic sources
Daily aggregation for performance optimization
Real-time updates in the dashboard

3. Performance Optimization

The AI made several smart performance decisions:

Asynchronous Analytics: Click tracking happens after the redirect, ensuring users aren't delayed:

// Start async logging but don't wait for it
logClickAsync()

// Perform redirect immediately
return new Response(null, {
  status: 302,
  headers: { Location: link.target_url },
})

Optimistic UI Updates: The dashboard updates immediately while syncing in the background.

Edge Caching: Static assets and QR codes are cached globally for instant access.

Challenges and Solutions

Challenge 1: Complex Routing Logic

Short URLs needed to handle multiple special cases:

/{slug} → Redirect to target URL
/{slug}+ → Show link information page
/{slug}.qr → Generate QR code
Frontend routes (/dashboard, /info/{slug})

AI Solution: A smart routing system in the Edge Function that detects route types and handles them appropriately, with fallbacks to the frontend for complex UI routes.

Challenge 2: QR Code Readability

Custom colors and styles could make QR codes unreadable.

AI Solution: A real-time readability scoring system that:

Calculates color contrast ratios
Warns about potential scanning issues
Automatically suggests better error correction levels
Provides visual feedback with color-coded scores

Challenge 3: Database Performance

Analytics could generate thousands of records per day.

AI Solution: A hybrid approach using:

Raw click events for detailed analysis
Daily aggregated stats for fast dashboard queries
Smart indexing strategies for optimal performance

The QR Code Innovation

One of the most impressive aspects was the AI's approach to QR code generation. Instead of basic black-and-white codes, we created a full customization engine:

Visual Presets:

Classic (traditional square dots)
Modern (rounded corners and dots)
Elegant (classy styling with dot corners)
Bold (high contrast with extra-rounded elements)

Advanced Features:

Logo embedding with automatic error correction adjustment
Custom color schemes with readability validation
Multiple export formats optimized for different use cases
URL-based generation for API access (/{slug}.qr?format=svg&size=512)

Real-World Performance

The site launched with impressive metrics:

Sub-100ms redirect times globally
99.9% uptime with Supabase's infrastructure
Responsive design that works perfectly on mobile
Accessibility compliant with proper ARIA labels and keyboard navigation

Lessons Learned

What Worked Exceptionally Well

Architectural Planning: The AI excelled at system design and considering edge cases I might have missed.
Complex Feature Implementation: Features like the QR customizer would have taken me days to build solo - the AI helped implement it in hours.
Error Handling: The AI was thorough about adding proper error boundaries, loading states, and user feedback.
Code Organization: Clean separation of concerns, proper TypeScript typing, and maintainable component structure.

Where AI Shined

Rapid prototyping of complex UI components
Database schema design with proper relationships and constraints
Edge case handling in the redirect logic
Performance optimization strategies
Accessibility implementation from the start

The Human Touch Still Mattered

While the AI was an incredible co-creator, human oversight was crucial for:

User experience decisions and design refinement
Business logic validation and edge case testing
Integration testing across the full stack
Deployment strategy and monitoring setup

The Future of AI Co-Creation

This experiment proved that AI can be a true development partner, not just a coding assistant. The key is treating it as a collaborative process:

Share the architectural vision early and iterate together
Let AI handle complex implementations while you focus on user experience
Use AI for rapid prototyping and exploration of different approaches
Maintain human oversight for critical business logic and user experience

The result? A production-ready web application that would have taken weeks to build solo, completed in days with an AI co-creator. More importantly, the code quality is high, the architecture is solid, and the user experience is polished.

Try It Yourself

Visit qrclx.com to see the result of this AI co-creation experiment. Create some short links, customize QR codes, and explore the analytics - all built through a collaborative process between human creativity and AI capability.

The future of development isn't human vs. AI - it's human with AI, each bringing their unique strengths to create something better than either could build alone.