⚙️ The Developer's Arsenal

Stack: React, TypeScript, Supabase, OpenAI API

Architecture: Client-server architecture with real-time database and AI-powered recommendations

• React with TypeScript for type-safe frontend development
• Supabase for real-time database, authentication, and row-level security
• OpenAI API for generating personalized restaurant recommendations
• Tailwind CSS for responsive, utility-first styling
• Vercel for deployment with automatic preview branches

Data Structure: Relational database with restaurants, votes, users, and AI-generated recommendations linked through foreign keys

The core feature that powers community-driven restaurant rankings through head-to-head matchups using a modified ELO rating system.

Core Implementation: Each vote triggers this ELO calculation to update restaurant rankings:

// ELO rating calculation for restaurant rankings
const calculateNewRating = (winnerRating, loserRating, kFactor = 32) => {
  const expectedWin = 1 / (1 + Math.pow(10, (loserRating - winnerRating) / 400));
  const newWinnerRating = winnerRating + kFactor * (1 - expectedWin);
  const newLoserRating = loserRating + kFactor * (0 - (1 - expectedWin));

  return { winner: Math.round(newWinnerRating), loser: Math.round(newLoserRating) };
};

Enhanced Features: The algorithm is weighted based on user engagement and geographic proximity to Florence, SC, ensuring local preferences have stronger influence on rankings.

AI-Assisted Development: Used Claude for rapid prototyping of the voting algorithm and database schema design

Iteration Approach: MVP-first development with weekly feature releases based on user feedback

• Started with basic voting interface and manual restaurant database
• Added real-time rankings and voting history tracking
• Integrated OpenAI for personalized recommendations
• Implemented restaurant owner portal for business engagement

Community Integration: Local Florence food enthusiasts and restaurant owners provided direct feedback during beta testing

• This or That Voting: Simple binary choice interface with smooth animations and instant feedback
• Real-time Rankings: Live leaderboard updates using Supabase real-time subscriptions
• AI Recommendations: Personalized suggestions based on voting history and local preferences
• Restaurant Owner Portal: Business dashboard for viewing votes, rankings, and customer insights
• Mobile-First Design: Optimized for quick voting sessions on mobile devices

User Feedback: "Finally, a way to discover local favorites without endless scrolling through reviews"

Business Impact: Local restaurants report increased foot traffic from users discovering new spots through the voting system

Challenge: Preventing vote manipulation while maintaining user privacy and ease of access

Solution: Implemented session-based tracking with rate limiting and geographic validation

• Browser fingerprinting for anonymous but unique user identification
• Rate limiting to prevent rapid-fire voting abuse
• Geographic bounds checking to ensure votes come from Florence area

Result: 99.2% legitimate vote rate with seamless user experience requiring no registration

Stack: React 18, TypeScript, Supabase, Stripe, Tailwind CSS, Resend

Architecture: Full-stack local business platform built with modern web technologies, featuring real-time payment processing, automated email workflows, CRM functionality, and comprehensive SEO optimization for local discovery

• React 18 + TypeScript with Vite build tool for fast development
• Supabase (PostgreSQL) with Row Level Security and Edge Functions
• Stripe Checkout API with comprehensive payment processing
• Tailwind CSS + shadcn/ui for modern design system
• Resend Email API for automated communication workflows
• JSON-LD structured data for local SEO optimization

Data Structure: Serverless-first design with three-tier payment processing, atomic database transactions, and comprehensive error handling throughout the customer journey

The core innovation is a three-function serverless architecture ensuring atomic transactions between Stripe payments and database updates, preventing data inconsistencies and lost registrations.

Core Implementation: Payment verification with atomic database updates:

const verifyPayment = async (sessionId: string) => {
  const session = await stripe.checkout.sessions.retrieve(sessionId);

  // Validate session metadata matches registration
  if (session.metadata.registration_id !== registration.id) {
    throw new Error("Session registration ID mismatch");
  }

  // Atomic update with timestamp tracking
  const updateData = {
    payment_status: session.payment_status,
    payment_confirmed_at: session.payment_status === 'paid'
      ? new Date().toISOString() : null,
    updated_at: new Date().toISOString()
  };

  await supabase.from('registrations')
    .update(updateData).eq('id', registration.id);
}

