Preordain

01 / Challenge

Data Silos & Operational Velocity

The project faced a triple-constraint challenge:

• Data Fragmentation: I realize that the competitive MTG landscape lacks open APIs, requiring custom strategies for data ingestion and normalization.
• The Solo-Builder Bottleneck: Developing a full-stack platform (DB, Auth, Logic, UI) traditionally requires a team.
• UI/UX Standard: Competitive tools often prioritize function over form; Preordain needed to prove that high-level data visualization can be intuitive and accessible.

02 / The Orchestration Engine

Technical Stack & AI Framework

To achieve maximum velocity, I curated a sophisticated stack that bridged the gap between design and production-grade software.

The Core Stack: Frontend (Svelte + TypeScript), Styling (Tailwind CSS), Database & Auth (Supabase/PostgreSQL), and Visualization (Chart.js).

The AI Agentic Framework: My curiosity drove me to learn how to orchestrate AI, with the integration of specialized AI "Skills" and protocols that automated the manual labor of development:

• Logic & Planning: Leveraged Claude for high-level architectural mapping and Jira integration.
• Development Environment: Orchestrated Claude Code and Gemini CLI for local execution and rapid debugging.
• The Design-to-Code Bridge: Utilized Figma MCP and Anthropic Frontend Skills to ensure design tokens translated perfectly.

03 / The Process

From Vision to Execution

Phase 1: Research & Discovery. Conducted interviews with Pro-players and Data Scientists to identify gaps in "Metagame" analysis. Analyzed competitor business models to align value propositions.

Phase 2: Hybrid Design System. Developed a system in Figma blending established libraries with custom elements. Used Storybook to maintain a "Single Source of Truth."

Phase 3: Data Engineering & "Vibe Coding". Architected a process for the income, validation, and classification of tournament data. Iterated on database logic to ensure visualizing 15,000+ decklists remained high-performance.

04 / Business Logic

Community-First Economics

Zero-Friction Growth: Designed a "Free Tournament Organizer" tool that requires no account or installation—acting as a high-utility entry point for the community.

Sustainable Revenue: Implemented a subscription model for advanced analytics to cover server costs while maintaining a commitment to "No Ads" and data transparency.

05 / Outcomes

Impact & Product Sovereignty

• 70% Development Reduction: Moved from blank canvas to Full-Stack MVP in 21 days by successfully managing an AI-agentic workforce.
• High-Fidelity Scale: Capable of handling massive tournament datasets with real-time cross-examination capabilities.
• Product Sovereignty: Demonstrated that a Senior Product Designer can now operate as a full-scale "Product Builder," handling every step from stakeholder interviews to database schema optimization.