Project Summary

QDrill is a production web application I built solo for managing sports drills and creating practice plans. It serves a niche sports community with features for drill discovery, collaborative sharing, and timeline-based practice planning with drag-and-drop editing.

Live at: qdrill.app

Technical Stack

• Frontend: SvelteKit 5, Tailwind CSS, Svelte Stores
• Backend: SvelteKit API routes, PostgreSQL (Neon)
• Auth: Auth.js with Google OAuth
• Infrastructure: Vercel (serverless), database migrations via node-pg-migrate
• Testing: Vitest (unit), Playwright & Cypress (E2E)
• Integrations: Excalidraw (diagramming), TinyMCE (rich text), AI SDK (Anthropic/OpenAI)

Key Features I Built

Drill Management System

• Full CRUD with rich metadata (skill level, duration, positions, complexity)
• Public/private visibility controls with shareable links
• Community features: upvoting, comments, drill variations
• Diagram editor integration using Excalidraw
• Client-side filtering with multi-criteria search

Practice Plan Builder

• Wizard-based creation flow for selecting drills by criteria
• Drag-and-drop timeline editor with parallel section support
• Real-time duration tracking and visualization
• Undo/redo history with custom state management
• Share and duplicate functionality

Architecture Highlights

• Custom Svelte store system for complex state (drag-and-drop, history tracking)
• RESTful API design with standardized error handling
• Parameterized queries throughout for SQL injection prevention
• Database schema with proper normalization and transaction support

Technical Challenges Solved

Complex Drag-and-Drop: Built a multi-target drag system for practice timeline editing, managing state transitions and visual feedback across nested drop zones.

State Management: Implemented custom store patterns with undo/redo support for the practice plan editor, handling complex nested data structures.

Real-time Filtering: Optimized client-side filtering for responsive UX while maintaining code clarity for future server-side migration.

Development Practices

• Comprehensive documentation (architecture docs, implementation guides)
• Database migrations for schema version control
• Multi-layer testing strategy (unit, integration, E2E)
• ESLint + Prettier for code quality
• CI/CD via Vercel with automatic deployments

What This Demonstrates

• Full ownership of a production application from concept to deployment
• Modern JavaScript/TypeScript ecosystem proficiency
• Database design and API architecture decisions
• Complex UI state management in component frameworks
• Testing strategy across multiple layers
• Solo project management and technical decision-making

Built as a passion project to solve a real need in a sports community I’m part of.

Durable AI Pipeline with Temporal + Next.js

Live Demo: https://www.twine.net/signin

Context

This was built as a take-home project for a senior engineer interview. The prompt: “How would you build a durable pipeline that turns documents into AI-generated guides, handling slow/unreliable dependencies at scale (5-5,000 items)?”

I built a working application instead of a design doc.

What It Does

A document-to-guide generation pipeline with:

• Real-time progress UI showing conversion and generation stages
• Configurable failure rates to demonstrate retry behavior
• Manual retry for failed items with actionable error messages
• Pagination and filtering across thousands of guides

Technical Highlights

Temporal for Durable Execution

• Workflows survive crashes, restarts, and network failures
• Automatic retries with exponential backoff
• Activity heartbeats detect stuck operations
• Full execution history for debugging

Scale Strategy

• Parent/child workflow architecture to stay under Temporal’s 50K event history limit
• Chunked processing: 100 items per child workflow
• Bounded concurrency: 10 children × 5-10 activities
• Verified at 5,000 files processing ~760-800/minute

Idempotent Activities

• Lease-based acquisition prevents duplicate processing
• Token-gated writes ensure exactly-once semantics
• Terminal state short-circuits on retry

Production Patterns

• Postgres as queryable state for UI (Temporal orchestrates, DB serves reads)
• Failure-atomic run creation with compensation
• Graceful degradation (partial success, actionable failures)

Stack