Business Impact: Eliminates race conditions between payment confirmation and database updates, ensuring customers never experience payment success without registration confirmation

AI-Assisted Architecture Planning: Used Claude to design the serverless payment flow, database schema, and component architecture with early identification of potential race conditions

Iterative Development: Built modular React components with TypeScript, leveraging AI for complex form validation logic and error handling patterns

• AI-assisted architecture planning for serverless payment flow and database schema
• Iterative component development with TypeScript and modern React patterns
• Payment integration with comprehensive error handling and webhook verification
• SEO and performance optimization with AI-assisted structured data implementation

AI Integration: Claude provided architectural guidance, helped debug complex async workflows, and optimized database queries for performance

• Multi-Child Registration System: Dynamic form handling for multiple children per registration with real-time pricing calculation and JSONB storage
• Secure Payment Processing: Stripe Checkout integration with customer management, session tracking, and atomic database updates
• Automated Email Workflows: Resend API integration for confirmation emails, admin notifications, and lead nurturing with retry logic
• Lead Generation & Marketing: Interest list capture with age group segmentation, automated lead scoring, and marketing integration
• Local SEO Optimization: Comprehensive structured data (JSON-LD), local business schema markup, and performance optimization
• Mobile-First Responsive Design: Tailwind CSS implementation with custom design system optimized for local business customers

Technical Performance: Lighthouse score 95+ across all metrics with sub-2s page load times and optimized bundle size with Vite

Business Impact: Streamlined registration process reduced manual work by 80%, automated email workflows improved customer communication, and mobile optimization increased conversion rates

Challenge: Payment flow race conditions where Stripe webhooks and user redirects could create inconsistent database states during payment processing

Solution: Implemented atomic three-function architecture with session ID validation, metadata verification, and idempotent database updates to ensure data consistency

• Complex Multi-Child Registration UX: Created dynamic form components with real-time validation and JSONB storage for flexible child data
• Email Delivery Reliability: Implemented robust error handling with retry logic and multiple email triggers with fallback mechanisms
• Local SEO Optimization: Comprehensive structured data implementation with performance optimization for search visibility

Result: Scalable serverless architecture handling traffic spikes with PostgreSQL optimization and modular component design enabling feature expansion

Stack: Next.js 15 App Router, TypeScript, Neon PostgreSQL, Stack Auth

Architecture: Modern full-stack league management system built with performance and user experience as primary concerns. Direct database queries over ORM abstractions and mobile-first responsive design.

• Next.js 15 App Router with TypeScript (strict mode) for type-safe development
• Stack Auth for mobile-optimized authentication flows
• Neon PostgreSQL with direct SQL queries for 50% faster build times
• Tailwind CSS 4 for responsive, utility-first styling
• Netlify hosting with optimized build pipeline and static asset caching

Data Structure: Custom SQL query helpers for type safety while maintaining performance, removed Drizzle ORM for faster builds

The core feature enabling competitive bag tag challenges with automatic validation of league rules. Players can challenge anyone with a "better" (lower-numbered) tag, creating a dynamic ranking system.

Core Implementation: Challenge validation with business rule enforcement:

// Core challenge validation with business rule enforcement
export async function validateChallenge(
  challengerId: string,
  challengedId: string
) {
  const query = `
    SELECT c.tag_number as challenger_tag, t.tag_number as target_tag
    FROM users c, users t
    WHERE c.id = $1 AND t.id = $2
    AND c.has_active_tag = true AND t.has_active_tag = true
  `;

  const result = await db.query(query, [challengerId, challengedId]);

  // Lower numbers = better rankings, can only challenge "up"
  return result.challenger_tag > result.target_tag;
}

Technical Innovation: Handles complex scenarios like open challenges (anyone can accept), scheduled matches, and real-time state management with optimistic updates.

AI-Assisted Development: Leveraged Claude throughout the project to solve complex architectural challenges and accelerate feature development while maintaining code quality

