Looks like you have JavaScript disabled. For the full Twine experience, you will need to re-enable it.

Solstice - Event and League Registration

Austin Wallace
Published 11 months ago

Project creator

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