• Next.js 14 - App router, server components, API routes
• Temporal - Workflow orchestration (TypeScript SDK)
• Postgres + Prisma - State persistence
• Railway - Deployment (5 services)

What’s Mocked

Document conversion, search, and LLM generation are simulated with configurable latency/failure rates. The focus was demonstrating durable orchestration patterns, not API integrations.

Repo Structure

web/     → Next.js UI + API (control plane)
worker/  → Temporal workflows + activities

Key files:

• worker/src/workflows/guideGeneration.ts - Parent orchestration
• worker/src/activities/generate.ts - Idempotent activity pattern
• web/app/api/runs/route.ts - Failure-atomic creation

Source

https://www.twine.net/signin

Full-stack web application for managing sports league registrations, memberships, team rosters, and events. Built for Quadball Canada, the national governing body for quadball in Canada.

Tech Stack

Frontend:

• React 19 with TanStack Start (modern full-stack React framework)
• TanStack Router for type-safe file-based routing
• TanStack Query for server state management and caching
• TanStack Form with Zod validation
• Tailwind CSS v4 + shadcn/ui components

Backend:

• TanStack Start server functions
• Better Auth for authentication
• Drizzle ORM with PostgreSQL
• Square API integration for payment processing
• SendGrid for transactional emails

Infrastructure:

• Deployed on Netlify with Edge Functions
• GitHub Actions CI/CD pipeline
• Playwright E2E testing + Vitest unit tests

Key Features

Authentication & Authorization:

• Multi-provider OAuth (Google, GitHub) and email/password auth
• Role-based access control (Admin, Event Coordinator, Team Lead, Member)
• Secure session management with httpOnly cookies

Membership Management:

• Annual membership registration with Square checkout integration
• Membership status tracking and renewal workflows
• Waiver acceptance and profile completion flows

Team Management:

• Team creation and roster management
• Player invitation system with email notifications
• Team lead assignment and permissions

Event System:

• Event creation with customizable registration forms
• Dynamic pricing based on membership status and roles
• Registration deadlines with automated reminders

Admin Dashboard:

• Membership reports and analytics
• User management and role assignment
• Payment tracking and reconciliation

Code Quality

• 100% TypeScript with strict type checking
• Zod schemas for runtime validation at all API boundaries
• Comprehensive test coverage (unit + integration + E2E)
• Pre-commit hooks ensuring lint, type-check, and tests pass
• Feature-based architecture for maintainable code organization

Development Practices

• Server functions use .inputValidator(schema.parse) pattern for type-safe APIs
• Proper connection pooling for serverless database access
• Security headers via Netlify Edge Functions (CSP, HSTS)
• Environment validation with @t3-oss/env-core

Technologies

React, TypeScript, TanStack Start, TanStack Router, TanStack Query, TanStack Form, Drizzle ORM, PostgreSQL, Neon, Better Auth, Tailwind CSS, shadcn/ui, Zod, Square Payments, SendGrid, Netlify, Playwright, Vitest, GitHub Actions

Links

Live: https://www.twine.net/signin
Repo: https://www.twine.net/signin

Quadball Canada Website Rebuild

Replaced an outdated WordPress site with a custom-built, high-performance platform — entirely free to host and maintain.

The Problem

The old WordPress site was slow (8.9s load times), had accessibility failures, security warnings, and costly plugin subscriptions. No French language support for Canada’s bilingual audience.

The Solution

Custom website built from scratch using modern web technologies:

• Custom frontend (Astro) optimized for speed and SEO
• Custom CMS (Sanity Studio) for easy content management
• AI-powered French translation — bilingual without extra work
• Global CDN (Cloudflare) — fast everywhere, free hosting

Results

$0/month hosting and CMS (was paying for WordPress hosting + plugins).

Scope

• Full site architecture and design
• Custom CMS for sports organization content
• Bilingual routing (EN/FR) with language switching
• Content migration from WordPress
• Automated deployments via GitHub

Solo developer — design through deployment.