Iteration Approach: Rapid prototyping with AI-generated project structure, then performance analysis and authentication migration based on real-world usage

• Used Claude for initial project structure and authentication flows
• AI helped analyze Netlify build logs to identify Drizzle ORM as 60-second bottleneck
• Mid-project switch from NextAuth to Stack Auth with AI migration assistance
• Collaborated with AI to model complex disc golf rules into TypeScript interfaces

Key Insight: AI excels at architectural decisions and code transformation but requires domain expertise guidance for sports league business rules

• Dynamic Tag Challenges: Real-time challenge system with automatic validation, scheduling, and score tracking implementing complex league rules
• Event Management: Complete event lifecycle from creation to payout calculation handling league events, tournaments, and casual rounds
• Role-Based Administration: Multi-tier permission system using Stack Auth metadata with audit trails for financial records
• Mobile-Optimized UI: App-like experience with bottom navigation, optimistic updates, and PWA capabilities for on-course usage
• Live Leaderboards: Dynamic rankings with historical performance tracking and comprehensive statistics
• Financial Tracking: Automated calculation of buy-ins, ace pots, and payouts with transparent audit capabilities

Performance Impact: The optimized architecture delivers seamless deployments with modern type safety and developer experience

User Impact: Mobile-first design has significantly improved member engagement during events with zero runtime errors since deployment

Challenge: Build performance bottleneck with Drizzle ORM causing 60+ second build times, blocking rapid iteration cycles

Solution: Analyzed dependency tree, migrated to direct SQL with custom TypeScript helpers, implemented build optimizations achieving 50% performance improvement

• Authentication Migration: Mid-project switch from NextAuth to Stack Auth for mobile-optimized flows
• Complex Business Logic: Created domain-specific TypeScript interfaces encoding league rules in the type system
• Real-Time State Management: Implemented optimistic updates with proper error handling using Next.js server actions

Result: Modern league management system with type safety, real-time updates, and mobile-first design optimized for outdoor tournament usage

Stack: Next.js 14, React, TypeScript, Neon PostgreSQL, SheetJS

Architecture: Full-stack Next.js application with multi-tenant architecture and mobile-first design for sideline coaching use

• React with TypeScript for type-safe frontend development
• Next.js 14 App Router with API Routes for server-side processing
• Neon PostgreSQL with multi-tenant schema and connection pooling
• Tailwind CSS for mobile-optimized UI with large touch targets
• SheetJS integration for Excel/CSV import and export functionality
• Netlify hosting with static export for optimal performance

Data Structure: Multi-tenant design with complete data isolation using unique team codes. No complex authentication needed—just email-based recovery and team code access.

The core innovation is a flexible fairness system that balances player groups without rigid constraints, accommodating the chaotic nature of youth soccer while ensuring equitable playing time.

Core Implementation: Smart rotation suggestions based on season equity:

// Smart rotation suggestions based on season equity
function calculateRotationSuggestions(players, currentLineup, seasonStats) {
  return players.map(player => {
    const avgMinutes = seasonStats.averageMinutes;
    const playerMinutes = seasonStats[player.id]?.total || 0;
    const equity = playerMinutes / avgMinutes;

    return {
      ...player,
      priority: equity < 0.85 ? 'needs-time' :
                equity > 1.15 ? 'consider-rest' : 'balanced',
      suggestion: generateTierBalancedSuggestion(player, currentLineup)
    };
  }).sort((a, b) => a.priority === 'needs-time' ? -1 : 1);
}

Design Philosophy: Built for the reality of youth soccer—chaotic, flexible, and focused on fun rather than rigid tactical compliance. Provides guidance without restriction.

AI-Assisted Development: Rapid development using Claude Code, built iteratively based on real coaching needs and immediate field testing

Iteration Approach: Four focused sessions from concept to production-ready tool with continuous real-world validation

• Session 1: Core rotation functionality developed in hours before first game
• Session 2: Multi-team capability and production deployment
• Session 3: Position tracking and flexible formation support (7-11 players)
• Session 4: Enhanced CSV/Excel imports and mobile UX refinements

