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