AI Collaboration Advantage: Claude Code handled entire technical implementation, enabling rapid iteration from coaching problem to production solution while focusing on user experience

• Flexible Formations: Dynamic position assignment supporting 7-11 players on field with conflict detection and visual warnings
• Mobile-First Sideline UX: Large touch targets and simplified workflows for quick substitution updates during live games
• Season Equity Tracking: PostgreSQL-powered statistics engine tracking cumulative playing time with fairness indicators
• Data Import/Export: SheetJS integration for seamless CSV and Excel processing, bulk roster imports, and exportable reports
• Multi-Tenant Architecture: Complete data isolation using unique team codes with unlimited team support
• Offline Capability: Works offline once loaded with responsive design optimized for phones and tablets

Problem Solved: Eliminates "forgotten player" scenarios while building coach confidence through systematic rotation tracking and season-long equity monitoring

Real-World Impact: Currently used for active team coaching with positive feedback on fair playing time management and mobile sideline usability

Challenge: Multi-position conflict detection algorithm to identify when players are double-booked across formation positions while allowing intentional flexibility

Solution: Developed pragmatic state management balancing data persistence with real-time updates, allowing manual overrides while maintaining statistical integrity

• Dynamic Formation Scaling: Supporting variable team sizes (7-11 players) with position-aware layout calculations
• Mobile Touch Optimization: Designing intuitive tap-to-cycle interfaces for rapid lineup changes during live games
• Youth Soccer Reality: Technical architecture reflects pragmatic approach for chaotic, flexible gameplay focused on fun

Result: Scalable multi-tenant architecture with mobile performance optimized for sideline use and systematic fairness without restriction

Stack: Python, Flask, XGBoost, PostgreSQL, Bootstrap

Architecture: Data pipeline approach where FPL API data flows through authentication layers, gets processed by ML models for projections, then feeds into a transfer recommendation engine

• Python Flask with OpenFPL XGBoost/Random Forest ensemble models
• PostgreSQL with FPL Official API integration and session authentication
• Bootstrap 5 with vanilla JavaScript and async data loading
• Railway deployment with Gunicorn WSGI server
• Session-authenticated FPL API calls with ownership tracking

Data Flow: Session-authenticated FPL API calls → Player/ownership data extraction → ML model feature conversion → 5-gameweek projections → Position-based transfer analysis → Web interface recommendations

The core algorithm compares your current squad against available players using ML projections, identifying upgrade opportunities by position with detailed reasoning. It combines machine learning predictions with heuristic analysis for robust recommendations.

Core Implementation: Position-based transfer analysis with ML-powered projections:

# Transfer opportunity analysis by position
for pos in [1, 2, 3, 4]:  # GK, DEF, MID, FWD
    owned_in_position = [p for p in owned_analysis if p['position'] == pos]
    available_in_position = [p for p in available_analysis if p['position'] == pos][:10]

    if owned_in_position and available_in_position:
        worst_owned = min(owned_in_position, key=lambda x: x['projected_points'])
        best_available = max(available_in_position, key=lambda x: x['projected_points'])

        projected_gain = best_available['projected_points'] - worst_owned['projected_points']
        if projected_gain > 0.5:  # Minimum improvement threshold
            # Generate reasoning based on form, minutes, injury risk
            reasons = self._analyze_transfer_factors(worst_owned, best_available)
            upgrade_opportunities.append({
                'out': worst_owned, 'in': best_available,
                'projected_gain': projected_gain, 'reasoning': reasons
            })

Technical Innovation: Bridges FPL's undocumented API with pre-trained ML models expecting specific data formats, handling 100+ feature mapping with intelligent fallbacks.

AI-Assisted Development: ~2 weeks of "vibe coding" with Claude as development partner, exemplifying rapid iteration and collaborative problem-solving

Iteration Approach: Week 1 focused on reverse-engineering FPL's authentication system and building data pipeline. Week 2 integrated OpenFPL ML models and created web interface

• Claude excelled at data format conversion between FPL API and ML models
• Error handling patterns for API authentication and complex feature mapping
• Debugging integration with OpenFPL's 100+ feature requirements
• Each iteration tested against real league data for accuracy

Key Collaboration: AI assistance reduced weeks of manual API documentation into days of collaborative debugging and integration work

• ML-Powered Projections: Integrates pre-trained XGBoost/Random Forest ensemble models with intelligent fallbacks to form-based heuristics
• League-Wide Ownership Tracking: Real-time analysis identifying available transfer targets through FPL's element-status endpoint
• Position-Specific Analysis: Breaks down recommendations by position accounting for scoring patterns and roster requirements
• Detailed Transfer Reasoning: Comprehensive justification including projections, injury concerns, form trends, and draft value
• 5-Gameweek Projections: Forward-looking analysis for strategic transfer planning

Active Usage: Currently deployed and used by our 8-person "FloTown" league with successful transfer recommendations providing competitive advantages

Development Efficiency: AI-assisted development demonstrated power of human-AI pair programming for complex integrations

Challenge: Reverse-engineering FPL's undocumented session cookie system and maintaining authentication across multiple API calls

Solution: Systematic endpoint testing and browser dev tools analysis to capture sessionid cookies with state management

• ML Model Integration: Built translation layer mapping FPL API to OpenFPL's 100+ feature format
• Real-Time Performance: Implemented caching and user feedback for 10-15 second model initialization
• API Rate Limiting: Robust handling of authentication persistence and request throttling

Result: Seamless integration processing 500+ player records with ML projections under 30 seconds while handling complex authentication flows

Stack: React, TypeScript, Supabase, Tailwind CSS, Cloudinary

Architecture: Single-page application with public storefront and authenticated admin dashboard

• React 18 + TypeScript for type-safe development
• Vite for 4x faster builds than Next.js
• Supabase (Backend-as-a-Service) with PostgreSQL and RLS
• Cloudinary for image management and optimization
• Instagram Basic Display API for automated posting
• Custom React hooks for data management

Data Structure: Supabase RLS policies for security, custom user_roles table for fine-grained permissions, real-time subscriptions for live inventory updates

The platform's unique feature automatically changes shopping cart terminology based on order total to reflect actual delivery containers used by the business.

Core Implementation: React Context API maintains state consistency across all components:

const getContainerType = (total: number): ContainerType => {
  if (total < 7) return 'bag'     // Small orders
  if (total < 20) return 'tote'   // Medium orders
  return 'basket'                 // Large orders
}

// React context updates UI terminology in real-time
const { cartTotal } = useCart()
const containerType = getContainerType(cartTotal)

// Updates button text, cart labels, and checkout flow
<button>Add to {containerType}</button>
<h2>Your {containerType} ({items.length} items)</h2>

Business Impact: Matches customer expectations with actual delivery experience, reducing confusion and improving customer satisfaction with order fulfillment.

AI-Assisted Development: Fully assisted by Claude Code for comprehensive development including architecture, implementation, and pattern optimization

Iteration Approach: 3-week timeline with comprehensive specifications first, then rapid AI-assisted iteration

• Database design and schema generation with TypeScript interfaces
• Admin dashboard CRUD operations and complex features
• Instagram integration with retry logic for failed posts
• Tech stack optimization: chose Vite over Next.js for 4x faster builds

Business Integration: Direct feedback loop with business owner for UX decisions and workflow optimization

• Automated Instagram Integration: Formats product images, generates captions with pricing, and posts with retry logic
• Role-Based Admin Dashboard: Comprehensive inventory management with bulk operations, protected by Supabase RLS policies
• Real-Time Inventory System: Live updates prevent overselling with status changes reflected across all sessions
• Dynamic Cart Terminology: Shopping cart language changes based on order total (bag/tote/basket)
• Mobile-First Design: Responsive grid system optimized for mobile conversion

Business Impact: Eliminated manual tracking spreadsheets, reduced inventory posting from 30+ minutes to under 5 minutes, and provided automated order confirmations

Challenge: Complex state management for cart container naming across multiple components while maintaining UI consistency

Solution: React Context API with careful state synchronization and real-time calculations

• Instagram API OAuth flow complexity solved with automatic retry logic
• Database security for public browsing with secure admin access via RLS policies
• Image formatting requirements handled with Cloudinary optimization pipeline

Result: Seamless user experience with automated backend processes that scale with business growth

Stack: Vanilla JavaScript, HTML5, CSS Grid/Flexbox, localStorage API, LZ-String compression library

Architecture: Single-page progressive enhancement application with client-side state management. The entire application exists in one HTML file for maximum portability and zero-dependency deployment.

• Vanilla JavaScript for maximum performance and compatibility
• HTML5 semantic forms with progressive enhancement
• CSS Grid/Flexbox for responsive layouts across devices
• localStorage API with auto-save every 3 seconds during editing
• LZ-String compression for URL-based project sharing
• Single HTML file deployment with zero external dependencies

Data Structure: Complex nested state management handling form data, document status tracking, and timeline management with localStorage persistence and auto-save functionality

The most technically interesting feature is the serverless project sharing system. Instead of requiring user accounts or databases, entire projects are compressed and embedded directly into shareable URLs using LZ-String compression.

Core Implementation: Serverless project sharing without databases:

function generateShareableUrl() {
  try {
    const projectData = getProjectData();
    const compressed = LZString.compressToEncodedURIComponent(
      JSON.stringify(projectData)
    );
    return `${window.location.origin}${window.location.pathname}?project=${compressed}`;
  } catch(e) {
    return `${window.location.href}#shared`;
  }
}

// On page load, check for shared projects
const urlParams = new URLSearchParams(window.location.search);
const sharedData = urlParams.get('project');
if (sharedData) {
  const projectData = JSON.parse(
    LZString.decompressFromEncodedURIComponent(sharedData)
  );
}

Business Impact: Enables seamless collaboration without server infrastructure - users can share complete projects via email, messaging, or QR codes

AI-Assisted Domain Research: The biggest challenge wasn't technical but understanding SC nonprofit law and IRS requirements. AI collaboration was essential for researching Form 1023-EZ eligibility, required legal language, and state-specific incorporation rules.

Iterative "Vibe Coding": 2-week development cycle with AI assistance for both technical implementation and legal compliance

• Week 1: Core form functionality and legal template research
• Week 2: Collaboration features and comprehensive validation
• Progressive Enhancement approach starting with basic HTML forms
• AI assistance for legal compliance and technical implementation

Domain Expertise Challenge: Required deep understanding of nonprofit law, IRS requirements, and South Carolina incorporation rules

• Real-time Progress Tracking: Dynamic dashboard calculates completion percentage with visual indicators and timeline updates
• Smart Form Validation: Context-aware validation with custom rules for fiscal year dates, email formats, and phone number formatting
• Template System: Built-in legal templates for purpose statements and dissolution clauses meeting IRS 501(c)(3) requirements
• Export Flexibility: Multiple formats (CSV, JSON, formatted text) optimized for different collaboration use cases
• Privacy-Conscious Design: Clear indicators for offline collection of sensitive data while maintaining usability
• URL-Based Sharing: Complete project sharing via compressed URLs without requiring accounts or databases

User Impact: Transforms a process typically requiring $500-2000 in legal fees and 2-4 weeks of professional consultation into a 2-3 hour guided experience that users can complete independently

Technical Performance: Single HTML file loads instantly with no external dependencies, working in all modern browsers with graceful degradation

Challenge: Complex state management for 50+ form fields across multiple sections with dynamic board member collections

Solution: Centralized update function that handles validation, progress calculation, and auto-save in a single operation

• Privacy-conscious design for sensitive nonprofit formation data with clear offline indicators
• Mobile-responsive complex forms with CSS Grid responsive layouts
• Browser compatibility with graceful degradation for localStorage support
• Legal compliance ensuring templates meet IRS 501(c)(3) requirements

Result: Seamless multi-device experience with automatic data recovery and zero external dependencies, transforming complex legal process into guided user experience